Chat Application with Red5 and Flex

This blog post makes an attempt to guide you through how to create a simple chat application using Flex3 and Red5. The application supports both public and private chat rooms. Red5 server will stream real-time message data to other clients connected based on scope. The application allows users to send messages to all users who have the application connected to the same scope. The public chat option connects users to web application scope and private chat connects them to a room scope.

For sending text formatted chat messages, see blog post here.

The private chat works in the same way as the public chat, except that all the participants in the same room share a dedicated shared object on the server to which messages are written, and to which only they listen to.

The application does not represent a real world situation and allows users to chat with each other without having to login or signup. But it demonstrates how the Red5 server can be connected in both application and room level scopes.

Creating Server Application in Red5

At first, we’ll write some code in the backend Red5 server to handle the sending and receiving of messages to all chat clients connected. We’ll create a new Dynamic Web Project Red5Chat in eclipse to do this. Create a new class file in the src directory of the project and name it Application.java. The file Application.java extends MultiThreadedApplicationAdapter and acts as base class for the server side application. Add the following code to Application.java.

package com.mycompany.ind.red5;

import java.util.Iterator;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import org.red5.server.adapter.MultiThreadedApplicationAdapter;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;
import org.red5.server.api.Red5;
import org.red5.server.api.so.ISharedObject;

public class Application extends MultiThreadedApplicationAdapter
{
        @Override
	public boolean appStart(IScope app)
	{
		this.createSharedObject(app, "ApplTSO", false);
		return super.appStart(app);
	}
	@Override
	public boolean appConnect(IConnection conn, Object[] params)
	{
		return super.appConnect(conn, params);
	}
	@Override
	public boolean roomStart(IScope room)
	{
		this.createSharedObject(room, "RoomTSO", false);
		return super.roomStart(room);
	}
	@Override
	public boolean roomConnect(IConnection conn, Object[] roomUserInfo)
	{
		return super.roomConnect(conn, roomUserInfo);
	}
	@Override
	public void appDisconnect(IConnection conn)
	{
		super.appDisconnect(conn);
	}
	public void sendMessage( Map chatMessageInfoMap)
	{
		int keyId=0;
		ISharedObject chatMessageTSO = getSharedObject(Red5.getConnectionLocal().getScope(), "ApplTSO", false);
		Map chatMessageInfoMapTemp = new ConcurrentHashMap();
		if(chatMessageTSO.getAttribute("ChatMessageInfoMap") == null)
		{
			  keyId=0;
		}
		else
		{
			chatMessageInfoMapTemp = (Map)chatMessageTSO.getAttribute("ChatMessageInfoMap");
			keyId = chatMessageInfoMapTemp.size();
		}
		chatMessageInfoMapTemp.put(new Integer(keyId).toString(), chatMessageInfoMap);
		chatMessageTSO.setAttribute("ChatMessageInfoMap", chatMessageInfoMapTemp);
	}
	public void sendMessageToRoom( Map chatMessageInfoMap)
	{
		int keyId=0;
		ISharedObject chatMessageTSO = getSharedObject(Red5.getConnectionLocal().getScope(), "RoomTSO",
                false);
		Map chatMessageInfoMapTemp = new ConcurrentHashMap();
		if(chatMessageTSO.getAttribute("ChatMessageInfoMap") == null)
		{
			  keyId=0;
		}
		else
		{
			chatMessageInfoMapTemp = (Map)
                                                               chatMessageTSO.getAttribute("ChatMessageInfoMap");
			keyId = chatMessageInfoMapTemp.size();
		}
		chatMessageInfoMapTemp.put(new Integer(keyId).toString(), chatMessageInfoMap);
		chatMessageTSO.setAttribute("ChatMessageInfoMap", chatMessageInfoMapTemp);
	}
}

The method appStart is called during Red5 start up and within this method we create a non persistent server side shared object named ApplTSO which serves the purpose of broadcasting chat messages to clients connected to application scope. The roomStart method is called when the first client connects to room scope or when a room is created and this method creates another non persistent server side shared object RoomTSO which propagates chat messages to clients connected to room scope. Both shared objects has an attribute named ChatMessageInfoMap which keeps all chat messages as well as the names of users who sent those messages.

