Influxis Flash Media Interactive Server 3.5 Hosting Specialists

 

Something you may not know is that the Influxis service provides more than just the basic framework and component classes for you to work with your server-side code. This post will be discussing two of these classes, which I use a LOT in my code: The EventDispatcher and the Delegate classes. These server-side classes are only available to Influxis customers, and are only accessible within your Influxis account. There might be other services out there that have them, I’m not sure, but in this post we’re talking about those on Influxis ONLY. You can load the classes in with simply the “load” protocol we already use in FMS.


load("EventDispatcher.asc");
load("Delegate.asc");


These classes automatically create globally accessible objects using the respective class name. For example, you can access the EventDispatcher by using the word EventDispatcher which is globally accessible from any scope in your server-side code.

//example
application.onConnect = function( p_client, p_sName )
{
	EventDispatcher.initialize( myListenerObject );
};

I am going to build a simple example to demonstrate the use and potential of the classes. Then in future posts it can hopefully grow to something useful for you.

Let’s start off with the basic main.asc layout for an application which includes things like onConnect, onDisconnect, onAppStart. Let’s also load the EventDispatcher and Delegate classes to our main.asc code.

load("EventDispatcher.asc");
load("Delegate.asc");    

application.onAppStart = function()
{
	trace("Delegate and EventDispatcher Test 1 Started!!");
};    

application.onConnect = function( p_client, p_sName )
{
	this.acceptConnection( p_client );
};    

application.onDisconnect = function( p_client )
{
};

If you upload this to your Influxis account or if you are working directly from the Online File Manager you can save your changes and run the application. In your FMS Admin Console’s Live Log you should see a trace call that looks like this:


Influxis EventDispatcher Class Loaded Successfully.
Influxis Delegate Class Loaded Successfully.
Delegate and EventDispatcher Test 1 Started!!


Let’s add some logic to this basic framework. What I want to do is Modify the client object that FMS gives us so that it can dispatch events and accept event listeners. So in order to Modify the Client object at its base, we need to add the methods to its prototype like so:


Client.prototype.addEventListener;
Client.prototype.removeEventListener;
Client.prototype.dispatchEvent;


This will add the methods we will use for event dispatching. Now I want to add a method that will handle the dispatching of an event. Again we will access the prototype of the Client object:

Client.prototype.addEventListener;
Client.prototype.removeEventListener;
Client.prototype.dispatchEvent;   

Client.prototype.changeStatus = function( p_sStatus )
{
	this.dispatchEvent({type:"status",data:p_sStatus});
};

The changeStatus method will be called via the client side or swf file logic. It will dispatch a “status” event that we will need to listen to.

When the client first connects to our application, the FMS client object is passed as the first argument in our onConnect method. Here we will add ourselves as a listener to the client’s “status” event and handle that event call when it occurs. I want to also be able to remove the method handler whenever I want to, so I am going to use the Delegate class to create a reference to the event handling method. In addition, I want to be able to track which user is changing their status, so I will give each user a unique ID in order to show who is who.

This is what our code should finally look like:

load("EventDispatcher.asc");
load("Delegate.asc");  

var fStatusHandler;
var nCount = 0;  

application.onAppStart = function()
{
	trace("Delegate and EventDispatcher Test 1 Started!!");
	fStatusHandler = Delegate.create( this, this.onStatusEvent );
};  

application.onConnect = function( p_client, p_sName )
{
	//give the client object event dispatching capabilities.
	EventDispatcher.initialize( p_client );  

	p_client.id = nCount++;
	p_client.name = p_sName;
	p_client.addEventListener( "status", fStatusHandler );  

	trace( "onConnect client "+p_client.name+"  id "+p_client.id );  

	this.acceptConnection( p_client );
};  

application.onDisconnect = function( p_client )
{
	trace( "onDisconnect client "+p_client.name+"  id: "+p_client.id );
	//remove the listener.
	p_client.removeEventListener( "status", fStatusHandler );
};  

application.onStatusEvent = function( p_oEvent )
{
	var client = p_oEvent.target;
	var status = p_oEvent.data;  

	trace( "Client["+client.id+"] Status was changed to "+status );
};  

//Initiate the methods on the client objects prototype
Client.prototype.addEventListener;
Client.prototype.removeEventListener;
Client.prototype.dispatchEvent;  

Client.prototype.changeStatus = function( p_sStatus )
{
	this.dispatchEvent({type:"status",data:p_sStatus});
};

The fStatusHandler at the top makes a global variable, and in the onAppStart function you can see that I set that global variable using a Delegate to hold the reference to our event handling function called “onStatusEvent”. In the onConnect function you can see that I am first initializing the clients event properties by calling EventDispatcher.initialize( p_client ) and passing the client object as the argument. This defines the necessary information to our client object so that it can handle event dispatching.

The next couple of lines I set the client object with a unique ID by incrementing the nCount global variable that is set at the top under the fStatusHandler, and I also set the users name that is passed in as the second argument in the onConnect function.

