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: http://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: http://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.
- Push-based synchronized slideshow web application – implemented using WebSockets and Kaazing WebSocket Gateway
- Push based synchronized Slideshow demo application implemented using CometD and jQuery running on Tomcat
- First steps with jWebSocket – open source Java framework for WebSockets – installation and running samples
- Get going with Kaazing WebSocket Gateway – HTML5 Edition – installing locally and running demos
- EclipseLink – Youngest Open Source Project provides venerable Java Software – TopLink's enterprise level Object Relational and Object XML mapping now open source
- Implementing a Java Server Side component for jWebSocket Server for WebSocket interaction with Web Clients « AMIS Technology blog
- Exploring Data Visualization with an HTML 5 Canvas based Tag Cloud powered by JSON
- ADF 12c: Using WebSockets to implement client to client push (in a scalable manner)
- Live match report using JMS, BAM, ADF Push and Data Visualization
- Java EE 7: EJB publishing CDI Events that are pushed over WebSocket to browser client
- ADF client-side architecture – Select All
- JavaOne 2012: What’s new in Servlet3.1: An Overview
- How to build an IM (XMPP) solution with Oracle APEX and Websockets
- JavaOne 2012: Thinking Through Java Enterprise Performance (BOF 4712)
- Notifying ADF applications of database changes – fast and lean using Active Data Service for Server to Client Push – Part Two