5.a Appendix: Application code template

The source FLA of this example is available for both Flash MX and MX2004 under the Examples/(Actionscript version)/applicationTemplate folder.

» Introduction

In this article we will take a look at a simple code template that can be used as a starting point for almost any SmartFoxServer based multiuser application.
The template contains all the basic methods to establish a connection, authenticate, join rooms etc... and all the necessary server response handlers.

It is required that you're already familiar at least with the "Connection" (5.1) and "Simple Chat" (5.2) tutorials before you proceed with this article.

» The basic steps

One of the problem that developers may find when taking their first steps in multiuser applications, is to fully understand the basic operations that are necessary to interact with the server. In fact there's a precise sequence of commands that is used to establish the connection with the server, before you can fully interact with it.

The sequence is very simple, and looks like this:

1) Establish a socket connection: this is the very first step. At this point it is just like if you were knocking at the server's door.
If the server is up and running it will immediately respond and activate a new communication channel for your client application.

2) Login: in this phase you should tell the server who you are and which application you would like to interact with.
If this operation is successfull you will receive the list of rooms available in the current zone/application.

3) Join a room: this is the last step. Once a room is joined you can start interacting with the other users and the application logic.

» The code

Here's the code of the application-template. For brevity we have stripped the comments. You will find them in the source .FLA file.

import it.gotoandplay.smartfoxserver.*

stop()

var ip:String		= "127.0.0.1"
var port:Number 	= 9339
var zone:String 	= "simpleChat"

// Load the policy file from the server
System.security.loadPolicyFile("xmlsocket://" + ip + ":" + port)

var smartfox:SmartFoxClient = new SmartFoxClient()
smartfox.onConnection = handleConnection
smartfox.connect(ip, port)


function handleConnection(success)
{
        if (success)
        {
                trace(">> Connection successfull")
                sendLogin()
        }
        else
        {
                trace("[ ERROR ]: Can't connect!")
        }
}


function sendLogin()
{
        smartfox.login(zone, "")
}


smartfox.onLogin = function(resObj:Object)
{
        if (resObj.success)
        {
                // Login Successfull
                trace(">> Login successfull. Nickname: " + resObj.name)
        }
        else
        {
                trace("[ ERROR ]: Login error. Server said: " + resObj.error)
        }
}


smartfox.onRoomListUpdate = function(roomList:Object)
{
        trace(">> Received the list of rooms\n")
        trace("\tRoom List:")
        trace("\t--------------------------------------------")
        
        // Show the list of rooms
        for (var i in roomList)
        {
                trace("\t" + roomList[i].getName())
        }
        
        // a blank line
        trace("")
        
        // Join the default room
        this.autoJoin()
}


smartfox.onJoinRoom = function(roomObj:Room)
{
        trace(">> Room: '" + roomObj.getName() + "' joined successfully")
}


smartfox.onJoinRoomError = function(errorMsg)
{
        trace("[ ERROR ]: Error joining the room. Server said: " + errorMsg)
}


smartfox.onConnectionLost = function()
{
        trace("[ ERROR ]: Connection with server was lost")
}


The three steps that we have highlighted in the introduction are easily recognizable:

1) Establish a socket connection: it is done by calling the connect() method and it is handled in the onConnection() function.

2) Login: the sendLogin() method sends the zone name and an empty user-name. This the simplest form of login: the client is treated as a "guest" and he will be assigned an automatically generated nickname. The login response is received by the onLogin() handler

NOTE: the login process is completely customizable using server side extensions, we have chosen the "guest login" system for the sake of simplicity.

3) Join a room: Finally a room is joined with the join() or autoJoin() method and the result is handled in the onJoinRoom() / on JoinRoomError() functions.

» Skipping Frames

As you may have noticed, the example template contains all the actionscript code in the first frame. We usually reccomend to use this approach whenever possible, however there are developers who prefer to use different frames for different sections of their applications, which is also good.

If you plan to use the latter approach you should pay attention not to separate a server request from its handler in two different frames, as this may cause some problems. For example if you execute a server request in frame 1 be sure to have the response handler for that request in frame 1 too.

» Conclusions

Once the three simple steps we've listed are successfully executed, you can start to fully interact with the application logic.


doc index