Going Beyond Audio/Video with Flash Media Server

Broadcasting Messages/Sharing Data

We have already looked at using FMS to broadcast live media (video) but how about broadcasting simple messages back and forth.

Fortunately, it is relatively easy with FMS to do that with:

Shared Objects

Flash and FMS have a capability which is called a SharedObject. SharedObject allows us to have a Flash object which can be used to transmit data back and forth from client to server to all of the clients. In effect it is shared between all of the clients.

Flash Media Server Developer Documentation: About Shared Objects

Remote Shared Objects

Shared Objects can be local (like a browser cookie) or remote (on the server shared amongst different people), they can also be persistent (saved to disk) or non-persistent (deleted when the last client disconnects).

Here is a very very basic example of a non-persistent remote shared object:

package 
{ 
	// Class so we can display and/or be used in the Flash IDE
  	import flash.display.Sprite; 
  
  	// Class that allows a Shared Object to exist on FMS
  	import flash.net.SharedObject; 
  
  	// So we can get Status from the NetConnection (callback)
  	import flash.events.NetStatusEvent; 
  
  	// So we can get events from the SharedObject (callback)
  	import flash.events.SyncEvent; 
  
  	// So we can connect to FMS
  	import flash.net.NetConnection;

	// Import TextField to show what to send/recieve
	import flash.text.TextField;
	import flash.text.TextFieldType;

	// Import TextEvent so we know when something happens in TextField
	import flash.events.TextEvent;

  	public class SimpleSO extends Sprite 
  	{
  		// Declare a SharedObject object
  		private var sharedObject:SharedObject;
  		
  		// Declare a NetConnection Object
  		private var netConnection:NetConnection;

		// Declare a TextField
		private var textField:TextField;

		// Constructor  
	        public function SimpleSO()
       		 { 
        		trace("starting");
        	
        		// String with URL to app on FMS
        		var rtmpURL:String = "rtmp://itp-flash.es.its.nyu.edu/sve204/SimpleSO";

			// Instantiate NetConnection
			netConnection = new NetConnection();

			// Event listener, calls netStatusCallBack when a NetStatusEvent is fired
			netConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusCallBack);

			// Connect to the application on the server
			netConnection.connect(rtmpURL);

			// Create the textField
			textField = new TextField();

			// Add event listener
			textField.addEventListener(TextEvent.TEXT_INPUT, textEventCallBack);
			
			// Make the textField an input field
			textField.type = TextFieldType.INPUT;
			
			// Set it's position and dimensions
			textField.x = 10;
			textField.y = 10;
			textField.width = 100;
			textField.height = 40;
			
			// Set it's starting text
			textField.text = "hi";
			
			// Add it to the display
			addChild(textField);
		}

        	// NetStatusEvent Callback
        	private function netStatusCallBack(nsEvent:NetStatusEvent):void 
        	{ 
        		// If we connected successfully
        		if (nsEvent.info.code == "NetConnection.Connect.Success")
        		{
				// Set up the shared object
				// We'll call it SimpleSO, pass in the app url and not make it persistent
				sharedObject = SharedObject.getRemote("SimpleSO",netConnection.uri,false);
				
				// Add a listener for when shared object is changed
			   	sharedObject.addEventListener (SyncEvent.SYNC,syncEventCallBack); 

				// Connect the shared object to our netConnection
				sharedObject.connect(netConnection);
        		}
        		else
        		{
				// Didn't connect
				trace("Sorry connection failed");
        		}
        	}	 

		private function syncEventCallBack(syncEvent:SyncEvent):void
		{
			//  Array of changes: syncEvent.changeList[]		
			for (var i:int = 0; i < syncEvent.changeList.length; i++)
			{
				trace(syncEvent.changeList[i].code);
				
				switch(syncEvent.changeList[i].code)
				{
					case "clear":
						break;
					case "success":
						break;
					case "change":
						// get the new data
						var newData:String = sharedObject.data.theData;
						trace("recieved " + newData);

						// Update TextField
						textField.text = sharedObject.data.theData;
		
						break;
				}
			}
		}

		private function textEventCallBack(textEvent:TextEvent):void
		{
			trace(textEvent.text);
			
			// If the text == a space
			if (textEvent.text == " ")
			{
				// send it
				sendData(textField.text);
			}
		}
		
		// send the data
		private function sendData(dataToSend:String):void
		{
			sharedObject.setProperty("theData",dataToSend);
		}	
	} 
} 
		

You can download the code: SimpleSO.as or Try it: SimpleSO.swf

A SharedObject combined with Live Streaming for sharing screenshots example

Here is a simple white board example that uses shared objects but uses the send method instead: WhiteBoardSO.as or try it: WhiteBoardSO.swf

What about doing the same thing in AJAX using the newish HTML 5 canvas tag: Try it, Download It