Building a simple chat application using Flex 3 and BlazeDS

This post contains the steps to build a simple chat client and server application using Flex 3 and BlazeDS. This will be a brief post, a detailed tutorial will be posted in subsequent posts.

1. Deploy the default BlazeDS war file

2. Modify “WEB-INF\flex\messaging-config.xml” to add “SimpleChatDestination”

<?xml version=”1.0″ encoding=”UTF-8″?>
<service id=”message-service”>

    <adapters>
        <adapter-definition id=”actionscript” default=”true” />
        <!– <adapter-definition id=”jms”/> –>
    </adapters>

    <default-channels>
        <channel ref=”my-polling-amf”/>
    </default-channels>
 
 <destination id=”SimpleChatDestination”>
  <properties>
   <network>
    <subscription-timeout-minutes>0</subscription-timeout-minutes>
   </network>
   <server>
    <message-time-to-live>0</message-time-to-live>
    <allow-subtopics>true</allow-subtopics>
    <subtopic-separator>.</subtopic-separator>
   </server>
  </properties>
  <channels>
   <channel ref=”my-polling-amf”/>
  </channels>
 </destination>

</service>

3. Create a new project in Flex Builder 3 and configure it to your BlazeDS deployment. You will need to enter the root folder of the WAR package (usually in “server/default/deploy”), Root URL and Context Root.

Configuring BlazeDS while creating project in Flex Builder 3
Configuring BlazeDS while creating project in Flex Builder 3

4. Create a simple chat client using MXML and ActionScript. Here’s an example:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml
 layout=”vertical”
 creationComplete=”consumer.subscribe()”>
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.messaging.messages.AsyncMessage;
   import mx.messaging.messages.IMessage;
   
   public function send():void {
                var message:IMessage = new AsyncMessage();
                message.destination = "SimpleChatDestination";
                message.body = "\n" + usernameInput.text + ":\t" + messageInput.text;
               
                trace(producer.connected);
                producer.send(message);
               
                messageInput.text = "";
   }
   
   public function messageHandler( message:IMessage ):void {
    textArea.text += message.body;
   }
  ]]>
 </mx:Script>
 
 <mx:Producer id=”producer” destination=”SimpleChatDestination”/>
 
 <mx:Consumer id=”consumer” destination=”SimpleChatDestination” message=”messageHandler(event.message)”/>
 
 <mx:TextArea id=”textArea” width=”400″ height=”300″/>
 
 <mx:HBox horizontalGap=”0″>
  <mx:TextInput id=”usernameInput” width=”80″/>
  <mx:TextInput id=”messageInput” width=”180″/>
  <mx:Button label=”Send” click=”send();”/>
 </mx:HBox>
 
</mx:Application>