red5 chat demo

April 27th, 2008 Posted in red5

Recently I have started playing around red5. I need to build a complex communication tool for one of my commercial projects. I can’t go into all the details, but this tool will allow people to chat with each other without having to log into or sign up for any service. It functions as a basic way for users to engage each other while they navigate the site. I won’t go into the installation of red5 right now. There are some really good tutorials here that can help walk you through it. It’s a little tricky, but once you get the hang of it’s a lot easier that you think.

In terms of testing red5 locally you can download and run a one click setup that will install a localhost, all the necessary com/org files, and a bunch of other goodies. You can find it here http://osflash.org/red5/070final.

This is one of my first attempts at building a simple red5 chat tool. I started with the sample chat source that comes bundled with red5 and I made a few adjustments to the code. In this sample I have not built any custom java files, I am using the SharedObject from the oflaDemo (which you can find in the src directory of your red5 install). There is a bit of a learning curve, red5 consist of more than just AS, as I have just recently discovered. I have started upgrading my java skills in order to start customizing and developing more powerful red5 apps. To all Flash developers out there, “don’t be afraid, it’s a lot easier than you think!”.

Ok, enough rambling, let’s get to the code…

[ JUST ADDED AN UPDATED VERSION WITH NEW FEATURES. VIEW HERE. ]

You can view the demo here.

We will start by importing some basic flash utils and setting the initial variables to make a netConnection to our SharedObject and connect to our red5 server. We will the create a ShareObject to connect to. Then we will setup our onSync events to handle the messages we will be sending. Finally we will setup 2 basic EventListerners for click and key events.

import mx.utils.Delegate;// create basic netConnection object

var nc:NetConnection = new NetConnection();

// connect to the local Red5 server

nc.connect("rtmp://localhost");

// create StoredObject

var so:SharedObject = SharedObject.getRemote("chat", nc.uri, false);

// setup the onSync events.  We need to know when someone has added something to the chat

so.onSync = Delegate.create(this, newMessageHandler);

// connect to the SO using the netConnection reference

so.connect(nc);

// listen for the send button clicks

send.addEventListener("click", Delegate.create(this, sendMessage));

// add a listener for key events

Key.addListener(this);

Next we will set up our sendMessage function which will pass both the user name and message to the chat output display. We will also setup the key event as well so the user can press enter or click on the mouse.

function sendMessage():Void

{

 remote_so.data.chatMessage =  + userName.text +  - message.text;	message.text = "";

}

function onKeyUp():Void

{

 if(Key.getCode() == 13 && message.length > 0)

 {

 	sendMessage();

 }

}

The last function we will build is our newMessageHandler which essentially display all user output in a text area.

function newMessageHandler(evtObj:Object):Void

{	var newChat:String = remote_so.data.chatMessage;

if(newChat == null) return;

chatOutput.text += newChat + "\n";

chatOutput.vPosition = chatOutput.maxVPosition;

}

It’s that easy! Playing around with the code and some fun….please feel free to reply to this post with examples and variations on this project.