Ajax Dojo Comet Tutorial

EDIT: This tutorial is for an old version of dojo / comet, and it will not work in a recent version!

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:

[xml]<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>
[/xml]
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):
[code lang="js"]<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="<b>cometd.publish('/hello/world', { test: 'hello world' } )</b>"
value="Click Me!">
</body>
</html>[/code]
Line by line, the above bold code works like this:

  1. In the line [xml]<script type="text/javascript" src="../dojo.js"></script>[/xml] you integrate the dojo toolkit into the project.
  2. To activate the cometd class of dojo: [javascript]dojo.require("dojo.io.cometd");[/javascript]
  3. Connect the server with the client: [javascript]cometd.init({}, "cometd");[/javascript]
  4. Here we say what to do when there is a subscribe event: [javascript]cometd.subscribe("/hello/world", false, "publishHandler");[/javascript]
  5. Last but not least, the publishHandler function serves as the callback function, which uses alert to show a simple message box: [javascript]publishHandler = function(msg) {
    alert(msg.data.test);
    }[/javascript]

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 [javascript]cometd.publish(‘/hello/world’, { test: ‘hello world’ } )[/javascript] 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:
[code lang="xml"]<%@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");
%>[/code]

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

Remember pushing too much data from server to client can slow the performance of your site specially is you have a huge amount of traffic. Getting one of the best wordpress hosting will solve this kind of problem.

That’s it. Happy hacking!

30 thoughts on “Ajax Dojo Comet Tutorial”

  1. Very nice, I think Comet-type applications really have a lot of potential. I’ve heard the G-Talk application inside Gmail.com uses a Comet-connection for messaging, works like charm.

    The problem is getting the webservers to adopt the idea. We really need to get a standard way of doing open-connections. Time for JEE6?

  2. The only problem with Comet is that you keep the connections open for a elanged time. This could cause serious problems with performance when you have multible users. Keeping the connections open also has downsides caching etc on the browser of the end-user.

    The real next big thing ™ will probably be offline-clients, something like Web Start or Adobe Apollo.

  3. Hi Martin,
    I have some problems to config this project:
    How did you embedded the jetty into the tomcat?
    “Add the packages org.mortbay.cometd” , what is the full path of ‘ org.mortbay.cometd’.
    thanks benny

  4. I have successfully installed the stuff into my workspace and run it.But when i debug it, i realized that a server request has been sent by the waiting clients after receiving message.What is the difference between asynchronous polling and comet in that case?Nothing should be sent to the server after first subscribing.
    Regards…

  5. How to run Jetty under Tomcat?

    Take the jetty-6.1.7\webapps\cometd.war file and drop it in the Tomcat 6 Webapps directory -> The web.xml file under WEB-INF gives a lot of info.

    This just works!

  6. I configured my workspace and made that the Client side run fine.

    But i couln’t make that server side code run. Some idea?

  7. I played with this a little bit. Have’nt got it working fully yet but … .

    benny – org.mortbay.cometd can be found in jetty source distribution in a folder “./jetty-6.1.9_src/contrib/cometd/bayeux/src/main/java/org/mortbay/…” and in “./jetty-6.1.9_src/contrib/cometd/api/src/main/java/dojox/cometd”

    tatlar – this tutorial uses old dojo release. In current realease (1.1) cometd is in different location. Hence the code is a bit different:
    —————————————–
    dojo.require(“dojox.cometd”);
    dojox.cometd.init({}, “cometd”);
    dojox.cometd.subscribe(“/hello/world”, false, “publishHandler”);
    —————————————–

    Now I have next JS error with dojo “this.url.match is not a function. dojo.js (line 136)” . If anybody has a clue about this I would appreciate it.

  8. My client side is running successfully but i can’t make my server side code run.

    Can anyone help please…

  9. Hello, I try to realize this example, but it doesn’t work. Nothing happens when I click on the Button. I put an alert into the code after ” cometd.init({}, “cometd”); ” and it isn’t shown on the screen. What means “cometd” inside the breakets. And concerning the code in the web.xml:

    org.mortbay.cometd.continuation.ContinuationCometdServlet

    is it a path to the ContinuationCometdServlet or what do I have to write. Hope anyone can help me… Thank’s

  10. Hello,

    For my internship, I have to work on a comet implementation (started by a former student) that uses the cometd API and a tomcat server (with the Tapestry framework). What has been done until now works pretty fine : the long polling request enables the server to send back a response to the client when it wishes.

    However I noticed the following : during the long polling, if the client makes requests to the server, they will use other sockets than the one opened for the long polling. In short, it builds up another connection per new request.
    Another thing, when the server pushes data back to the client, it uses the response to the long polling request. That may be the correct way for it to work, but it implies that the maintained connection ends (since a response is sent back) and that the client has to start again a new long polling request.All this causes the corresponding sockets to close and to open again.

    So my question is the following …. well, there are two actually :
    - Can the client use the connection built for the long polling in order to sent data to the server, instead of having to build a new temporary connection just for that new request ?
    - Can the server send back data without closing the connection ?

    I spent some time analysing packets with wireshark but i’m quite new to comet so I’m sorry if my questions appear obvious, or completely dumb.
    I thank anyone that could give me some information on this.

    Thank you.
    Maxime – France

  11. Hi, I’m trying to get this example to work, and I’m having trouble. I have successfully installed tomcat and jetty, but I’m not sure which WEB-INF to put the jar file into and which web.xml file to modify – there are about 20 different WEB-INF locations and about 7 different web.xml files on my computer. I got dojo up and running, but without the comet enabled server, when I click on the click me button, nothing happens.

    Thanks,
    Sally

  12. I know this is an old thread, but I found this via google and it led me into a few hours of frustration, so I thought I’d post an update.

    I’ve posted at http://www.dojotoolkit.org/forum/dojox-dojox/dojox-support/hello-world-cometd#comment-22834 with why the url.match function generates an error, and roughly how to fix it. This tutorial is for an _old_ version of dojo and _will not work_ as it stands with today’s release.

    Sally: your wep application project should only have one WEB-INF folder. If you don’t know which WEB-INF folder you should put resources into, perhaps you should return to basic J2EE tutorials for your platform of choice? I’m using Eclipse and Glassfish, and my GlassfishTest project in Eclipse has a GlassfishTest/WebContent/WEB-INF folder, in which there is a ‘lib’ folder, in which I put my cometd-api, cometd-bayeaux, jetty-util and so on jar files. (the jetty one seems necessary for a reason I’ve yet to fully figure out, it seems out of place as I’m not deploying to Jetty!)

    Other than the use of an obsolete dojo api, a very useful tutorial :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>