Ajax Dojo Comet Tutorial

Share

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:

<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="<b>cometd.publish('/hello/world', { test: 'hello world' } )</b>"
       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.

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!

Share
  • Pingback: Ajax Dojo Comet Beginner Tutorial « Lean Austria

  • http://www.redcode.nl/ Roy van Rijn

    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?

  • http://www.redcode.nl/ Roy van Rijn

    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.

  • http://martin.ankerl.com Martin Ankerl

    Im not so sure about offline clients. I think the next big thing will be something like Erlang, programming languages designed for concurrent development, e.g. when you use Erlang for a webserver it should not be such a problem to keep a very large number of connections open. The Apache vs. Yaws benchmark looks interesting: http://www.sics.se/~joe/apachevsyaws.html

  • Pingback: Dylan Schiemann » Blog Archive » cometd tutorial

  • http://www.jyog.com comet

    I am struggling with tomcat comet api, but im not able to do it…

  • tatlar

    I have installed Jetty and am trying to get this example to work. The cometd examples that ship with Jetty work fine (chat and echo), however, this application does not seem to work. I keep getting the 404 error that the following file does not exist.

    http://www.myserver.com:8080/cometd/examples/dojo/dojo/io/cometd.js

    Any ideas?

    Thx in advance.

  • benny

    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

  • http://martin.ankerl.com Martin Ankerl

    Hi tatlar & benny, sorry but I cannot help you here. This article was written by a student, not me, and he is not here any more :-(

  • Ethem Yuksel

    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…

  • http://www.bamdad.info Bamdad

    Hi,can we use PHP as comet server?

  • Koen Tielens

    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!

  • Gustavo

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

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

  • erkulas

    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.

  • Kalaiselvi

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

    Can anyone help please…

  • eli

    I also get this JS error with dojo “this.url.match is not a function”.

  • http://rupy.googlecode.com Marc

    I have developed a small non-blocking Java server which can handle this type of high socket concurrency and serve async responses!

    http://rupy.googlecode.com

    Check it out!

  • Pingback: iGeek » Comet: El Ajax inverso

  • Hale

    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

  • Maxime

    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

  • Pingback: Integration Patterns : ESME

  • Sally

    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

  • Pingback: Shared Tutorials » Blog Archive » Ajax Dojo Comet Tutorial

  • Pingback: ESME Mention in Keynote at “Open Source Meets Business” Conference : ESME

  • Pingback: Using Server Push (aka Reverse AJAX) « When IE meets SE…

  • Nick

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

  • Pingback: GeeCON 2010 – Review

  • http://pickatutorial.com Computer Programming Tutorials

    Good stuff on ajax dojo.

  • http://www.servletworld.com sudhir

    Where’s the source code for ContinuationCometdServlet ?

  • Mahesh

    Where’s the source code for ContinuationCometdServlet ?
    –>
    class file available in cometd-bayeux-6.1.8.jar

    try to download from http://www.jarfinder.com/index.php/jars/versionInfo/31327

    and also search @ url
    http://docs.codehaus.org/display/JETTY/Downloading+Jetty