Ajax Dojo Comet Tutorial

Markus Holzmann, an intern at Profactor of my fellow colleague Philipp Hartl, had the opportunity to experiment with Ajax during his job. He wrote a tutorial about how to push events from the server to the client. For example, display popup messages on all browsers at the same time (see screencast in full resolution here):





Read on how Markus did this:

Cometd Hello World

I’ve read Chris Bucchere’s Say Hello World to Comet and built an application based on this using a more current version of Jetty (version 6.1.5) which I embedded into a Tomcat v5.5 Server. For the developing I used Eclipse 3.2.

Start your Engines

At first you have to get the server running. As I mentioned I embedded Jetty into a Tomcat server. Therefore you have configure the libraries:

  1. Add the packages org.mortbay.cometd and dojox.cometd to your source folder and delete the client package in the org.mortbay.cometd package.
  2. Add jetty-util-6.1.5.jar, jetty-6.1.5.jar and servlet-api-2.5-6.1.5.jar to your build path.
  3. Copy the jetty-util-6.1.5.jar file into the /lib folder in the WEB-INF directory.

Replace the existing servlets in your web.xml - file in the WEB-INF - folder with the following servlets:

<servlet>
  <servlet-name>cometd</servlet-name>
  <servlet-class>org.mortbay.cometd.continuation.ContinuationCometdServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>cometd</servlet-name>
  <url-pattern>/cometd/*</url-pattern>
 </servlet-mapping>

For the project I used the dojo toolkit (version 0.4.3) which has an integrated COMETd class that makes it easy to build comet projects. Download it and add it to your WebContent folder.

When you’ve done all this, the hardest piece of work for this program is already done.

Hack the Code

Now you can implement the code for the client side: You need a HTML file with a button on it. The code for this looks like this (download):

<html>
  <head>
    <script type="text/javascript" src="../dojo.js"></script>
    <script type="text/javascript">
      dojo.require("dojo.io.cometd");

      cometd.init({}, "cometd");

      cometd.subscribe("/hello/world", false, "publishHandler");

      publishHandler = function(msg) {
        alert(msg.data.test);
      }
    </script>
  </head>
  <body>
    <input type="button"
       onclick="cometd.publish(’/hello/world’, { test: ‘hello world’ } )"
       value="Click Me!">
  </body>
</html>

Line by line, the above bold code works like this:

  1. In the line 
    <script type="text/javascript" src="../dojo.js"></script>

    you integrate the dojo toolkit into the project.

  2. To activate the cometd class of dojo: 
    dojo.require("dojo.io.cometd");
  3. Connect the server with the client: 
    cometd.init({}, "cometd");
  4. Here we say what to do when there is a subscribe event: 
    cometd.subscribe("/hello/world", false, "publishHandler");
  5. Last but not least, the publishHandler function serves as the callback function, which uses alert to show a simple message box: 
    publishHandler = function(msg) {
  alert(msg.data.test);
}

Give it a Try

When you load the HTML file now, you can click on the button and an alert box saying hello world will appear:

The reason for this is that when you click the code 

cometd.publish('/hello/world', { test: 'hello world' } )

is executed which publishes a text on the channel with the id /hello/world.

The funny thing is that this is able to run on any number of browsers. Everytime when a client clicks the button, on all browsers that view this page the alert box is shown. (See screencast above).

Pushing Data from Server to Client

You can also add serverside code to trigger an event. I wrote a JSP file with the following code:

<%@page import="java.util.*"%>
<%@page import="dojox.cometd.*" %>
<%
Bayeux b = (Bayeux)getServletContext().getAttribute(Bayeux.DOJOX_COMETD_BAYEUX);
Channel c = b.getChannel("/hello/world",false);

Map<String,Object> message = new HashMap<String,Object>();
message.put("test", "jsp: hello world");

c.publish(b.newClient("server_user",null),message, "new server message");
%>

When this page is loaded, an alert popup appears at the page saying jsp: hello world.

That’s it. Happy hacking!

Tags: , , , , ,
August 21st, 2007 | ajax, coding, java, programming, tutorial, videos