Developing a portlet that shows real-time data using Comet (or Reverse Ajax)

In this post, I'll talk about the Book Catalog portlet example from Chapter 12 of Portlets in Action book that shows how you can create a portlet that shows real-time data.

You can download the source code for this example from here: http://code.google.com/p/portletsinaction/downloads/list.The name of the project is ch12_ResourceServing.

To know how to deploy the example, refer to the sample chapter 1 of Portlets in Action, which you can download for FREE from here: http://manning.com/sarin/

The following figures shows how the Book Catalog example portlet looks like:

Figure 1: The Book Catalog portlet uses a tabbed pane to divide up content in the user interface.
If a new book is added or removed from the catalog, a notification is displayed to the user.

Figure 2: Form for uploading a book’s TOC file. This form is displayed when the user clicks on the Upload link for a book

Figure 3: Form for adding a new book to the catalog. The form is displayed when the user selects
the Add Book tab or clicks the Add Book link shown on the catalog page (see figure 12.5).


The libraries used for developing the above example are: Dojo Toolkit, jQuery and DWR (Direct Web Remoting). The message 'Book Catalog data has been modified. Refresh' (refer figure 1) is displayed when other users of the Book Catalog portlet remove or add a new book to the catalog. This message is displayed using Comet (or Reverse Ajax) support available in DWR. When you use Comet, data is pushed by the server to the web browser. In polling, data is pulled at regular intervals from the server.