To send chat messages in application (public) scope, the client side code will be calling the method sendMessage. The parameter chatMessageInfoMap of this method will represent both chat text and name of the user who sent the chat message. This map is put as a new entry to the existing ChatMessageInfoMap attribute of shared object. The statement

chatMessageTSO.setAttribute("ChatMessageInfoMap", chatMessageInfoMapTemp);

fires a sync event on all clients in application scope who are subscribed to this remote shared object. In a similar way, chat messages to a room (private) scope, will be accepted by a method sendMessageToRoom and the execution of setAttribute statement dispatches sync events to all subscribed clients and they will be notified about the changed attribute.

Creating Client Application in Flex3

Create a new flex project FlexRed5Chat in Flex Builder 3. Edit application main file FlexRed5Chat.mxml by adding the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      [Bindable] private var privateChatSelected:Boolean = false;
      [Bindable] private var chatMessageInfoArrayCollection:ArrayCollection;
      [Bindable] private var userRoomStatus:String;
      [Bindable] private var sendButtonEnable:Boolean = false;
      private var ncApplScope:NetConnection;
      private var ncRoomScope:NetConnection;
      private var chatMessageTSO:SharedObject;
      private var chatMessageRoomTSO:SharedObject;
      private var currentRoom:String = "";
      private var currentRoomLabel:String = "";
      private function handlePublicChat(event:Event):void
      {
        privateChatSelected = false;
        userRoomStatus = "You are in public chat!"
        if(chatMessageInfoArrayCollection != null)
        {
          chatMessageInfoArrayCollection.removeAll();
        }
	currentRoom = "";
	currentRoomLabel == "";
	if(ncRoomScope != null)
	{
	  //ncRoomScope.close();
	  //ncRoomScope = null;
	}
	ncApplScope = new NetConnection();
	ncApplScope.objectEncoding = ObjectEncoding.AMF0;
	ncApplScope.addEventListener(NetStatusEvent.NET_STATUS, onNetApplStatus);				
	ncApplScope.connect("rtmp://localhost:1935/Red5Chat");
      }
      private function onNetApplStatus(event:NetStatusEvent):void
      {
        switch(event.info.code) 
	{
	  case "NetConnection.Connect.Success" :
	    sendButtonEnable = true;
	    ncApplScope.client = this;
	    chatMessageTSO = SharedObject.getRemote("ApplTSO", ncApplScope.uri, false);
	    chatMessageTSO.addEventListener(SyncEvent.SYNC, doOnApplTSOSync);
	    chatMessageTSO.connect(ncApplScope);
	    break;
	  case "NetConnection.Connect.Failed" :
	    ncApplScope = null;
	    Alert.show("Could not connect to server.");
	    break;
	  case "NetConnection.Connect.Closed" :
	    break;
	  case "NetConnection.Connect.InvalidApp" :
	    ncApplScope = null;
	    Alert.show("An error occured.");
	    break;
	  case "NetConnection.Connect.AppShutDown" :	
	    break;
	  case "NetConnection.Connect.Rejected" :
	    break;
	  default:
	    break;
        }
      }
      private function doOnApplTSOSync(event:SyncEvent):void
      {
	var data:Object;
	var item:Object;
	data = chatMessageTSO.data;
	for(item in data)
	{
	  if(item == "ChatMessageInfoMap")
	  {
	    var chatMessageInfoMapDataItem:Object = data[item];
	    var chatMessageInfoArrayTemp:Array = new Array();
	    for(var chatMessageInfoMapItem:String in chatMessageInfoMapDataItem)
	    {
	      chatMessageInfoArrayTemp.push({userMessage :                   
              chatMessageInfoMapDataItem[chatMessageInfoMapItem]["userName"] + ": " +
              chatMessageInfoMapDataItem[chatMessageInfoMapItem]["message"]});
	    }
	    chatMessageInfoArrayCollection = new ArrayCollection(chatMessageInfoArrayTemp.reverse());
	  }
	}
      }
      private function handlePrivateChat(event:Event):void
      {
        if(currentRoom == "")
	{
	  userRoomStatus = "You are in private chat. Double click on a room to enter!";
	}
	else
	{
	  userRoomStatus = "You are in private chat room - " + currentRoom + "!";
	}
	privateChatSelected = true;
      }
      private function changeEvt(event:Event):void 
      {
        if(chatMessageInfoArrayCollection != null)
	{
	  chatMessageInfoArrayCollection.removeAll();
	}
	if(ncApplScope != null)
        {
          //ncApplScope.close();
          //ncApplScope = null;
        }
        if(ncRoomScope != null)
        {
           if(currentRoom != event.currentTarget.selectedItem.label)
           {
             //ncRoomScope.close();
             //ncRoomScope = null;
           }
        }
        userRoomStatus = "You are in private chat room - " + event.currentTarget.selectedItem.label + "!";
        currentRoomLabel = event.currentTarget.selectedItem.label;
        ncRoomScope = new NetConnection();
	ncRoomScope.objectEncoding = ObjectEncoding.AMF0;
	ncRoomScope.addEventListener(NetStatusEvent.NET_STATUS, onNetRoomStatus);	
	var chatMessageInfo:Object = {userName:userNameTxt.text};			
	ncRoomScope.connect("rtmp://localhost:1935/Red5Chat" + "/" + event.currentTarget.selectedItem.label, 
        chatMessageInfo);
      }
      private function onNetRoomStatus(event:NetStatusEvent):void
      {
        switch(event.info.code) 
	{
	  case "NetConnection.Connect.Success" :
	    currentRoom = currentRoomLabel;
	    ncRoomScope.client = this;
	    chatMessageRoomTSO = SharedObject.getRemote("RoomTSO", ncRoomScope.uri, false);
	    chatMessageRoomTSO.addEventListener(SyncEvent.SYNC, doOnRoomTSOSync);
	    chatMessageRoomTSO.connect(ncRoomScope);
	    break;
	  case "NetConnection.Connect.Failed" :
	    ncRoomScope = null;
	    Alert.show("Could not connect to room.");
	    break;
	  case "NetConnection.Connect.Closed" :
	    break;
	  case "NetConnection.Connect.InvalidApp" :
	    ncRoomScope = null;
	    Alert.show("An error occured.");
	    break;
	  case "NetConnection.Connect.AppShutDown" :	
	    break;
	  case "NetConnection.Connect.Rejected" :
	    break;
	  default:
	    break;
        }
      }
      private function doOnRoomTSOSync(event:SyncEvent):void
      {
	var data:Object;
	var item:Object;
	data = chatMessageRoomTSO.data;
	for(item in data)
	{
	  if(item == "ChatMessageInfoMap")
	  {
	    var chatMessageInfoMapDataItem:Object = data[item];
	    var chatMessageInfoArrayTemp:Array = new Array();
	    for(var chatMessageInfoMapItem:String in chatMessageInfoMapDataItem)
	    {
	      chatMessageInfoArrayTemp.push({userMessage :  
              chatMessageInfoMapDataItem[chatMessageInfoMapItem]["userName"] + ": " +
              chatMessageInfoMapDataItem[chatMessageInfoMapItem]["message"]});
	    }
	    chatMessageInfoArrayCollection = new ArrayCollection(chatMessageInfoArrayTemp.reverse());
	  }
	}
      }
      private function sendMessage():void
      {
        if(userNameTxt.text == "")
        {
          Alert.show("Please Enter name of user!");
          return;	
        }
        if(chatTxt.text == "")
        {
          Alert.show("Please Enter a message to send!");
          return;	
        }
        var chatMessageInfo:Object = {userName:userNameTxt.text, message:chatTxt.text};
        if(privateChatSelected == false)
        {
          if(ncApplScope == null)
	  {
	    Alert.show("Please select a chat mode!");
	    return;	
	  }
	  else
	  {
	     chatTxt.text = "";
             ncApplScope.call("sendMessage", new Responder(onResult, onStatus), chatMessageInfo);
          }
        }
        if(privateChatSelected == true)
        {
          if(ncRoomScope == null)
	  {
	    Alert.show("Please enter a room!");
	    return;	
          }
	  else
	  {
            chatTxt.text = "";
            ncRoomScope.call("sendMessageToRoom", new Responder(onResult, onStatus), chatMessageInfo);
         }
       }
     }
     private function onStatus(event:NetStatusEvent):void
     {	}
     private function onResult(obj:Object):void 
     { }
     private function onCRPress(e:KeyboardEvent):void 
     {				
       if (e.keyCode != Keyboard.ENTER)
       { 
         return;
       }	
       if (e.type == KeyboardEvent.KEY_DOWN) 
       {					
         sendMessage();					
       }
     }
  ]]>
  </mx:Script>
  <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" borderStyle="outset">
    <mx:VBox width="50%" height="70%" >
      <mx:HBox width="100%" height="5%" horizontalAlign="center" verticalAlign="middle" borderColor="#FFFFFF"   
      borderStyle="inset">
        <mx:Label text="User Name" />
	<mx:TextInput id="userNameTxt" />
      </mx:HBox>
    <mx:HBox width="100%" height="90%" horizontalAlign="center" verticalAlign="middle" borderStyle="none" 
    borderColor="#FFFFFF">
    <mx:VBox width="5%" height="100%" borderStyle="outset" borderColor="#FFFFFF">
      <mx:RadioButton groupName="chatType" id="publicChatType" label="Public Chat" width="150" 
      click="handlePublicChat(event);"/>
      <mx:RadioButton groupName="chatType" id="privateChatType" label="Private Chat" width="150" 
      click="handlePrivateChat(event);"/>
      <mx:List width="200" height="200" change="changeEvt(event)" enabled="{privateChatSelected}"> 
        <mx:Object label="Room1" data="Room1"/>
	<mx:Object label="Room2" data="Room2"/>
        <mx:Object label="Room3" data="Room3"/>
	<mx:Object label="Room4" data="Room4"/>
	<mx:Object label="Room5" data="Room5"/>
	<mx:Object label="Room6" data="Room6"/>
	<mx:Object label="Room7" data="Room7"/>
	<mx:Object label="Room8" data="Room8"/>
	<mx:Object label="Room9" data="Room9"/>
      </mx:List>
    </mx:VBox>
    <mx:VBox width="95%" height="100%" borderStyle="inset" borderColor="#FFFFFF">				
      <mx:HBox width="100%" height="5%" horizontalAlign="center">
        <mx:Label text="{userRoomStatus}"  color="#A22252" fontWeight="bold" />
      </mx:HBox>
      <mx:HBox width="100%" height="5%" >
        <mx:TextInput id="chatTxt"  width="100%" height="100%" keyDown="onCRPress(event)">
        </mx:TextInput>
	<mx:Button id="sendBtn" label="Send" click="sendMessage()" enabled="{sendButtonEnable}"/>
      </mx:HBox>
      <mx:HBox width="100%" height="90%" >
        <mx:DataGrid id="chatTxtOutput" width="100%" height="100%" textAlign="center" 
        showHeaders="false" dataProvider="{chatMessageInfoArrayCollection}">
          <mx:columns>
            <mx:DataGridColumn textAlign="left" dataField="userMessage"/>
          </mx:columns>
        </mx:DataGrid>
      </mx:HBox>
    </mx:VBox>
  </mx:HBox>
      <mx:HBox width="100%" height="5%" horizontalAlign="center" verticalAlign="middle" borderStyle="inset"     
      borderColor="#FFFFFF">
       <mx:Label text="Double click on a Room to enter the room" />
     </mx:HBox>
   </mx:VBox>  
  </mx:HBox>  
</mx:Application>

A click on radio button labeled “Public Chat” connects to Red5 server side application Red5Chat in web application scope. After the connection is established, the client subscribes to server side shared object ApplTSO in application scope so that any changes made to the attributes of this shared object will be synched to all clients connected to the same scope. By this, whenever a change occurs to the application scope shared object ApplTSO, the method doOnApplTSOSync will be called and the data grid control will be updated with new messages. When a user sends a message, the client application forwards both message and user name to the server side application through method sendMessage. The sendMessage calls the server side sendMessage and server side method code writes them to the attribute ChatMessageInfoMap of remote shared object ApplTSO.

In the same way, after a successful connection to room, the client subscribes to the non persistent shared object RoomTSO in that room scope. The chat messages are sent by invoking a method sendMessageToRoom on the server side which updates the room scope shared object RoomTSO and notifies the change to all clients in that scope.

Resources
Download Red5 application source
Download Flex application source

Related Links
http://osflash.org/red5
http://www.adobe.com/products/flex/
http://trac.red5.org/wiki/Red5Plugin

About these ads