Carol McDonald's Blog: Comet Slideshow example on Grizzly

My pages	Projects	Communities	java.net

Get Involved

java-net Project

Request a Project

Project Help Wanted Ads

Publicize your Project

Get Informed

java.net Online Books

java.net Archives

Get Connected

java.net Forums

Wiki and Javapedia

People, Partners, and Jobs

Java User Groups

RSS Feeds

Search

Online Books:

java.net on MarkMail:

Advanced Search

Carol McDonald's Blog

«jMaki Presentation slides and Sample code | Main | Sample Store Catalog using using Groovy and Grails and the Java Persistence API on Glassfish with MySQL »

Comet Slideshow example on Grizzly

Posted by caroljmcdonald on July 01, 2008 at 02:37 PM | Comments (10)

Comet Slideshow example on Grizzly

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.

comet http

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:

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.
Start the NetBeans IDE. Click Open Project in the File menu and select the dojoComet directory you just unzipped.
Build the project as follows:
- Right click the dojoComet node in the Projects window.
- Select Clean and Build Project.
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:

Bookmark blog post:

del.icio.us

Digg

DZone

Furl

Comments

Comments are listed in date ascending order (oldest first) | Post Comment

Hello, I have problems running the example in Internet Explorer, sometimes not shown the messages sent or the images are not loaded.
In firefox entirely correct, but I'm working on a prototype based on this example and be submitted in Internet Explorer.
I podrias guide in this problem?

Thank you, greetings from Chile
M.Graciela

Posted by: ladybytes on August 01, 2008 at 01:08 PM

I run the example with one browser internet explorer and one browser firefox, and I don't have problems. Sometimes the image loading might be a little slow

Posted by: caroljmcdonald on August 01, 2008 at 01:17 PM

I'm using IE 7 on windows XP and its ok

Posted by: caroljmcdonald on August 01, 2008 at 01:27 PM

Hello

Run the example and also transforms them into another application that I'm looking for, is precisely what I need, but I need help or guide, regarding how can I connect my server and push their data with other non-web applications, as java desktop applications, flash and J2ME applications.
I'm working on a system publisher / subscriber, where subscribers are different applications of various kinds, including those already appointed, I will need any special or API already exists for any implementation goes straight to my data for example, an application desktop in swing .

Well, waiting for his response, it was dismissed from Chile.
Maria Graciela Manquehual.

Posted by: ladybytes on August 06, 2008 at 02:26 PM

Hello
Now I have no problems with Internet Explorer, which is not serious the problem, but now found no faults.
Greetings.

Posted by: ladybytes on August 06, 2008 at 02:28 PM

JMS provides publish/subscribe events. This JavaOne talk is about ajax push and openESB.
http://developers.sun.com/learning/javaoneonline/2007/pdf/TS-8434.pdf
Also take a look at this article about bayeux and jms
http://cometdaily.com/2008/07/09/implementing-a-bayeux-to-jms-bridge/

Posted by: caroljmcdonald on August 06, 2008 at 02:41 PM

Hi Carol , I would really like to see an example of server side grizzly + dojox, do you know of any good docs regarding that topic?

Posted by: igf1 on August 16, 2008 at 12:36 PM

This is an example

Posted by: caroljmcdonald on August 16, 2008 at 06:44 PM

Hello Carol.

I concentrated on working dojo comet, based in this instance. Now I'm with a problem, I hope I can guide. On the one hand I have java classes, which get data from an external source, and from there, I need to make the publication of the data itself. In the example, the issue of the publication is done in js, which does not help, that is not as accessible from my classes java to it. I have reviewed some examples, but in Jetty, and I need in Glassfish.
Know of any examples that can publish data from my classes java, but always using dojo, and bayeux cometd?
I hope I understand
Regards
M.Graciela

Posted by: ladybytes on August 21, 2008 at 08:42 AM

did you take a look at
Jim Driscoll's Dead Simple Comet Example on Glassfish
http://weblogs.java.net/blog/driscoll/archive/2008/05/dead_simple_com_1.html

Posted by: caroljmcdonald on August 21, 2008 at 08:46 AM

Powered by
Movable Type 3.01D

java.net RSS Feeds