Giant Flying Saucer

If you followed my recent tutorial on how to build a socket server for Flash CS3 using xSocket and Java, then you will be well prepared to go through this exercise to build an actual chat server in which Flash (or Flex) clients can connect and chat to each other.

This will be a simple socket server and things like validation for the most part I’m going to ignore to keep the code short and easy to follow. I’ll also be dropping the ActionScript into the timeline for the sake of speed and simplicity. Like the first socket server I built this one will be able to be to shut down remotely and obviously something like this on a production server would need to be protected rather than wide open as I’ll code it for now.

I used the following to build this:
1. Netbeans 6.1
2. Java JDK 1.6
3. xSocket 2.2 (core)
4. Flash CS3 (CS4 should work fine too, you can also use Flex if you wish – just be aware you will need to modify the Flash part to work with Flex instead)

At this point if you haven’t walked through the original tutorial on this topic, then please do that now. From here on I’ll assume the original project was working for you and you understood the concepts. To avoid confusion, I’m going to put this into a new project even though some of the code is exactly the same of whats in the original project code.

Open up Netbeans and create a new Java application project and call it “xSocketChatServer”. Go into the “xsocketchatserver” package and a class file called “xSocketDataHandler.java”. A “Main.java” file should already be in the project. Don’t forget to right-click on the “Libraries” and add the reference to the “xSocket-2.2.jar” file.

The code in Main.java is going to be exactly what it was in the original post:

package xsocketchatserver;

import org.xsocket.connection.*;

public class Main
{
    protected static IServer srv = null;

    public static void main(String[] args)
    {
        try
        {
            srv = new Server(8090, new xSocketDataHandler());
            srv.run();
        }
        catch(Exception ex)
        {
            System.out.println(ex.getMessage());
        }
    }

    protected static void shutdownServer()
    {
        try
        {
            srv.close();
        }
        catch(Exception ex)
        {
            System.out.println(ex.getMessage());
        }
    }
}

That requires no explanation since it is the same as the original code. Lets move onto the “xSocketDataHandler.java” file now.

The first thing you will notice is I’ve implemented the IDataHandler just like before, but I’ve now also implmented the IConnectHandler and IDisconnectHandler. Implementing those two new interfaces will allow us to to know when people connect or disconnect from the server.

public class xSocketDataHandler implements IDataHandler, IConnectHandler, IDisconnectHandler

Just below that code we have this:

private Set<INonBlockingConnection> sessions = Collections.synchronizedSet(new HashSet<INonBlockingConnection>());

Since we are going to have multiple people connected we are going to need a way to talk to all of them when someone sends a message. So when Client A sends a message or connects, we want to loop through all the open connections to send the notifications to Client B, Client C, etc.

Moving on we notice the onData method has changed quite a bit from the original.

public boolean onData(INonBlockingConnection nbc) throws IOException, BufferUnderflowException, ClosedChannelException, MaxReadSizeExceededException
{
    try
    {
        String data = nbc.readStringByDelimiter("\0");
        // Expected Message Format:
        // USERNAME~MESSAGE
        // ie: JohnDoe~Hello World

        if(data.trim().length() > 0)
        {
            System.out.println("Incoming data: " + data);

            if(data.equalsIgnoreCase("<policy-file-request/>"))
            {
                nbc.write("<cross-domain-policy><allow-access-from domain=\"*\" to-ports=\"8090\"/></cross-domain-policy>\0");
                return true;
            }

            String[] message = data.split("~");

            sendMessageToAll(message[0], message[1]);

            if(message[1].equalsIgnoreCase("SHUTDOWN"))
                Main.shutdownServer();
        }
    }
    catch(Exception ex)
    {
        System.out.println("onData: " + ex.getMessage());
    }

    return true;
}

You can see we expect a specific message format: USERNAME|MESSAGE

Ok, before we go any further, we need to remind ourselves the Flash part of this uses the XMLSocket class. We aren’t passing XML are we? The XMLSocket class does not force you to use XML, but you might want to depending on the complexity of your messages. For this simple project though it would be overkill.

