A Comet Slideshow example using dojo, Comet, Bayeux, on Grizzly with Glassfish

         
This Sample Slideshow app demonstrates the usage of the dojo Ajax framework, Comet, Bayeux, with Grizzly and Glassfish.

Download the dojo Comet Sample Application Code

dojo  is an open source DHTML toolkit written in JavaScript. It includes many utilities that go beyond Ajax, for example the dojox.comet module simplifies programming comet applications. Comet is a term coined by Alex Russell  to describe applications where the Server pushes data to the client.  For example in the diagram below on the left you see  Ajax polling which uses synchronous requests/responses to get events from the server. Comet  uses long-lived previously-opened HTTP connections to "push" data to the client at any time, not only in response to user input.


Grizzly is an HTTP framework which uses the Java™ NIO API to provide fast HTTP processing . Grizzly provides Comet (long-lived streaming HTTP connections) support built on top of Grizzly's Asynchronous Request Processing (ARP).  With Grizzly ARP,  each Comet request isn't holding onto a thread which gives scalability.   Bayeux is a protocol for routing JSON encoded events between clients and servers in a publish subscribe model.  Grizzly provides an implementation of Bayeux, which makes it really easy to build Comet applications with dojo, you just configure Glassfish for Comet and configure your Web Application's web.xml for the Grizzly  Bayeux servlet  then you can use the dojox cometd publish and subscribe methods to send and receive Comet events as described in more detail below. 




Grizzly comes with Glassfish , or it can be used separately. To use Comet with Glassfish you just need to add the bold red line to the Glassfish config  domain.xml:

Code Sample from:  index.html

<http-listener acceptor-threads="1" address="0.0.0.0" blocking-enabled="false" default-virtual-server="server" enabled="true" family="inet" id="http-listener-1" port="8080" security-enabled="false" server-name="" xpowered-by="true"> <property name="cometSupport" value="true"/> </http-listener>

Enabling Bayeux in GlassFish

to enable Bayeux on Glassfish, add the following to your Web application web.xml :

Code Sample from:  index.html

