Skip to content

Commit 6021258

Browse files
ptaoussanisptaoussanis
committed
[new] [example] Misc improvements to example project
Incl. notably some additional debugging tools for [#431]: - `connected-uids_` and `conns_` now both printed in loop - New buttons: - Print connected uids - Test repeated logins
1 parent 0dc8a12 commit 6021258

File tree

2 files changed

+209
-109
lines changed

2 files changed

+209
-109
lines changed

‎example-project/src/example/client.cljs

+89-39
Original file line numberDiff line numberDiff line change
@@ -17,47 +17,62 @@
1717

1818
;;;; Logging config
1919

20+
(defonce min-log-level_ (atom nil))
2021
(defn- set-min-log-level! [level]
2122
(sente/set-min-log-level! level) ; Min log level for internal Sente namespaces
2223
(timbre/set-ns-min-level! level) ; Min log level for this namespace
23-
)
24+
(reset! min-log-level_ level))
2425

25-
(set-min-log-level! :info)
26+
(when-let [el (.getElementById js/document "sente-min-log-level")]
27+
(let [level (if-let [attr (.getAttribute el "data-level")]
28+
(keyword attr)
29+
:warn)]
30+
(set-min-log-level! level)))
2631

2732
;;;; Util for logging output to on-screen console
2833

29-
(def output-el (.getElementById js/document "output"))
30-
(defn ->output! [fmt & args]
31-
(let [msg (apply encore/format fmt args)]
32-
;; (timbre/tracef "->output: %s" msg)
33-
(aset output-el "value" (str (.-value output-el) "\n• " msg))
34+
(let [output-el (.getElementById js/document "output")]
35+
(defn- ->output!! [x]
36+
(aset output-el "value" (str (.-value output-el) x))
3437
(aset output-el "scrollTop" (.-scrollHeight output-el))))
3538

39+
(defn ->output!
40+
([ ] (->output!! "\n"))
41+
([fmt & args]
42+
(let [msg (apply encore/format fmt args)]
43+
(->output!! (str "\n• " msg)))))
44+
3645
(->output! "ClojureScript has successfully loaded")
46+
(->output! "Sente version: %s" sente/sente-version)
47+
(->output! "Min log level: %s (use toggle button to change)" @min-log-level_)
48+
(->output!)
3749

3850
;;;; Define our Sente channel socket (chsk) client
3951

4052
(def ?csrf-token
4153
(when-let [el (.getElementById js/document "sente-csrf-token")]
42-
(.getAttribute el "data-csrf-token")))
54+
(.getAttribute el "data-token")))
4355

4456
(if ?csrf-token
4557
(->output! "CSRF token detected in HTML, great!")
4658
(->output! "**IMPORTANT** CSRF token NOT detected in HTML, default Sente config will reject requests!"))
4759

48-
(let [;; For this example, select a random protocol:
49-
rand-chsk-type (if (>= (rand) 0.5) :ajax :auto)
50-
_ (->output! "Randomly selected chsk type: %s" rand-chsk-type)
60+
(def chsk-type
61+
"We'll select a random protocol for this example"
62+
(if (>= (rand) 0.5) :ajax :auto))
63+
64+
(->output! "Randomly selected chsk type: %s" chsk-type)
65+
(->output!)
5166

52-
;; Serializtion format, must use same val for client + server:
67+
(let [;; Serializtion format, must use same val for client + server:
5368
packer :edn ; Default packer, a good choice in most cases
5469
;; (sente-transit/get-transit-packer) ; Needs Transit dep
5570

5671
{:keys [chsk ch-recv send-fn state]}
5772
(sente/make-channel-socket-client!
5873
"/chsk" ; Must match server Ring routing URL
5974
?csrf-token
60-
{:type rand-chsk-type
75+
{:type chsk-type
6176
:packer packer})]
6277

6378
(def chsk chsk)
@@ -117,71 +132,86 @@
117132

118133
;;;; UI events
119134

120-
(when-let [target-el (.getElementById js/document "btn1")]
135+
(when-let [target-el (.getElementById js/document "btn-send-with-reply")]
121136
(.addEventListener target-el "click"
122137
(fn [ev]
123-
(->output! "Will send event to server WITH callback")
124138
(chsk-send! [:example/button2 {:had-a-callback? "indeed"}] 5000
125-
(fn [cb-reply] (->output! "Callback reply: %s" cb-reply))))))
139+
(fn [cb-reply]
140+
(->output! "Callback reply: %s" cb-reply))))))
126141

127-
(when-let [target-el (.getElementById js/document "btn2")]
142+
(when-let [target-el (.getElementById js/document "btn-send-wo-reply")]
128143
(.addEventListener target-el "click"
129144
(fn [ev]
130-
(->output! "Will send event to server WITHOUT callback")
131145
(chsk-send! [:example/button1 {:had-a-callback? "nope"}]))))
132146

133-
(when-let [target-el (.getElementById js/document "btn3")]
147+
(when-let [target-el (.getElementById js/document "btn-test-broadcast")]
134148
(.addEventListener target-el "click"
135149
(fn [ev]
136-
(->output! "Will ask server to test rapid async push")
137-
(chsk-send! [:example/test-rapid-push]))))
150+
(->output!)
151+
(chsk-send! [:example/test-broadcast]))))
138152

