Customise Red5 applications and broadcast messages to Flex HOWTO

In one of my earlier posts Flex and Red5 simple demo, I demonstrated how to broadcast messages from Red5 server to all subscribed Flash clients and vice versa. This feature of Red5 open source Flash streaming server continues to impress me and I think everyone with a bit of AS3 and Java knowledge should take advantage of this fantastic piece of technology.

In this post I’d like to explain the code that’s required to exchange messages between Red5 and Flash/Flex client. There are 2 main components that make this happen:
1. Client-side code – AS3
2. Server-side code – Java

Before I write any code, let’s assume the following:
1. My Red5 application name is “callMe”.
2. Red5 server runs on localhost or 127.0.0.1
3. My Flex main class is TestAS.as

Client-Side – Flex/AS3

Now let’s do the following:
1. Connect to Red5 server
2. Set up a client class to accept broadcast messages from Red5
3. Call helloRed() method on Red5 that will return “Hello from Red5” back to Flex.

public class TestAS extends Sprite
{
	private var _nc:NetConnection;
 
	public function TestAS() {
		this._nc = new NetConnection();
		this._nc.client = new Red5Client();
		this._nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
		var nr:Responder = new Responder(responseHandler,null);
		this._nc.connect("rtmp://127.0.0.1/callMe");
		this._nc.call("helloRed", nr);
	}
 
	private function netStatusHandler(e:NetStatusEvent) : void {
		if(e.info.code == "NetConnection.Connect.Success") {
		trace("Connection Successfull!")
	}
 
	private function responseHandler(responder:String) : void {
		trace("Responder says:: " + responder); //Responder should be 'Hello from Red5'
	}
}

Red5Client.as will have a public method updateSubscribers(), which will accept broadcast messages containing the total number of subscribers from Red5 server.

public class Red5Client
{
	public function updateSubscribers(connections:int):void {
		trace("Number of connections:: " +connections);
	}
}

That’s it for client side!

Server-Side – Red5/Java

The beauty of Red5 is that it’s open source and you can easily extend it’s default functionality. Since the server is built on Java platform, you can do some very powerful things with it. All you need is a bit of imagination
Now, let’s write our custom Red5 application that will extend the default ApplicationAdapter class.

public class Application extends ApplicationAdapter {
 
	private int _connections = 0;
 
	// public method called from Flex, remember?
	public String helloRed()
	{
		String myString = "Hello from Red5";
		return myString;
	}
 
	public boolean appJoin(IClient client, IScope app)
	{
		// increase the number of connections whenever someone connects to the app
		this._connections ++;
		notifyAllClients();
		return true;
	}
 
	public void appLeave(IClient client, IScope app)
	{
		//decrease number of connections whenever someone disconnects from the app
		if(this._connections &gt; 0) {
			this._connections --;
		}
 
		notifyAllClients();
	}
 
	/**
	* Invoke a method on all connections to a given scope.
	*/
	private void notifyAllClients() {
		IScope scope = Red5.getConnectionLocal().getScope();
		// method to invoke on the client side.
		String method = "updateSubscribers";
		Object[] params = new Object[] {this._connections};
 
		List connections = new ArrayList();
		Iterator iter = scope.getConnections();
		while (iter.hasNext())
		connections.add(iter.next());
 
		for (IConnection conn: connections)
		//Notify all clients of connection change
		notifyClient(conn, method, params);
 
		// finally notify local client
		IConnection localConn = Red5.getConnectionLocal();
		notifyClient(localConn, method, params);
	}
 
	private void notifyClient(IConnection conn, String method, Object[] params) {
		if (conn instanceof IServiceCapableConnection) {
			((IServiceCapableConnection) conn).invoke(method, params);
		}
	}
}

Compile your Application and copy the class into your Red5 application:
webapps/callMe/WEB-INF/classes/…./Application.class
The final step is to tell your Red5 server about your custom Application bean. At the bottom of your web.xml add this (pay attention to your class paths):

<bean id="web.handler" class="com.mysite.red5.Application" />

That’s it for server-side!

Once again, here is the working example. Access this page with 2 or more browser windows and observe the number displayed in the middle.
{swf}Red5Test|100|100{/swf} You also might find the following resources useful:
1. Red5 Server Documentation
2. Red5 User Reference Manual

Top

Share this post

Author Marko Tomic

No comments yet.

markomedia - web development