Next I add the fStatusHandler method as a listener to the clients “status” event call. Now any “status” events should be captured by the onStatusEvent function we created on the application object. The onStatusEvent function will simply trace out which client is changing their status and what status it was changed to. The last line of our onConnect method simple accepts the clients request to connect.

Lastly, the onDisconnect method removes the fStatusHandler from further listening to the “status” event. I know, I know…this is unnecessary here because FMS destroys the client object once the client has disconnected anyway, but for the sake of example I’ll go ahead and use it anyway.

OK, now upload your file to your Influxis account, or if you are editing in the Influxis Online File Manager simply click the “Save Changes” button.

Now let’s get started on our client fla. Open Flash CS3 and create a new fla and save it as client.fla.

Open your components panel and drop in a button and combo box components to the stage. Create a text field next to the button on the stage. Label the button btLogin then label the combo box cb and finally label the text field tName. Create a new layer and label it “as”. Open the Actionscript editor window and click on the “as” layer’s first frame. Start by importing all the necessary classes:


import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;
import flash.events.Event;
import flash.events.NetStatusEvent;


Create a net connection Object and set the defaultObjectEncoding to AMF0. FMS 2 only supports AMF0. Here is what the NetConnection code should look like:

import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;
import flash.events.Event;
import flash.events.NetStatusEvent; 

NetConnection.defaultObjectEncoding = ObjectEncoding.AMF0;
var nc:NetConnection = new NetConnection(); 

function handleNetStatus( p_event:NetStatusEvent ):void
{
	var code:String = p_event.info.code; 

	trace( "handleNetStatus  " + code ); 

	if (code == "NetConnection.Connect.Success") {
		btLogin.enabled = false;
	} else if( code == "NetConnection.Connect.Closed" ){
		btLogin.enabled = true;
	}
}; 

nc.addEventListener( NetStatusEvent.NET_STATUS, handleNetStatus );

I went ahead and added some logic to disable the login button once we successfully connect.

Now, we want the user to be able to enter a name when they log in. The user can type a name in the tName text field, and when they click the login button we should be able to take that data in the text field and send it to our server-side code. Create a function called doConnect. This will call the connect method in our nc NetConnection variable and pass it the name entered in the tName field as the second argument, the first argument will be your rtmp path to your Influxis account
“rtmp://youraccount.rtmphost.com/application”.

Here is the code:

function doConnect( p_event:MouseEvent ):void
{
	nc.connect( "rtmp://youraccount.rtmphost.com/labs/", tName.text );
}; 

btLogin.addEventListener( MouseEvent.CLICK, doConnect );

As you can see we added the event listener for the button and we are passing the name as the second argument, you can go ahead and add more logic to filter out any blank name entries if you like.

Now let’s add handling for our status change.

Create a function called onStatusChange, this will call our server-side code’s “changeStatus” method we created earlier.

function onStatusChange( p_event:Event ):void
{
	var sLabel:String = cb.selectedLabel;
	trace("onStatusChange "+sLabel); 

	nc.call( "changeStatus", null, sLabel );
}; 

cb.addEventListener( Event.CHANGE, onStatusChange );
cb.enabled = false;

Now every time the user updated the status in the combo box, the onStatusChange is fired, the “changeStatus” function is invoked on the server-side, and hopefully if things went well the event listener method on our server-side code will fire.

The final code for the client should look like this:

import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;
import flash.events.Event;
import flash.events.NetStatusEvent; 

NetConnection.defaultObjectEncoding = ObjectEncoding.AMF0;
var nc:NetConnection = new NetConnection(); 

function handleNetStatus( p_event:NetStatusEvent ):void
{
	var code:String = p_event.info.code; 

	trace( "handleNetStatus  " + code ); 

	if (code == "NetConnection.Connect.Success") {
		btLogin.enabled = false;
		cb.enabled = true;
		tCon.text = "CONNECTED";
	} else if( code == "NetConnection.Connect.Closed" ){
		btLogin.enabled = true;
		cb.enabled = false;
		tCon.text = "CLOSED";
	}
}; 

nc.addEventListener( NetStatusEvent.NET_STATUS, handleNetStatus ); 

function doConnect( p_event:MouseEvent ):void
{
	nc.connect( "rtmp://youraccount.rtmphost.com/labs/", tName.text );
};
btLogin.addEventListener( MouseEvent.CLICK, doConnect ); 

//status handlers: 

function onStatusChange( p_event:Event ):void
{
	var sLabel:String = cb.selectedLabel;
	trace("onStatusChange "+sLabel); 

	nc.call( "changeStatus", null, sLabel );
}; 

cb.addEventListener( Event.CHANGE, onStatusChange );
cb.enabled = false;

Click on your combo box component and add some labels for status types (away, busy, playing scrabble, etc.).

Open your FMS Admin Console to see the server-side traces, save your fla, publish it and run it. If all went well, in the live log view of your Admin Console you should see something like:

Client 1 Status was changed to busy


Source Files

Jerry Chabolla

This entry was posted on Friday, November 16th, 2007 at 7:01 pm and is filed under Influxis. 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.