<servlet> <servlet-name>Grizzly Cometd Servlet</servlet-name> <servlet-class> com.sun.grizzly.cometd.servlet.CometdServlet </servlet-class> <init-param> <description> expirationDelay is the long delay before a request is resumed. -1 means never. </description> <param-name>expirationDelay</param-name> <param-value>-1</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Grizzly Cometd Servlet</servlet-name> <url-pattern>/cometd/*</url-pattern> </servlet-mapping>

Package your war and deploy it on Glassfish,  then every request sent to your war's context-path/cometd/ will be serviced by the Grizzly Bayeux runtime.

Explanation of the usage of dojox cometd in the sample Slideshow Application

I modified the comet chat example from here (originally written by Greg Wilkins), to share a slideshow presentation among all subscribed clients. The image below shows the Comet Slideshow page, which allows the users to share a Slideshow and chat at the same time.

Quick installation and use of dojo with Netbeans

There are 3 ways to install dojo which you can read about at in the book of dojo. A quick and easy way to use dojo with Netbeans is to download the JavaScript libraries from http://dojotoolkit.org/downloads.   Create a new NetBeans Web Applications project. Extract the dojo toolkit  into the project web directory: .../web , then rename dojo-release-1.1.1/ to src/  this will give you the project structure shown below.  I have already done this for the sample project so you do not have to download dojo in order to run the sample.

Loading base dojo and required modules into an application

In order to load dojo into your application,  put the relative path to the dojo.js file in a script element in the head section of your  HTML page as shown below:

Code Sample from:  index.html

<script type="text/javascript" src="src/dojo/dojo.js"></script> <script type="text/javascript" src="chat.js"></script>

This script element will load the base dojo script which gives you access to all the dojo functionality. The rest of the Java Script for this application is in the file chat.js.

Next in chat.js the application specifies which  dojo modules to load, using  the dojo.require function (kind of like  import in Java):

Code Sample from:  chat.js

dojo.require("dojox.cometd");

Dojo is organized into three major layers: Dojo Core, Dijit, and DojoX.   DojoX builds on  Dojo Core and provides newer extensions to the Dojo toolkit. DojoX cometd  implements a Bayeux protocol client for use with a Bayeux server.

Initializing a connection between the dojo client and the Grizzly BayeuxServlet

When a user first loads the slideshow application, he can enter a username and join a slideshow session.



When a user clicks on the Join button, the join javascript function is called.  In the join function, the call to dojox.cometd.init initialises a connection to the given Comet server, in this case with the Glassfish Grizzly Bayeux servlet (note /cometd/*  is the url-pattern for the Grizzly Cometd Servlet configured in the web.xml for the application).

Code Sample from:  chat.js

var room = {  ...  join: function(name){       dojox.cometd.init("/cometd");    dojox.cometd.subscribe("/chat/demo", room, "_chat");    dojox.cometd.publish("/chat/demo",       { user: room._username,         join: true, chat : room._username+" has joined"});  }

The dojox.cometd.subscribe line subscribes the _chat callback function to the /chat/demo channel. Any time a message is sent to the  /chat/demo channel the _chat function will be called.
The dojox.cometd.publish line publishes the message that the user  (the name that was entered with the join button) has joined the /chat/demo channel. Subscribers   to the /chat/demo channel will get this message.

Publishing the next slide for the Comet Slideshow

When the user clicks on the "Next Slide" button shown below,  a javascript funtion is called which publishes the url for the next slide.

Code Sample from:  index.html

<input id="previousB" class="button" type="submit" name="previous" value="Previous Slide"/>  <input id="nextB" class="button" type="submit" name="next" value="Next Slide"/>

When the user clicks on the Next Slide button, the  javascript function shown below is called. This function calls room.next passing the url for the next slide. The function then increments the index for the next slide. The urls for the slides are stored in the slideUrls array shown below. 

Code Sample from:  widget.json

var room = { ...   _init: function(){     var slideUrls=[             "/dojoComet/images/image0.jpg",             "/dojoComet/images/image1.jpg",             "/dojoComet/images/image2.jpg",             "/dojoComet/images/image3.jpg",             "/dojoComet/images/image4.jpg",             "/dojoComet/images/image5.jpg"];     var i=0;     element=dojo.byId('nextB');     element.onclick = function(){        room.next( slideUrls[i]);        if (i>=slideUrls.length){i=0;}        else {i++;}     }     element=dojo.byId('previousB');     element.onclick = function(){        room.next( slideUrls[i]);        if (i<=0){i=0;}        else {i--;}     }   } ...

The function  room.next, shown below, calls dojox.cometd.publish to publish the next slide url (input argument)  to the /chat/demo channel. Subscribers   to the /chat/demo channel will get this message.

Code Sample from:   chat.js

var room = {     ...     next: function(text){         dojox.cometd.publish("/chat/demo", {slide: text});     }     ... }

When a message is published to a Bayeux channel on the server,  it is delivered to all clients subscribed to that channel,  in this case to the  "/chat/demo" channel . In the  room.join function shown before dojox.cometd.subscribe("/chat/demo", room, "_chat") was called  to subscribe the _chat callback function to the /chat/demo channel.   The _chat callback function, shown below,  is called  with the published message as an input argument.  The _chat callback function  updates the browser page by setting the slide dom element innerHTML to an html img tag with the slide url from the published message "<img src='" + slideUrl + "'/>" . This updates the browser page with the image corresponding to the slide URL which was published.

Code Sample from: chat.js

var room = {     ...     _chat: function(message){         var slide=dojo.byId('slide');         var slideUrl=message.data.slide;         slide.innerHTML ="<img src='" + slideUrl + "'/>";     ... }

Conclusion
This concludes the sample application which demonstrates the usage of the dojo Ajax framework, Comet, Bayeux, with Grizzly and Glassfish.

Running the Sample Code

The sample code  is available as a NetBeans project. You can build and run the sample code using the NetBeans IDE.

Setting Things Up

• Download and install NetBeans 6.1 bundled with GlassFish V2
  
• Alternatively you can  Download and install GlassFish V2 separately.
• To use Comet with Glassfish you just need to add the bold red line to the Glassfish config  domain.xml (in the directory glassfish/domains/domain1/config ):

  Code Sample from:  index.html

  <http-listener acceptor-threads="1" address="0.0.0.0" blocking-enabled="false" default-virtual-server="server" enabled="true" family="inet" id="http-listener-1" port="8080" security-enabled="false" server-name="" xpowered-by="true"> <property name="cometSupport" value="true"/> </http-listener>

• Bayeux and dojo are already configured in the sample code.
  

Open and Run the Sample code:

1. Download the sample code and extract its contents. You should now see the newly extracted directory as <sample_install_dir>/dojoComet, where <sample_install_dir> is the directory where you unzipped the sample package. For example, if you extracted the contents to C:\ on a Windows machine, then your newly created directory should be at C:\dojoComet.
   
   
2. Start the NetBeans IDE. Click Open Project in the File menu and select the dojoComet directory you just unzipped.
   
   
3. Build the project as follows:
   
   
   • Right click the dojoComet node in the Projects window.
     
   • Select Clean and Build Project.
     
     
4. Run the project as follows:
   
   
   • Right click the dojoComet node in the Projects window.
     
   • Select Run Project.
     

When you run the project, your browser should display the opening page of the Sample Application (at http://localhost:8080/dojoComet/). Open another browser and set that url to http://localhost:8080/dojoComet/  then enter a name and click on the join button in both browser windows.   Then click on the next slide button in one browser window.  Both browsers should get updated with the next slide.  

For more Information:

• Jean-Francois Arcand's Blog on Cometd framework and its Bayeux protocol support in Grizzly
• Using the Grizzly Comet API
  
• dojo toolkit
  
• dojo cometd
  
• grizzly
• glassfish
• Enterprise Comet: Awaken the Grizzly!
• Asynchronous HTTP and Comet architectures
• A Comparison of Push vs Pull Ajax
• Comet and Reverse Ajax: The Next Generation Ajax 2.0 book