139-
(when-let [target-el (.getElementById js/document "btn4")]
153+
(when-let [target-el (.getElementById js/document "btn-toggle-broadcast-loop")]
140154
(.addEventListener target-el "click"
141155
(fn [ev]
142-
(chsk-send! [:example/toggle-broadcast] 5000
156+
(chsk-send! [:example/toggle-broadcast-loop] 5000
143157
(fn [cb-reply]
144158
(when (cb-success? cb-reply)
145-
(let [loop-enabled? cb-reply]
146-
(if loop-enabled?
147-
(->output! "Server async broadcast loop now ENABLED")
148-
(->output! "Server async broadcast loop now DISABLED")))))))))
159+
(let [enabled? cb-reply]
160+
(if enabled?
161+
(->output! "Server broadcast loop now ENABLED")
162+
(->output! "Server broadcast loop now DISABLED")))))))))
149163

150-
(when-let [target-el (.getElementById js/document "btn5")]
164+
(when-let [target-el (.getElementById js/document "btn-disconnect")]
151165
(.addEventListener target-el "click"
152166
(fn [ev]
153-
(->output! "Disconnecting...\n\n")
167+
(->output!)
154168
(sente/chsk-disconnect! chsk))))
155169

156-
(when-let [target-el (.getElementById js/document "btn6")]
170+
(when-let [target-el (.getElementById js/document "btn-reconnect")]
157171
(.addEventListener target-el "click"
158172
(fn [ev]
159-
(->output! "Reconnecting...\n\n")
173+
(->output!)
160174
(sente/chsk-reconnect! chsk))))
161175

162-
(when-let [target-el (.getElementById js/document "btn7")]
176+
(when-let [target-el (.getElementById js/document "btn-break-with-close")]
163177
(.addEventListener target-el "click"
164178
(fn [ev]
165-
(->output! "Simulating basic broken connection (WITH close)...\n\n")
179+
(->output!)
166180
(sente/chsk-break-connection! chsk {:close-ws? true}))))
167181

168-
(when-let [target-el (.getElementById js/document "btn8")]
182+
(when-let [target-el (.getElementById js/document "btn-break-wo-close")]
169183
(.addEventListener target-el "click"
170184
(fn [ev]
171-
(->output! "Simulating basic broken connection (WITHOUT close)...\n\n")
185+
(->output!)
172186
(sente/chsk-break-connection! chsk {:close-ws? false}))))
173187

174-
(when-let [target-el (.getElementById js/document "btn9")]
188+
(when-let [target-el (.getElementById js/document "btn-toggle-logging")]
175189
(.addEventListener target-el "click"
176190
(fn [ev]
177-
(->output! "Will ask server to toggle minimum log level")
178191
(chsk-send! [:example/toggle-min-log-level] 5000
179192
(fn [cb-reply]
180193
(if (cb-success? cb-reply)
181194
(let [level cb-reply]
182195
(set-min-log-level! level)
183196
(->output! "New minimum log level (client+server): %s" level))
184-
(->output! "Failed to toggle minimum log level: %s" cb-reply)))))))
197+
(->output! "Request failed: %s" cb-reply)))))))
198+
199+
(when-let [target-el (.getElementById js/document "btn-toggle-bad-conn-rate")]
200+
(.addEventListener target-el "click"
201+
(fn [ev]
202+
(chsk-send! [:example/toggle-bad-conn-rate] 5000
203+
(fn [cb-reply]
204+
(if (cb-success? cb-reply)
205+
(->output! "New rate: %s" cb-reply)
206+
(->output! "Request failed: %s" cb-reply)))))))
207+
208+
(when-let [target-el (.getElementById js/document "btn-connected-uids")]
209+
(.addEventListener target-el "click"
210+
(fn [ev]
211+
(chsk-send! [:example/connected-uids] 5000
212+
(fn [cb-reply]
213+
(when (cb-success? cb-reply)
214+
(->output! "Connected uids: %s" cb-reply)))))))
185215

186216
(when-let [target-el (.getElementById js/document "btn-login")]
187217
(.addEventListener target-el "click"
@@ -190,7 +220,8 @@
190220
(if (str/blank? user-id)
191221
(js/alert "Please enter a user-id first")
192222
(do
193-
(->output! "Logging in with user-id %s...\n\n" user-id)
223+
(->output!)
224+
(->output! "Logging in with user-id %s..." user-id)
194225

195226
;;; Use any login procedure you'd like. Here we'll trigger an Ajax
196227
;;; POST request that resets our server-side session. Then we ask
@@ -212,6 +243,25 @@
212243
(->output! "Login successful")
213244
(sente/chsk-reconnect! chsk))))))))))))
214245

246+
(when-let [target-el (.getElementById js/document "btn-repeated-logins")]
247+
(.addEventListener target-el "click"
248+
(fn [ev]
249+
(->output!)
250+
(->output! "Will rapidly change user-id from \"1\" to \"10\"...")
251+
(let [c (async/chan)]
252+
(go-loop [uids (range 11)]
253+
(when-let [[next-uid] uids]
254+
(sente/ajax-lite "/login"
255+
{:method :post
256+
:headers {:X-CSRF-Token (:csrf-token @chsk-state)}
257+
:params {:user-id (str next-uid)}}
258+
(fn [ajax-resp]
259+
(when (:success? ajax-resp) (sente/chsk-reconnect! chsk))
260+
(put! c :continue)))
261+
(<! c)
262+
(<! (async/timeout 100))
263+
(recur (next uids))))))))
264+
215265
;;;; Init stuff
216266

217267
(defn start! [] (start-router!))

0 commit comments

Comments
 (0)