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()?
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:
Download the sources for this article: slideshowJWebSocket.zip.
2 thoughts on “Push-based synchronized slideshow web application – implemented using WebSockets and jWebSocket server – the open source Java WebSocket server”
Hi Lucas, great tutorial! 😉 btw the relative links in the html page of the zip are wrong I suppose…
[…] Contact About the author : Lucas Jellema Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, ADF, Java in various shapes and forms and many other things. Author of … More by Lucas Jellema « Previous post […]
Comments are closed.