BackSpaceStudios Blog

red5 chat revisited

As I continue to dig deeper into red5 I figured I would play around more with the chat demo…considering I need to build a complex communication tool for a client anyway….what better way to learn…

I’ve modified the code a little more by playing around with functionality, adding features like tool tips, user list, user icons, clearing the history, and a bit of skinning. I’m still trying to figure out how to add emo’s, sound, and user colour options.

I won’t go into all the code for the features I added, just the important chat stuff. I found a really great tool tip on google code you can grab it here, also a thank
you to Nick La of ndesign studios for the icons.

You can view the demo here.


We are still using the same connection method to red5

var nc:NetConnection = new NetConnection();
nc.connect("rtmp://localhost/oflaDemo");
var remote_so:SharedObject = SharedObject.getRemote("chat", nc.uri, false);
remote_so.connect(nc);

I have added a welcome screen that asks the user to enter a name. This way I can display a unique user list and easily add the user name to the output display. We create a var called username and datatype it as a string. We will build an array out of this later. The login window is inside an mc called login with the name field and submit button. When the submit buttton is clicked we will pass the name var to the user array and display it in the userlist. We will also add an icon to the name in the display list only.

var username:String;
Login.Name.setFocus();

function login():Void{
	ChatInput.setFocus();
	username = Login.Name.text;
	if (username == ""){username = "anonymous";}
	if (remote_so.data.users == undefined){
		remote_so.data.users = username;
	}else{
		remote_so.data.users += "," + username;
	}
	Login._visible = false;
}
Login.Submit.onRelease = login;

We will wrap all key events and messages into eventListers, it’s easier this way and it condenses the code.

keyListener = new Object();
keyListener.onKeyDown = function (){
if(Key.getAscii() == 13 && Login._visible == false){
sendMessage();
}else if(Key.getAscii() == 13){
login();
}
}

Key.addListener(keyListener);

Enter.onRelease = sendMessage;

function sendMessage(){
if (remote_so.data.chatText == undefined){
remote_so.data.chatText =  "" + username + ": " + ChatInput.text;
}else{

remote_so.data.chatText = "" + username + ": " + ChatInput.text;
}
ChatInput.text = "";
}

For the onSync function we call the list and pass the user names to an array and display them in the userlist. we will also pass the chatText to the output and set the scrollbar positions.

remote_so.onSync = function(list){
	if (remote_so.data.chatText != undefined){
		ChatOutput.text += remote_so.data.chatText;
		ChatOutput.vPosition = ChatOutput.maxVPosition;
	}
	var userArray:Array = remote_so.data.users.split(",");
	Userlist.dataProvider = userArray;
}

That’s all…not bad eh! For the skinning I just used some basic setStyles. I hope this helped.