Push based synchronized Slideshow demo application implemented using CometD and jQuery running on Tomcat
In a string of recent articles, I have discussed downloading, installing and running demos for a number of different tools, frameworks and libraries that support push-style (web) applications in one way or another. I have looked into â€˜classicâ€™ comet with Grizzly, Atmosphere and CometD as well as ADF Active Data Service and WebLogic Pub/Sub (Bayeux) Channels. I have also looked to WebSockets with jWebSocket, again Atmosphere and CometD and also with Kaazing. I am now working on a series of articles in which I use each of these frameworks and push infrastructures to implement the same simple push-style application – to see how that goes and to compare the various implementations. The functionality I will be implementing is simple:
- the selection of the image is communicated to the server (background WebSocket based or alternatively regular AJAX)Comet (Bayeux)/Long Poll style)
- the server informs all connected clients about the selected image through a pushed message (background WebSocket based or alternatively Comet (Bayeux)/Long Poll style); these clients all synchronize that slide selection
- a Java (server side) component can also connect to the server and listen in to image selection events as well as publish image selection messages of its own
The first article discussed the implementation using WebSockets and Kaazing 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 present an implementation using the CometD framework.
I will use NetBeans as my IDE, Tomcat as the Servlet Container to run the application on and a combination of browsers (Chrome, Firefox and IE) to try it out.
Earlier articles described how to set up NetBeans (http://technology.amis.nl/blog/14661/first-experiences-and-getting-started-with-glassfish-3-1-and-netbeans-7-x-its-a-breeze) and Tomcat (http://technology.amis.nl/blog/14688/installing-tomcat-7-and-configuring-as-server-in-netbeans) – these may be helpful to get started. Another discusses getting the CometD demos running (http://technology.amis.nl/blog/14709/running-cometd-2-examples-locally-on-tomcat-using-maven-and-netbeans and http://technology.amis.nl/blog/14720/cometd-2-java-client-sample-open-project-in-netbeans-based-on-maven-pom-file-modify-sources-and-run-java-based-comet-client).
Create NetBeans project from Maven Archetype
First, I needed to locate the proper archetype deatils for CometD with JQuery and Jetty 7 libraries:
Using this information, I continue in NetBeans.
Select the option to create the new project as Maven style project from an Archetype:
Press the Add button to create a new archetype. Enter the details for the archetype as found on the MVNRepository website:
Select the newly created archetype and press Next.
Enter some project details – such as the name and the location on the file system. Then press Finish.
A brief interlude follows in which NetBeans downloads the required resources.
Then, the new project is presented:
The project is ready to run as is
after associating it with a pre-configured servlet container:
and the browser is launched.
The application is functional – even though the functionality is somewhat limited at this point.
Note: it turns out useful to assign a proper context path the application – in the Project Properties dialog on the Run tab:
The HTML (in the file index.jsp) is simple and straightforward:
The variable cometd is now a global variable – in order to provide access to it from my own functions in index.jsp:
I have removed the generated code that leverages the CometD Echo Service to print out a demo message. Near the end of the application.js file, I have added a call to function setup().
This function is defined in index.jsp
It initializes the slide variable – referring to the IMG element holding the current slide. It subscribes the function slideListener to the /slide/show channel.
Note: no client or server side configuration of channels is required in order to start using them. The channel is ‘instantiated’ when the first subscription takes place.
The slideListener callback handler is invoked whenever a message is received on the /slide/show channel:
The slideEvent object itself contains some meta-data as well:
The function adjustSlide with some helper functions was also used for the Kaazing example:
Based on the slideNumber parameter, adjustSlide will set the src of the slide variable (or the IMG element) to the url for the selected image. It then also highlights (in blue) the corresponding link.
When the user clicks a link, the corresponding image is also displayed and now an event is published to the /slide/show channel. This happens from the setSlide() function:
The message that is published is a Java object – that will be transported in some JSON serialized format.
This completes the implementation of the client. We can now run the Slideshow client in multiple browsers and see how they synchronize:
You need to see this in action – as pictures cannot really demonstrate what happens.
Implementing the Slideshow Java client application
In addition to the HTML Web Client for the Slideshow, I want to implement a Java (possibly server side) component as well. This will be a Java Class that can connect to the CometD servlet, subscribe on channels and publish to channels. In this case the class would subscribe to /slide/show and listen in on the message exchanged by the web clients. It can also publish slide selection events of its own to that channel, forcing slide selection for all connected web clients from within the Java code.
My class is called SlideShowClient. It imports a number of classes from the CometD distribution. For the moment I have created the class inside the CometD Java Examples project that was created in NetBeans from the pom.xml file in COMET_HOME\cometd-java\cometd-java-examples. This means that all library dependencies are already configured:
The class has a main method that invokes the run() method.
The run method contains some generic code for making contact with the CometD servlet – on the address corresponding with the deployment of the Web Application discussed in the previous section. In this case this is “http://localhost:8085/slideshow/cometd“.
This code connects to the CometD server and prepares the application for what is next. For example: publishing events to the /slide/show channel:
The InitializerListener that is configured on the “Meta Channel” is shown below. It is activated when the Meta Channel Handshake is complete and the connection to CometD is established. Its onMessage method invokes – when the connection was successfully created – the initialize() method.
This method hands the client (BayuexClient) a batch of instructions to perform as one batch. The instructions are simple: get hold of /slide/show channel (either retrieve existing channel reference or create a new one) and subscribe the slideshowListener on this channel (and just to be safe and prevent duplicate subscriptions, first remove an existing subscription; this unsubscribe call does nothing if not subscriptions exists).
The slideshowListener is an inner class that implements the interface ClientSessionChannel.MessageListener. The onMessage method is invoked whenever the subscription on the slideshowChannel results in a message (that is: whenever an image selection event is published on /slide/show, for example by the web clients – or by this Java class itself.
Running the Java Client application produces the following output, with some slide selections taking place in the client and one pushed from the server:
Download sources as described in this article: SlideShowCometd.zip.
- Push-based synchronized slideshow web application – implemented using WebSockets and Kaazing WebSocket Gateway
- Running CometD 2 examples – locally on Tomcat using Maven and NetBeans
- CometD 2 Java Client Sample – open project in NetBeans based on Maven pom file, modify sources and run Java Based Comet Client
- Getting Atmosphere – framework for Comet style communication – up and a first sample running on Tomcat
- Create simple Java application to post JSON message to CometD Bayeux Channel using Apache HttpClient and Maven style NetBeans project « AMIS Technology blog
- Publishing to CometD Bayeux Channel from inside the Oracle Database – PL/SQL based push to CometD Web Client « AMIS Technology blog
- Exploring Data Visualization with an HTML 5 Canvas based Tag Cloud powered by JSON
- Giving Java 8 a spin using NetBeans 7.4 RC
- 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
- Getting started with Java EE 7 – Hands on in 10 minutes
- ADF client-side architecture – Select All
- JavaOne 2012: What’s new in Servlet3.1: An Overview
- JavaOne 2012: Strategy and Technical Keynote
- JavaOne 2012: Thinking Through Java Enterprise Performance (BOF 4712)