WebSockets Latency Visualization

Matthias Nehlsen

WebSockets bring bi-directional communication to the browser. This enables you to deliver interactive, real time web applications where all the data is as of right now, rather than always being outdated, and then constantly refreshed.

But how fast is this transport mechanism? Let's have a look. You may have noticed the circle around the mouse pointer on this page, What happens here is that movements of the mouse (or your finger on your mobile device) are captured. The more reddish one is then painted immediately, whereas the bluish one is painted after the event is sent to a server somewhere in Germany, and then back to wherever you are.or in fact the two circles, where one of them appears to follow the other. Both represent your last mouse position, only that one was sent to and returned from the server in the meantime. This gives you an intuition for how long it takes. Also, with your movement of the mouse, you generate data for the histograms below, which show the roundtrip duration:

Now, since we are already capturing the movement of the mouse, you may think that it could be interesting to see where the users' mouses go, as a proxy for where they are looking on a page. Surely not as accurate as actual eye tracking, but probably much better than nothing. Now let's see where your mouse was since you started interacting with this page. Click the "show all" button in the info section below,By clicking those buttons again, you can switch the display on or off. and you see where your mouse goes. Then, by clicking "show all (server)", you can also display the most recent mouse positions of all visitors on this page.

You are looking at a web application written in Clojure andClojureScript. It is one of the example applications of the systems-toolbox library. The histograms above are rendered entirely in ClojureScript - without any additional charting library.The Freedman-Diaconis rule determines the number of bins in the histograms. The first histogram takes the entire sample into account whereas the second only displays the observations that fall within the 99th percentile to remove potential outliers.

Structure of the ClojureScript application, with their message flow visualized as rx and tx LEDs, like on a network card.

If you want to know how this application was built, have a look at the code on GitHub or the book Building Systems in Clojure(Script). Also, check for a future blog post on matthiasnehlsen.com.

Finally, if you like the layout of this page, you need to look at Tufte CSS. It allowed me to write this application with only around 30 lines of CSS, most of which is related to the flexbox layout for histogram SVGs.