The other day I was working on a project and someone came to and asked a question that I don't think about too often. They asked me "can this page be updated as soon as anyone makes a change to it". Essentially they were asking for what everyone wants in the web world, real time updates. But is that possible. In a simple HTML + Javascript world this really isn't possible. Sure we have AJAX that gives us asynchronous pages and the ability to poll a back end for changes. But how do we have our page sit and listen for responses and be updated as soon as they occur. The answer was Macromedia Flash. I do realize that many are opposed to the idea of having third party dependencies on their website but this little functionality just might make it worth it.

So how was it done? Well Flash has available within it's vast library of classes a simple class called: XMLSocket. If you have ever worked with sockets before it will be very straightforward. The only difference is that the messages sent and received must be in XmlFormat. I think I remember once seeing a way to send regular string messages but I will have to look around again if anyone wants to know about that. Below is a sample of the code that I used inside the flash move for the socket: (by the way I looked at many samples before I compiled my own but if part of this code was take from a sample someone did out there let me know and I will be happy to give credit where credit is due)

import com.macromedia.javascript.JavaScriptProxy;

var _proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
var _js_client_object_name = _root.JSClientName;

//Possible Values: 0=NotConnected / 1=Connected / 2=ClientDisconnected / 3=ServerDisconnected
var _on_status_changed:String = _js_client_object_name + "." + _root.OnStatusChanged;
var _on_message_received:String = _js_client_object_name + "." + _root.OnMessageReceived;
var _on_message_sent:String = _js_client_object_name + "." + _root.OnMessageSent;
var _xml_socket:XMLSocket = null;
var _xml_socket_connected:Boolean = false;

//Build the XMLSocket object, define the event handlers, attempt to connect to host on specified port
function ConnectXmlSocket(hostname, port)
{
    _xml_socket = new XMLSocket();
    _xml_socket.onConnect = OnConnect;
    _xml_socket.onClose = OnClose;
    _xml_socket.onData = OnDataReceived;

    if (!_xml_socket.connect(hostname, parseInt(port)))
    {
        _proxy.call(_on_status_changed, _js_client_object_name, 0);
        _xml_socket_connected = false;
    }
}

//Once the connection is established raise the event handler back down to the client
function OnConnect(success)
{
    _xml_socket_connected = success;
    
    if (success)
        _proxy.call(_on_status_changed, _js_client_object_name, 1);
    else
        _proxy.call(_on_status_changed, _js_client_object_name, 0);
}

//Disconnect ourselves from the remote socket serverfunction CloseXmlSocket()
{
    _xml_socket.close();
    _proxy.call(_on_status_changed, _js_client_object_name, 2);
}

//Once the connection is close raise the event handler back down to the client
function OnClose()
{
    _proxy.call(_on_status_changed, _js_client_object_name, 3);
    _xml_socket_connected = false;
}

//We have received data so raise the event handler back down to the client
function OnDataReceived(received_data)
{
    _proxy.call(_on_message_received, _js_client_object_name, received_data);
}

//Method to allow sending data to the remote socket server
function SendData(xml_data)
{
    var object_xml:XML = new XML(xml_data);
    var return_value:Boolean = false;

    if (_xml_socket_connected)
    {
        _xml_socket.send(object_xml);
        return_value = true;
    }
    
    _proxy.call(_on_message_sent, _js_client_object_name, return_value);
}

As you can see from the sample above there isn't much there. You'll notice how simple it is to create a socket and start using it. You specify a hostname and a port and that's it. Also you notice you can setup all your event handlers so you can be notified of different events. But this only gives you the ability to receive data within Flash.

The second part of this magic act is the _proxy class you see within the code above. This allows you to pass the data down through javascript to your page as well as send information back up to your Flash movie through the proxy. So you can have a static HTML page with just some javascript and your small flash movie and then you can have a very small and simple page that updates in real-time. It's that easy.

One thing of note. The socket server that your flash movie will connect to must send their message will a null terminator (last byte of the message must be null) in order for it to read the message.

By the way the files for the proxy are bit larger so I won't post the code here but if anyone would like them feel free to drop me a line in the comments or by email and I can send you a zip file of everything. (swf files, js files, sample .net application for remote socket server, html page to display the information coming back and forth)