Push-based synchronized slideshow web application – implemented using WebSockets and jWebSocket server – the open source Java WebSocket server

In a recent article, I have introduced jWebSocket – an open source Java based server for WebSocket communication: https://technology.amis.nl/blog/14940/first-steps-with-jwebsocket-open-source-java-framework-for-websockets-installation-and-running-samples. In this article, I have described how to download and install the jWebSocket server and how to get going with running some of the distributed samples.

In another recent article, I looked at the implementation of a slideshow application where multiple web clients are mutually synchronized using WebSocket based communication using the Kaazing commercial Web Socket Gateway: https://technology.amis.nl/blog/14777/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-kaazing-websocket-gateway.

In this article, I will implement that same Slideshow application as with Kaazing, this time using the jWebSocket server as my underlying WebSocket infrastructure. It turns out that no server side configuration is required for this initial, somewhat naive implementation that does not use a specific channel but simply has all clients of the jWebSocket server participate in the communication. A more advanced set up would undoubtedly use some way to ensure that only interested parties connected to a specific web socket or channel would actually receive the slide selection events. As it stands, the implementation is quite straightforward – based on the file presenter.htm shipped with the jWebSocket Client Samples (directory demos\slideshow).

The result will look like this – just like it looked with both cometd and with Kaazing:

As was mentioned before, this implementation requires no server side configuration. I could implement the synchronized slideshow using nothing more than a single static HTML file slideshowDemojWebSocket.html – along with the five slides that this application contains.

The HTML in the file is very similar to the HTML for the cometd and Kaazing implementations:

The things specifically worth mentioning:

• div with id=sdivLog does not add specific functionality – it helps to provide a generic logging facility
• the links with onclick referring to function setSlide(#) are the same as with the CometD and Kaazing implementation
• the initPage() function called in the onload is the function that connects to the Web Socket and configures the call back functions

So what happens in initPage()?

A new jWebSocketJSONClient is instantiated – described here http://jwebsocket.org/javadocs/jWebSocketWebClient/jsdoc.htm– an object that wraps some of the underlying WebSocket JavaScript APIs which in a way is unfortunate because now the JavaScript in the Slideshow application is probably no longer portable across WebSocket developers; I am not sure whether this code can be used across different WebSocket servers. Note that this jWebSocketJSONClient is an extension of jWebSocketTokenClient.

(regarding this, I found the following comments by Alex Schulze, the lead developer for jWebSocket; note that he was talking about the Java Client (not JavaScript) but it seems the same holds more or less true for the web client end: “basically, the jWebSocket client provides two communication levels: One low level, compliant to the W3C browser API and one high level, for the jWebSocket token based communication. Since the WebSocket protocol does not specifiy any rules for commands or services or even data formats or any content for the data packages, if you use the low level protocol, you can physically connect to any WebSocket server, given it alrady supports the selected protocol version. However, to support certain features of the third party server you need to generate the data packages your self to access its services. This includes the data format, session handling, auto reconnect etc. which is server centric. So we rather recommend to use the jWebSocket server, because here you can access low level as well high level features concurrently.”

The connect function opens the WebSocket connection to the default server url – ws://127.0.0.1:8787/jWebSocket/jWebSocket. It configures a number of call back functions for the events Open, Welcome, Message, Token and Close. The Token event is the one that is triggered when one of the other WebSocket clients pushes a slide selection event message.

When a slide selection message is received, OnToken will verify that the action property of the aToken object is set to slide. In that case, and when the message was not sent by this client itself, the function adjustSlide is invoked with the slideNumber that is retrieved from the aToken object.

The function adjustSlide() – together with some helper functions – is the same one as used for the Kaazing and CometD client:

The final JavaScript function that should be mentioned is setSlide(). This function is invoked when the user clicks on one of the hyperlinks representing the five slides. This function sets the selected slide locally (through the call to adjustSlide()), and then publishes a message to the Web Socket – using broadcastToken. This message is not directed to one specific consumer – but to all current clients of the jWebSocket server. The message is a [serialized] JSON object that contains the action (= slide), uniqueId and slideNumber properties.

Resources

Download the sources for this article: slideshowJWebSocket.zip.