In this tutorial, we’ll be creating a simple peer-to-peer chat application using Mesmotronic Multiuser Server 2 and Flex 3 MXML.

We’re assuming that you already have at least a basic knowledge of MXML and ActionScript 3, that Mesmotronic Multiuser Server is installed locally and you have made the ActionScript API available to your chosen IDE. If you don’t already have an MXML editor, you can follow this tutorial using either FlashDevelop or the trial version of Flex Builder.

Regardless of which editor you’re using, the first step is to create a new Flex Project and open the main MXML file (usually called main.mxml, or similar).

First, create the various MXML elements of the application, starting by adding a new namespace declaration to the Application tag to allow you to instantiate classes from the Mesmotronic Multiuser Server API using MXML:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:client="com.multiuserserver.client.*">

Next, add a new MXML tag to instantiate the MultiuserServerClient class, setup the event listeners and assign a delegate:

<client:MultiuserServerClient
  id="client"
  delegate="{this}"
  connect="onConnect(event);"
  clientConnect="onClientConnect(event);"
  clientDisconnect="onClientDisconnect(event);"
  ioError="onIOError(event);"
  />

The delegate property indicates the class or object that contains functions you would like to make available to other clients and/or the server, in this case we’re making all of the public functions of the current class available.

The connect event is dispatched when you initially connect to the server, clientConnect when a new client joins the room (including you), clientDisconnect when a client leaves the room and ioError when a connection error occurs.

Next, create a Panel with a very simple form inside of it, made up of a large TextArea to display messages, a TextInput field to input messages and a button you can press to send messages which calls a function called showMessage on all of the clients in the current room using the run method of the MultiuserServerClient class:

<mx:Panel id="panel" title="Mesmotronic Multiuser Server Example" status="Connecting...">
  <mx:Form width="100%" defaultButton="{input_btn}">
    <mx:TextArea id="output_txt" width="400" height="160" editable="false" />
    <mx:TextInput id="input_txt" width="400" />
    <mx:Button id="input_btn" width="100" label="Send"
      click="client.run('showMessage', [client.info.clientIndex, input_txt.text]); input_txt.text = '';" />
  </mx:Form>
</mx:Panel>

The final MXML element is a creationComplete event in the Application tag. This will allow you to connect automatically once your Flex application has finished loading:

<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:client="com.multiuserserver.client.*"
  creationComplete="client.connect('localhost', 2040, 'FlexExample', 10);"
  >

Finally, we need to create the ActionScript functions necessary to handle the various MultiuserServerClient events:

<mx:Script>
  <![CDATA[
    import com.multiuserserver.events.MultiuserServerEvent;
    import flash.events.IOErrorEvent;

    public function onConnect(event:MultiuserServerEvent):void
    {
      panel.status = "Connected";
      output_txt.text += "Hi user "+client.info.clientIndex+", welcome to room "+client.info.room+"!\n";
    }

    public function onClientConnect(event:MultiuserServerEvent):void
    {
      if (event.clientIndex != client.info.clientIndex)
        output_txt.text += "User "+event.clientIndex+" has joined the room.\n";
    }

    public function onClientDisconnect(event:MultiuserServerEvent):void
    {
      output_txt.text += "User "+event.clientIndex+" has left the room.\n";
    }

    public function onIOError(event:IOErrorEvent):void
    {
      panel.status = "Unable to contact server";
      output_txt.text = "It was not possible to connect to the server, please ensure that Mesmotronic Multiuser Server 2 is running.";
    }

    public function showMessage(clientIndex:int, text:String):void
    {
      output_txt.text += "[User "+clientIndex+"] "+text+"\n";
      output_txt.validateNow();
      output_txt.verticalScrollPosition = output_txt.maxVerticalScrollPosition;
    }
  ]]>
</mx:Script>

As you can see, there’s nothing complicated involved: the ActionScript functions simply populate the TextArea and update the Panel’s status. If you prefer, much of this functionality can be included within your MXML declarations.

And that’s it. Now all you need to do is run your application and send yourself a few messages to try it out!

For more information about the events, properties and methods of the MultiuserServerClient class, take a look at the API reference or browse through the examples included with your Mesmotronic Multiuser Server installation, a link to which can be found on your Start Menu.