Simple Chat 3: User based chat in FMS & Flex

Prerequisites:

• Intermediate/Advanced AS3 knowledge
• Flex 3
• Flash Media Server

Resources:

• View source files
• Download source files

This tutorial builds on the previous Simple Chat tutorials and concepts from the Adobe FMS Server-Side component architecture.

The main addition to the code has been the introduction of users.asc, which is responsible for handling all user related data and events (in much the same way as chat.asc handles all message related data/events). The user is now automatically assigned a username on connecting to the application, and other users are notified of their arrival and departure in a users list. Users have the option to change their username, and their username now appears above their messages in the message text area.

Hopefully by this point a lot of the code and concepts in this version are quite familiar from the previous tutorials, so I’m thinking if you just download this one and have a play with it, the new additions and their function should be fairly self explanatory.

I’ve added (what are hopefully) fairly lightweight comments to the code to hint at the purpose and the types of the more important functions, and have stripped it down to the bare necessities, so I reckon if you’ve done ok with the first two then you’ll probably get your head around this one in no time.

If you have any questions about this one though please feel free to leave me a comment and I’ll consider expanding this post to cover the topic.

Actually, here’s one bit of code that I do think’s worth mentioning. Notice how the sendMessage function in our example simply stores and passes a reference to the user object and the message string:

Chat.prototype.sendMessage = function( user, mesg )
{
    this.history.push( {user: user, mesg: mesg } );
    while ( this.history.length > this.histlen )
        this.history.shift();
    this.message_so.send( “onSendMessage”, user, mesg );
}

…this allows the Server-Side code to store the necessary data without making any assumptions about how your view wishes to present it. Presentation is instead handled by Flex in applicationComplete.as like this:

public function onSendMessage(user:Object, mesg:String):void
{
    messagesTf.text += user.username+” says:\n”+mesg+”\n\n”;
    messagesTf.validateNow();
    messagesTf.verticalScrollPosition    = messagesTf.maxVerticalScrollPosition;
}

If you want to add text formatting or extra wording to your messages, you should do so in the view code like this and keep your data clean, not like the Adobe component example below where they add all sorts of formatting to their message/client data on the Server-Side:

FCChat.prototype.sendMessage = function( client, mesg ) {

    var cglobal = this.getClientGlobalStorage(client);

    mesg = this.hiliteURLs(mesg);

    var hexColor = “#”+cglobal.usercolor.substring(2, cglobal.usercolor.length)

    mesg = “<font color=\”" + hexColor + “\”><b>” + cglobal.username + “: </b>” + mesg + “</font><br>\n”;
    this.history.push( mesg );
    while ( this.history.length > this.histlen )
        this.history.shift();

    this.message_so.send( “message”, mesg );
}

How nasty is that..?!