Silverlight Real-time 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 Silverlight API in Silverlight.

This experiment is very simple. We are going to develope a Graph in Silverlight that receives realtime updates from another application through PubNub APIs.

Graph in Silverlight

Silverlight is one of the finest tool that is used to develope rich internet applications. In this experiment Silverlight is used to build a Graph that depicts the Monthly budget. Data-source for this graph is from another Silverlight application.

The magic of PubNub Silverlight API is to constantly listen to a PubNub channel to look for new data and attach it to the graph. 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 Silverlight API.

Include the PubNub Class to your Silverlight Chart application. Follow the following steps to start listen to the data for your chart

Step 1: Create a Pubnub Object

Following snippet will show you how instantiate a Pubnub class. You need to provide 4 parameters as follows

	//Instantiate PubNub Class
	PubnubClass pubnub = new PubnubClass(
	    "demo", // PUBLISH_KEY
	    "demo", // SUBSCRIBE_KEY
	    "",     // SECRET_KEY
	    false   // SSL_ON?
	);

You need to have 2 keys namely - PUBLISH_KEY, SUBSCRIBE_KEY Grab your API Keys here.

Step 2:

Tune on to a specific channel and start listening to messages. Make a call to the "Subscribe(<Channel>)" method on PubNub object created above. You need to pass the 'Channel Name' as a 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 Silverlight API can be found in PubNub Silverlight API.

	pubnub.subscribe("test-channel");
	

Step 3:

Now Need to check for the incoming messages on the PubNub object's "ReturnMessage" property. If you make the return message property bindable, then you dont have to do anything. But in our case we are not making it bindable. We constantly check of any change in the return message to re-bind the chart.

pubnub.ReturnMessage

	object[] objArray = pubnub.ReturnMessage as object[];

Now Lets implement a simple Server application. Server Application is going to be another silverlight application that will perform the Publish.

Publish 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, which will publish the message into the specified channel using a button at the bottom, which will publish the message into the specified channel using PubNub C# API.

Publishing the message using PubNub API is very simple. OnClick() of button is defined as in the code snippet below.

Publish()

	object obj = new List<double>() { {100}, {200}, {300} };
	pubnub.publish("test-channel", obj);

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 the 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. Message can be any object. 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 the amount spent on different category of expenses 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