Next we check to see if the Flash client is requesting a policy file, and if so, we need to pass one to it. In this case I pass a very open policy file. In a production system this would be set according to your preferences of how open you want it. Flash (and Flex) will always ask for the policy file in this format:

<policy-file-request/>

Once the policy file is taken care of, when the client sends a message we simply pull apart the incoming data and send it off to the method “sendMessageToAll” to be sent out to everyone connected. Also note that if I was to send the text “SHUTDOWN” from the Flash client the chat socket server would shutdown – as it stands anyone connected could do this. This is nice to have when testing and since I haven’t implemented the java.io.Closeable interface in this project we have no other choice right now other than to do a brute force kill. Keep in mind that xSocket does indeed work just fine with java.io.Closeable.

Lets look at “onConnect” and “onDisconnect”:

public boolean onConnect(INonBlockingConnection nbc) throws IOException, BufferUnderflowException, MaxReadSizeExceededException
{
    try
    {
        synchronized(sessions)
        {
            sessions.add(nbc);
        }

        System.out.println("onConnect");
    }
    catch(Exception ex)
    {
        System.out.println("onConnect: " + ex.getMessage());
    }

    return true;
}

Notice this is where our “sessions” variable comes to life. As clients connect we store their connections into the sessions variable, this way we will know how many people are connected, we can send messages to all of them, some of them, or only one of them as we so choose. For this project we always send the messages to everyone connected.

onDisconnect should then simply remove the “dead” connections:

public boolean onDisconnect(INonBlockingConnection nbc) throws IOException
{
    try
    {
        synchronized(sessions)
        {
            sessions.remove(nbc);
        }

        System.out.println("onDisconnect");
    }
    catch(Exception ex)
    {
        System.out.println("onDisconnect: " + ex.getMessage());
    }        

    return true;
}

Finally this takes us to the “sendMessageToAll” method:

private void sendMessageToAll(String user, String message)
{
    try
    {
        synchronized(sessions)
        {
            Iterator<INonBlockingConnection> iter = sessions.iterator();

            while(iter.hasNext())
            {
                INonBlockingConnection nbConn = (INonBlockingConnection) iter.next();

                if(nbConn.isOpen())
                    nbConn.write("<b>" + user + "</b>: " + message + "<br />\0");
            }
        }

        System.out.println("Outgoing data: " + user + ": " + message);
    }
    catch(Exception ex)
    {
        System.out.println("sendMessageToAll: " + ex.getMessage());
    }
}

Here we loop through our sessions variable checking to see if the current iterated session is still “open” and if so, we send the message that was passed in. In this case I do a little HTML formatting since we will be displaying the results in Flash’s TextArea control with the limited HTML rendering it can do.

So the final code then for xSocketDataHandler looks like this:

package xsocketchatserver;

import java.io.IOException;
import java.nio.BufferUnderflowException;
import java.nio.channels.ClosedChannelException;
import java.util.*;
import org.xsocket.*;
import org.xsocket.connection.*;

public class xSocketDataHandler implements IDataHandler, IConnectHandler, IDisconnectHandler
{
    private Set<INonBlockingConnection> sessions = Collections.synchronizedSet(new HashSet<INonBlockingConnection>());

    public boolean onData(INonBlockingConnection nbc) throws IOException, BufferUnderflowException, ClosedChannelException, MaxReadSizeExceededException
    {
        try
        {
            String data = nbc.readStringByDelimiter("\0");
            // Expected Message Format:
            // USERNAME~MESSAGE
            // ie: JohnDoe~Hello World

            if(data.trim().length() > 0)
            {
                System.out.println("Incoming data: " + data);

                if(data.equalsIgnoreCase("<policy-file-request/>"))
                {
                    nbc.write("<cross-domain-policy><allow-access-from domain=\"*\" to-ports=\"8090\"/></cross-domain-policy>\0");
                    return true;
                }

                String[] message = data.split("~");

                sendMessageToAll(message[0], message[1]);

                if(message[1].equalsIgnoreCase("SHUTDOWN"))
                    Main.shutdownServer();
            }
        }
        catch(Exception ex)
        {
            System.out.println("onData: " + ex.getMessage());
        }

        return true;
    }

