Skip to main content

Comet Slideshow example on Grizzly

Posted by caroljmcdonald on July 1, 2008 at 2:37 PM PDT




http-equiv="content-type">
Comet Slideshow example on Grizzly



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

ajax src="http://blogs.sun.com/carolmcdonald/resource/ajax.jpg"
style="width: 96px; height: 119px;"> comet src="http://blogs.sun.com/carolmcdonald/resource/comet.jpg"
style="width: 115px; height: 118px;"> bayeux src="http://blogs.sun.com/carolmcdonald/resource/bayeuxtapestry1.jpg"
style="width: 125px; height: 131px;">    grizzly src="http://blogs.sun.com/carolmcdonald/resource/grizzly.jpg"
style="width: 119px; height: 113px;">   
glassfish src="http://blogs.sun.com/carolmcdonald/resource/glassfishlogo.gif"
style="width: 107px; height: 86px;"> 

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



href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=9492&expandFolder=9492&folderID=8546">Download
the dojo Comet Sample Application Code



dojo  class="docTextHighlight">
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. href="http://alex.dojotoolkit.org/?p=545">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 src="http://blogs.sun.com/carolmcdonald/resource/comethttp.gif"
style="width: 642px; height: 356px;">

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 href="http://weblogs.java.net/blog/jfarcand/archive/2006/02/grizzly_part_ii.html">Asynchronous
Request Processing (ARP).  With Grizzly ARP,  each href="http://weblogs.java.net/blog/jfarcand/archive/2006/07/the_grizzly_com.html">Comet
request isn't holding onto a thread which gives
scalability.   href="http://svn.xantus.org/shortbus/trunk/bayeux/bayeux.html">Bayeux
is a protocol for routing JSON encoded events between clients and style="font-family: monospace;"> 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. 



src="http://blogs.sun.com/carolmcdonald/resource/grizzly2.gif"
style="width: 657px; height: 320px;">





Grizzly comes with Glassfish , or it can be used separately. To use
Comet with Glassfish you just need to add the bold style="color: rgb(204, 0, 0); font-weight: bold;"> red line to
the
Glassfish config  domain.xml:

     
Code Sample from: 
 style="color: rgb(0, 0, 0);">index.html
  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">
  style="font-weight: bold; color: rgb(204, 0, 0);">

[prettify]
     

Enabling Bayeux in GlassFish

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

           
Code Sample from:  index.html


Grizzly Cometd Servlet

com.sun.grizzly.cometd.servlet.CometdServlet



expirationDelay is the long delay before a request is
resumed. -1 means never.

expirationDelay
-1

1


Grizzly Cometd Servlet
/cometd/*


[/prettify]

Package your war and deploy it on Glassfish,  then every
request sent to your war's style="font-weight: bold;">context-path

 style="color: rgb(153, 0, 0); font-weight: bold;">/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 href="http://weblogs.java.net/blog/jfarcand/archive/2007/02/gcometd_introdu_1.html">
here (originally written by href="http://blogs.webtide.com/gregw">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.



src="http://blogs.sun.com/carolmcdonald/resource/cometslideshow.jpg"
style="width: 883px; height: 708px;">





Quick installation and use of dojo with Netbeans

There are 3 ways to install dojo which you can read about at in href="http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/quick-installation">the
book of dojo. A quick and easy way to use dojo with Netbeans is to
download the JavaScript libraries from href="http://dojotoolkit.org/downloads">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.


src="http://blogs.sun.com/carolmcdonald/resource/dojonet.JPG"
style="width: 324px; height: 468px;">

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: 
 style="color: rgb(0, 0, 0);">index.html






      style="font-weight: bold;">

     

     



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:  style="font-family: monospace;">chat.js
 style="color: rgb(0, 0, 0);">


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 href="http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox/cometd-client">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.



style="width: 378px; height: 304px;">



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

 style="color: rgb(153, 0, 0); font-weight: bold;">/cometd/* 
 style="font-weight: bold;"> is the url-pattern for the
Grizzly Cometd Servlet 
configured in the web.xml for the
application).


border="1" cellpadding="2" cellspacing="0">
Code Sample from:  style="font-family: monospace;">chat.js
 style="color: rgb(0, 0, 0);">
var room = {

 ...

     
 join: function(name){

  

   dojox.cometd.init(
" style="color: rgb(153, 0, 0); font-weight: bold;">/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 style="font-weight: bold;"> 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.



src="http://blogs.sun.com/carolmcdonald/resource/elephantslide.jpg"
style="width: 614px; height: 660px;">


Code Sample from: 
 style="color: rgb(0, 0, 0);">index.html
previousB" class="button"
type="submit" name="previous" value="Previous Slide"/> 

nextB"
class="button" type="submit" name="next" value="Next Slide"/>

      style="font-weight: bold;">

     

     



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. 


border="1" cellpadding="2" cellspacing="0">
Code Sample from: 
 style="color: rgb(0, 0, 0);">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(' style="font-weight: bold; color: rgb(153, 0, 0);">nextB');

    element.onclick = function(){

       room.next( slideUrls[i]);

       if (i>=
slideUrls.length
){i=0;}

       else {i++;}

    }

     

    element=dojo.byId(' style="font-weight: bold; color: rgb(153, 0, 0);">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.




border="1" cellpadding="2" cellspacing="0">
Code Sample from:  
 style="color: rgb(0, 0, 0);">chat.js
 style="color: rgb(204, 0, 0); font-weight: bold;">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 style="font-weight: bold;">" channel . In the  room.join
function shown before

dojox.cometd.subscribe("/chat/demo", room,
"_chat")
was called  to subscribe the
 style="font-weight: bold;">_chat 
callback function to
the /chat/demo style="font-weight: bold;"> 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
"src='" + slideUrl + "'/>" . 
This updates the browser page
with the image corresponding to the slide URL which was published.




border="1" cellpadding="2" cellspacing="0">
 
   
      Code Sample from: style="color: rgb(0, 102, 0); font-weight: bold;"> style="color: rgb(0, 0, 0);">chat.js
 
 style="color: rgb(0, 102, 0); font-weight: bold;">
var room = {

    ...

     
    _chat: function(message){

        var slide=dojo.byId('slide');

        var
slideUrl=message.data.slide;

        slide.innerHTML ="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  href="https://glassfish.dev.java.net/public/downloadsindex.html">Download
    and install GlassFish V2 separately.
  • To use
    Comet with Glassfish you just need to add the bold style="color: rgb(204, 0, 0); font-weight: bold;"> red line to
    the
    Glassfish config  domain.xml (in the directory
    glassfish/domains/domain1/config ):

    cellspacing="0">

           
         
       
    Code Sample from: 
     style="color: rgb(0, 0, 0);">index.html
      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">



             

     

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

     




Open and Run the Sample code:



     
  1. Download the href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=9492&expandFolder=9492&folderID=8546">sample
    code and extract its contents. You should now see the newly
    extracted directory as /dojoComet
    ,
    where
    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.  
  3. Start the NetBeans IDE. Click Open Project in the File menu and
    select the dojoComet
     directory you just
    unzipped.

       

     

  4.  
  5. Build the project as follows:

       

       

           
    • Right click the dojoComet node in the Projects window.
    • Select Clean and Build Project.

  6. 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:




Related Topics >>

Comments

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....

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

This is an example

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?

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/

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

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.

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

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

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