Comet Slideshow example on Grizzly

http-equiv="content-type">

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

src="http://blogs.sun.com/carolmcdonald/resource/ajax.jpg"
style="width: 96px; height: 119px;"> src="http://blogs.sun.com/carolmcdonald/resource/comet.jpg"
style="width: 115px; height: 118px;"> src="http://blogs.sun.com/carolmcdonald/resource/bayeuxtapestry1.jpg"
style="width: 125px; height: 131px;">    src="http://blogs.sun.com/carolmcdonald/resource/grizzly.jpg"
style="width: 119px; height: 113px;">   
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.



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:

 style="color: rgb(0, 0, 0);">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">
   style="font-weight: bold; color: rgb(204, 0, 0);"> <property name="cometSupport" value="true"/>
</http-listener>
[prettify]</pre>
      </td>
    </tr>
  </tbody>
</table>
<br>
<strong>Enabling Bayeux in GlassFish</strong><br>
<p>to enable Bayeux on Glassfish, add the following to your Web
application web.xml :</p>
<table class="examplecode" border="1" cellpadding="2" cellspacing="0">
  <tbody>
    <tr class="bg-white">
      <td><b>Code Sample from:&nbsp; </b><code
 style="color: rgb(0, 102, 0); font-weight: bold;"><span
 style="color: rgb(0, 0, 0);">index.html</span>

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

[/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/

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:

 style="color: rgb(0, 0, 0);">index.html

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

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

       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):

 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 

 style="color: rgb(0, 0, 0);">

var room = {

 ...

      

 join: function(name){

   

   dojox.cometd.init(

);

   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 

 style="color: rgb(0, 0, 0);">index.html

<input id=" style="color: rgb(153, 0, 0);">previousB" class="button"
type="submit" name="previous" value="Previous Slide"/>  

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

       style="font-weight: bold;">

      

      

slideUrls

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

){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--;}

    }

  }

      

/chat/demo

  to the /chat/demo

 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});

    }

    ...

}

      

dojox.cometd.subscribe("/chat/demo", room,
"_chat") 

 style="font-weight: bold;">_chat 

_chat

"<img
src='" + slideUrl + "'/>" . 

 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 ="<img
src='" + slideUrl + "'/>";

    ...

}