    private void sendMessageToAll(String user, String message)
    {
        try
        {
            synchronized(sessions)
            {
                Iterator<INonBlockingConnection> iter = sessions.iterator();

                while(iter.hasNext())
                {
                    INonBlockingConnection nbConn = (INonBlockingConnection) iter.next();

                    if(nbConn.isOpen())
                        nbConn.write("<b>" + user + "</b>: " + message + "<br />\0");
                }
            }

            System.out.println("Outgoing data: " + user + ": " + message);
        }
        catch(Exception ex)
        {
            System.out.println("sendMessageToAll: " + ex.getMessage());
        }
    }

    public boolean onConnect(INonBlockingConnection nbc) throws IOException, BufferUnderflowException, MaxReadSizeExceededException
    {
        try
        {
            synchronized(sessions)
            {
                sessions.add(nbc);
            }

            System.out.println("onConnect");
        }
        catch(Exception ex)
        {
            System.out.println("onConnect: " + ex.getMessage());
        }

        return true;
    }

    public boolean onDisconnect(INonBlockingConnection nbc) throws IOException
    {
        try
        {
            synchronized(sessions)
            {
                sessions.remove(nbc);
            }

            System.out.println("onDisconnect");
        }
        catch(Exception ex)
        {
            System.out.println("onDisconnect: " + ex.getMessage());
        }        

        return true;
    }
}

Wasting no time we can move onto the Flash client. Open up the Flash IDE and create a new ActionScript 3 project and call it “xSocketChat.fla”. I’m not going to go over constructing the user interface, you can get that from the project files. I want to instead focus on the ActionScript part of this. Still, lets take a look first at what the chat UI actually looks like:

Very simple, and very ugly but more than enough to prove the chat server will work.

Here is the ActionScript:

errorIndicator_mc.visible = false;

var xmlSocket:XMLSocket = new XMLSocket();

xmlSocket.addEventListener(DataEvent.DATA, onIncomingData);
xmlSocket.addEventListener(Event.CONNECT , onConnected);
connect_btn.addEventListener(MouseEvent.CLICK, onConnectClicked);
send_btn.addEventListener(MouseEvent.CLICK, onSendClicked);

function onConnectClicked(evt:Event)
{
	errorIndicator_mc.visible = false;

	if(username_txt.text.length <= 0)
	{
		errorIndicator_mc.visible = true;
		return;
	}

	xmlSocket.connect("127.0.0.1", 8090);
}

function onConnected(evt:Event)
{
	connect_btn.enabled = false;
	xmlSocket.send(username_txt.text + "~has connected");
}

function onSendClicked(evt:Event)
{
	if(sendChat_txt.text.length > 0)
		xmlSocket.send(username_txt.text + "~" + sendChat_txt.text);

	sendChat_txt.text = "";
}

function onIncomingData(event:DataEvent):void
{
	incomingChat_txt.htmlText += event.data;
}

We use the same XMLSocket class we used in the first tutorial and then we add some event listeners. Two of which relate to the socket, one will listen for incoming data and the other will listen to see if we connect. There are several more listeners we could have used (like listening for an error), but we’ll stick with these to keep our motto of “simple” going. If the user doesn’t supply a username we prompt them to do so with a little pulsing red circle by the username textbox. Other than that I don’t do much other validation. When the user types in a user name and presses the connect button we connect them to the socket server with the address and port it’s listening on which in this case is the localhost address and port 8090.

When they type in some chat text below and hit the send button we send it off to the chat socket server which will turn around and send it back to everyone that is connected including us. This will trigger the “onIncomingData” where we grab the data and use the textarea’s “htmlText” property to display the data. We use htmlText since we know the server formatted it that way for us.

Start running the Netbeans project first and then run two or more of these Flash chat clients and see how it works.

Something to add now might be a “Disconnect” button. The XMLSocket class has a “close” method you can call.

So there it is, a simple multi-user chat server for your Flash/Flex clients. With a little work this can be turned into a full fledged chat or game server.

Here are the project files.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post

This entry was posted on Friday, October 24th, 2008 at 4:38 pm and is filed under ActionScript, Adobe, Flash, Flex, Socket Server. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.