Benfante: Building an AJAX chat with Parancoe and DWR

The AJAX integration through DWR 3 is not the main feature in Parancoe, but it's easy and funny. Let's see how simple is building a Web chat.

Starting from a project generated with Maven using the Parancoe Web Archetype, you need to add the Parancoe DWR Plugin to the dependencies in your pom.xml:


<dependency>
   <groupId>org.parancoe</groupId>
   <artifactId>parancoe-plugin-dwr</artifactId>
   <version>2.0.2</version>
</dependency>

Then add the /dwr/* pattern to the mapping of the parancoe servlet in your web.xml.

Now DWR is ready to be used in your application. You check it building and deploying your application, and pointing your browser to <your_base_address>/dwr/index.html. You should see the DWR Test Page.

Then add a class with methods (a single method in this example) that will be invoked through AJAX:


package com.mycompany.testapp.ajax;

import org.directwebremoting.Browser;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.ui.dwr.Util;
import org.springframework.stereotype.Component;

@Component
@RemoteProxy(name = "chat")
public class Chat {

   @RemoteMethod
   public void send(final String nickname, final String message) {
       Browser.withCurrentPage(new Runnable() {
           public void run() {
               Util.addRows("chatLog", new String[][]{{nickname, message}});
           }
       });
   }
}

Simple, isn't it? ...but powerful. When invoked that method will add a row to the table with id chatLog, in all browsers that are visualizing that page.

Let's see the page chat.jsp in which that method is invoked:


<%@ include file="WEB-INF/jsp/common.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
   <head>
       <%@ include file="WEB-INF/jsp/head.jspf" %>
       <script src="${cp}/dwr/interface/chat.js" type="text/javascript"/>
       <script src="${cp}/dwr/engine.js" type="text/javascript" />
       <script src="${cp}/dwr/util.js" type="text/javascript" />
       <title>Parancoe DWR chat</title>
   </head>
   <body>
       <h1>DWR Chat</h1>
      
       <table id="chatLog">
           <thead>
               <tr><th>Nickname</th><th>Message</th></tr>
           </thead>
           <tbody> </tbody>
       </table>
      
       <form id="chatForm" method="post" action="/sendMessage">
           Nickname: <input id="nickname" type="text" /><br/>
           Say: <input id="say" type="text" /><br/>
           <input type="submit">
       </form>
              
       <script type="text/javascript">
           function bindUI() {
               $('chatForm').observe('submit', chatSubmit);
           }
  
           function chatSubmit(event) {
               event.stop();
               chat.send($F('nickname'), $F('say'));
           }
  
           dwr.engine.setActiveReverseAjax(true);
           document.observe('dom:loaded', bindUI);
       </script>
   </body>
</html>

In your parancoe-servlet.xml file add the following configuration for enabling the active reverse AJAX in DWR:

Build and deploy your application. Open multiple windows of your browser(s) to <your_base_address>/chat.jsp, and start chatting:

Have fun with Parancoe!

Benfante

Thursday, November 13, 2008

Building an AJAX chat with Parancoe and DWR

No comments:

My shared items

Blog Archive