Getting started with Mesmotronic Multiuser Server using Flex

Mesmotronic Multiuser Server 2
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=""

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


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="'showMessage', [, input_txt.text]); input_txt.text = '';" />

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:

  creationComplete="client.connect('localhost', 2040, 'FlexExample', 10);"

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


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

    public function onClientConnect(event:MultiuserServerEvent):void
      if (event.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.verticalScrollPosition = output_txt.maxVerticalScrollPosition;

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.

Getting started with Mesmotronic Multiuser Server using ActionScript 3

We believe that Mesmotronic Multiuser Server 2 is the quickest, easiest way to create real-time multiuser and with the Adobe Flash Platform, including Adobe Flash, Flex and AIR, and if you haven’t already installed Mesmotronic Multiuser Server, you can download the latest version here.

This tutorial shows how to create a basic peer-to-peer application to track other users’ mouse positions using Mesmotronic Multiuser Server 2 and ActionScript 3 (AS3), so it’ll work regardless of whether you’re using Flash, FlashDevelop or Flex Builder. We’ll take a look at Flex/MXML and client-server applications at a later date.

We’re assuming at this point that you’ve already installed Mesmotronic Multiuser Server 2, made the ActionScript API available to your chosen IDE and have a reasonable understanding of AS3.

The first thing you need to do is create a new document class which extends flash.display.Sprite, let’s call it Main, and import the classes you’ll need to use the Mesmotronic Multiuser Server API:

import com.multiuserserver.client.MultiuserServerClient;

Next, declare an instance of the MultiuserServerClient class. Once instantiated, this will handle all of the communication with the other clients:

public var client:MultiuserServerClient;

You’re now ready to set up your connection by instantiating the MultiuserServerClient class and configure your connection. For this example, we’ll do everything in the class constructor, but the chances are you’ll want to do things like connect via a button in your own multiuser applications:

public function Main()
    client = new MultiuserServerClient();
    client.addEventListener(MultiuserServerEvent.CONNECT, onConnect);
    client.addEventListener(MultiuserServerEvent.CLIENT_DISCONNECT, onClientDisconnect);
    client.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
    client.delegate = this;
    client.connect("localhost", 2040, "AS3Tutorial", 10);

The events we’re using are pretty self-explanatory: CONNECT is dispatched when you initially connect to the server, CLIENT_DISCONNECT when a client disconnects and IO_ERROR if there’s a problem with your connection.

The delegate property indicates where the functions you’d like to make available to other clients and/or the server live. In this case, we’re setting it to the current class.

The connect method has 4 required parameters: server name (or IP address), server port (2040 is the default), application name (this must be unique for each application you create) and the maximum number of clients that can be in each room at any give time.

In this example, we’re assuming that you’ll just want to test locally, but if you’d like to test over a network, simply change localhost to the name or IP address of the computer running Mesmotronic Multiuser Server.

Everything you need to connect to Mesmotronic Multiuser Server is now in place, so now we need to create the properties and methods to actually make something happen once you’re connected.

First, we import a the MouseEvent class:


Then we create the properties and methods we need to bring the application to life:

public var cursors:Array = [];

// Announce the connection and start to broadcast your cursor position
public function onConnect(event:MultiuserServerEvent):void
    trace("You've connected to Mesmotronic Multiuser Server!");
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

// Remove the blobs when clients leave
public function onClientDisconnect(event:MultiuserServerEvent):void
    var cursor:Sprite = cursors[event.clientIndex] as Sprite;
    cursors[event.clientIndex] = null;

public function onIOError(event:IOErrorEvent):void
    trace("Connection Error: is Mesmotronic Multiuser Server installed and running?");

// Broadcast your mouse position
public function onMouseMove(event:MouseEvent):void
    // The run method is used to call a function on 1 or more clients"setCursorPosition", [, mouseX, mouseY]);

// This is the function that clients call to let you know where their mouse cursor is
public function setCursorPosition(clientIndex:uint, cursorX:Number, cursorY:Number):void
    var cursor:Sprite;

    // Create a coloured blob to represent the client's cursor if it doesn't exist
    if (!cursors[clientIndex])
        cursor = new Sprite();*clientIndex);,0,10);

        cursors[clientIndex] = addChild(cursor);

    cursor = cursors[clientIndex] as Sprite;
    cursor.x = cursorX;
    cursor.y = cursorY;

That’s it! Just publish the class in the normal way, open up a few copies of the SWF and watch in amazement as the blobs follow your cursor around the screen. It really is that easy.

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.

Make it Mesmotronic