Flash Realtime Graph using PubNub

PubNub messaging capabilities can be used on browser plug-ins like Flash and Silverlight. In this tutorial, we will see how to use PubNub Javascript API in Flash.

This experiment is very simple. We are going to develope a Graph in Flash that receives realtime updates.

Graph in Flash

Flash is one of the finest tool that is used to develope rich internet applications. In this experiment Flash is used to build a Graph that depicts the stock prices of some all time favourite shares listing on NYSE stock exchange. Data-source for this graph is an xml file. This Flash content is server through a web server.

The magic of PubNub Javascript API is to remotely attach a different xml to this graph that updates stock price on users browser. You can see the Graph in the image below.

PubNub is a messaging service on cloud. Messages can be published into a specific channel through a server and configure various clients listening to this channel.

In our case webpage that hosts the Flash chart is the client, listening to the stock updates flowing through a specific PubNub messaging channel using PubNub Javascript API.
You need to implement the following 3 steps to achieve this

Step 1: Include PubNub Javascript

	< script src="http://cdn.pubnub.com/pubnub-3.0.min.js"
	pub-key="demo"
	sub-key="demo"
	ssl="off"
	origin="pubsub.pubnub.com"
	id="pubnub"
	></script>
	

You need to have 2 keys namely - PUBLISH_KEY, SUBSCRIBE_KEY to include PubNub javascript as shown above.

Step 2:

Tune on to a specific channel and start listening to messages. Make a call to the "Subscribe(<Channel>, <Callback Method>)" method on PubNub API. You need to pass the 'Channel Name' and the 'Callback Method(delegate)' as parameters to this method as shown in the below snippet. This method starts listening on the specified channel continously. More details on the implementation of javascript API can be found in PubNub JavaScript API.

PUBNUB.subscribe()

	PUBNUB.subscribe({
		// Listen on channel 'my_channel' 
		channel: "my_channel1", 

		// Set Callback Function when Messages Received 
		callback: function (message) { 
		   UpdateChart(message); 
		}
	});

Step 3:

Now Need to implement the delegate method that will receive the xml feed to update the Flash chart.The implementation of the UpdateChart method is shown below.

	function UpdateChart(xmlFile) {
		thisMovie("FlashMovie").FlashUpdateChart(xmlFile); 
	}

Now lets implement a simple Server application. Server Application is going to be a .NET Windows based form.

Server Component

The role of the server here is very simple. It will publish messages into a specific channel. Lets call it a Messaging Server. You can see the Messaging Server in the image below.

There are two inputs, Channel Name & Content to broadcast. There is a button at the bottom, "BROADCAST" which will publish the message into the specified channel using PubNub C# API. Publishing the message using PubNub API is very simple. OnClick() of "BROADCAST" button is defined as in the code snippet below.

Publish()

	private void BroadCastOnClick()
	{
		pubnub = new Pubnub(PUBLISH_KEY, SUBSCRIBE_KEY, SECRET_KEY, false);
		string channel = txtChannel.Text;
		List<object> info = pubnub.publish(channel, comboBox1.Text);
		ShowStatus(info);
	}

Publishing messages involves 2 steps:

Step 1. Instantiate the PubNub API. You need to have 3 keys namely - PUBLISH_KEY, SUBSCRIBE_KEY & SECRET_KEY to instantiate PubNub API as in teh above code snippet. Grab your API Keys here.

Step 2. Make a call to the "Publish(<Channel>, <Message>)" method on PubNub API. You need to pass the 'Channel Name' and the 'Message to publish' as parameters to this method as shown in the above snippet. Your message is now published into the specified channel on Cloud. This method internally makes an HttpWebRequest to carryout the operation. More details on the implementation of Publish can be found in PubNub C# API.

In our case XML file names are published through the channel to update the graph.

Click here to download the source code for this solution.

Author:
Kris.Ram, Integration Specialist
Minnesota, USA