A Chat with FMS 3 coded in ActionScript 3.0

May 302008
 

Some days ago I started using FMS (Flash Media Server). Obviously I wanted to write my project in AS3 and realized that they weren’t a lot of documentation on the topic, that why I’ll post here every part of code I made working.

My last project was about creating a chat. I downloaded the demo from FMS2 and tried to update it to AS3, not a big deal, but I’m happy that it works now.

FMS Chat Demo

I didn’t design it in OOP (object oriented programming) as it is only a simple demo, but I think it can be a good start for anybody starting using FMS with AS3.

I wrote 2 files, one .fla for the client and one .asc for the server.

The .asc file

//Fired when the application is loaded on FMS
application.onAppStart = function()
{
	trace(" *** FMS Application Started *** ");
	/**/
	// Get the server shared object 'users_so'
	application.users_so = SharedObject.get("users_so", false);

	// Initialize the history of the text share
	application.history = "Welcome to this chat!\n";

	// Initialize the unique user ID
	application.nextId = 0;

}

//Fired when a client connect to the server
application.onConnect = function(newClient, name)
{
	// Make this new client's name the user's name
	newClient.name = name;

	// Create a unique ID for this user while incrementing the
	// application.nextID.
	newClient.id = "u" + application.nextId++;

	// Update the 'users_so' shared object with the user's name
	application.users_so.setProperty(newClient.name, name);

	// Accept the client's connection
 	application.acceptConnection(newClient);

	// Call the client function 'setHistory,' and pass
	// the initial history
 	newClient.call("setHistory", null, application.history);

	// The client will call this function to get the server
	// to accept the message, add the user's name to it, and
	// send it back out to all connected clients.
	newClient.msgFromClient = function(msg) {
		msg = this.name + ": " + msg + "\n";
		for(var i=0; i < application.nextId; i++)
		{
			application.clients[i].call("msgFromSrvr",null, msg);
		}
		application.history += msg;
	}
}

//Fired when a clien disconnect from the server
application.onDisconnect = function(client)
{
	trace("disconnect: " + client.name);
	application.users_so.setProperty(client.name, null);
	application.nextId--;
}

Here we got 3 steps,

  1. application.onAppStart: is called when the application is loaded in FMS, it basically inform us that the application is ready to use.
  2. application.onConnect: is called when a client connect to this application in FMS, here is all the server logic to interact with the client(s).
  3. application.onDisconnect: is called when a client disconnect from the application or when the application is unloaded from FMS

The .fla is only the for UI (user Interface) and for the interaction with the server. If you have trouble understanding what is happening look at this code where I explain how to call functions from server side to client and from client to server.

I know it is not the state of the art in terms of chat but again, this is just a small demo on which complex interaction could be built.

you need to download FMS 3 free developer edition to start having fun with FMS.

Download the source of the FMS Chat

Ahmet

Flash Media Server 3: calling a function from ASC to AS3
(Server – Client interaction)

May 152008
 

I had quite a hard time figuring out how to call a function hosted on FMS (an .asc file) and how to call a function on the client from the server. I’m new to FMS (Flash Media Server) and there is not a ton of documentation, updated, for ActionScript 3.0.

So here is a simple example of interaction between server and client function. Obviously you first have to install FMS on your computer (I used the free developer version of FMS 3).

Installed? Let’s start: we will need two files, a document class for your .fla and an .asc (server side ActionScript) file.

.as file (document class): Interaction.as

package
{
import flash.display.MovieClip;
import flash.net.NetConnection;
import flash.net.Responder;
import flash.events.NetStatusEvent;

public class Interaction extends MovieClip
{
// Responder for call to server's
private var myResponder:Responder = new Responder(onReply);
private var nc:NetConnection;

public function Interaction():void
{
//Constructor
nc = new NetConnection();
nc.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler );

// Connect to the server.
nc.connect("rtmp://localhost/Interaction");

//Allow method within th class to be called by the server side script
nc.client = this;

}

//Handle NetStatus
private function netStatusHandler( event:NetStatusEvent ):void
{
switch( event.info.code )
{
// Successfully connected to FMS, execute function
case "NetConnection.Connect.Success":
trace("connected");
callServerSideF();
break;
}
}

public function callServerSideF():void
{
//Call a server side function written on an .ASC file
nc.call("callFromClient", myResponder, "Server");
}

public function calledByServerSide(msg:String):void
{
//Function called by an .ASC file
trace("ASC have to say :"+msg);
}

// Responder function for nc.call()
private function onReply(result:Object):void
{
trace("Client have to say " + result);
}
}
}

Now the .asc file: main.asc

//Application is launched
application.onAppStart = function()
{
/* Allow debugging */
this.allowDebug = true;
}

//Client is connected
application.onConnect = function( client )
{

//Accept the connection
application.acceptConnection( client );

//Call the function calledByServerSide from AS3
application.clients[0].call( "calledByServerSide", null, "Hello Client :-)");

// Define new client function for a nc.call().
client.callFromClient = function( helloStr ) {
return "Hello Mr " + helloStr + ":-D~";
}
}

//Client disconnected
application.onDisconnect = function( client )
{
//Trace on the FMS Application console
trace( client+" is disconnected" );
}

Copy main.asc on your FMS application folder (I called it /Interaction/).

I was helped by a tutorial made by ‘Newtriks’ and published in WebDesigner magazine (files are available to download, issue 137).

Download the example.

Ahmet