Silverlight for Business

During a recent course with Stan James  we discussed how Silverlight 3 could be used with duplex services to push data from the server to the clients; I wanted to produce a simple example of how to do this.  Pushing data this way has a number of benefits:

• You reduce the load on the server; instead of multiple clients polling the server periodically, we send the data from the server to the clients as and when we want to.
• We can eliminate or reduce data lag in time sensitive applications – so as soon as we have the data available we can push it to Silverlight to react to.  This can be very important for applications that need to show data changes as they happen, such as trading systems or perhaps live statistics from sports events such as Formula 1.
• All clients receive updates at the same time.

There is a nice sample application from Mix09 available here which creates a chat application as well as an example of a server push.  However I felt a simpler example would have a benefit to many trying to get to grips with this, together with a bit more explanation.  We will however use generic DuplexService class that is created in that project (it would make sense for a class like this to be available in the framework, or at least a template within Visual studio)

What our application will do

We want a simple example, and that is what we will get.  The server will periodically push a “LiveData” message to any Silverlight client that has connected, and the client will display it.  I am not concerned how the data gets to the server here, only how to send it out to the client once we have it. 

How the project fits together

Creating the Sample

Creating the Project

First create a new Silverlight project; let’s call it DuplexExample – ensure you include a Asp.Net Web Application with the default name (DuplexExample.Web) .  In the web site add a reference to the System.ServiceModel.PollingDuplex (make sure you get the correct one – the v3.0 one in the Server folder.)

And in the Silverlight project also add a reference to System.ServiceModel.PollingDuplex (but this time in the Client folder):

Download the Duplex sample from http://code.msdn.microsoft.com/silverlightws/Release/ProjectReleases.aspx?ReleaseId=2401, extract it and grab the DuplexService.cs file and drop it into your web site.

Creating the Service

Now we could add a Wcf service using Visual Studio templates, but that would actually create a lot of stuff we don’t need which we would just have to delete, so instead just add a text file but call it LiveDataService.svc . This will give us a blank file into which you can add the following:

<%@ ServiceHost
        Language=”C#”
        Debug=”true”
        Factory=”DuplexExample.Web.LiveDataServiceFactory”
        Service=”DuplexExample.Web.LiveDataService”
         %>

The only difference here to the contents of a normal svc file is the fact that there is no CodeBehind value specified and we have explicitly specified a Factory class.  (For more details on these options see here: http://msdn.microsoft.com/en-us/library/aa967286.aspx) Since we have specified a LiveDataService for our service and LiveDataServiceFactory class that will be used to instantiate the factory service, we will need to go and create these. 

But  before we can do that we need a DataContract class called LiveDataMessage – this is the simple class that our service will send to Silverlight.

[DataContract]
public class LiveDataMessage: DuplexMessage
{
    [DataMember]
    public int Value { get; set; }
    [DataMember]
    public string Description { get; set; }
}

Ok so now we can create our “LiveDataService” – add a class to your web site called LiveDataService.cs  and add the following code.  This is fairly simple – we are using a Timer to send a message to all clients every 5 seconds:
 

using System;
usingMicrosoft.Silverlight.Cdf.Samples.Duplex;
usingSystem.Threading;

namespace DuplexExample.Web
{
    public class LiveDataService :DuplexService
   {
        Timer liveDataTimer;

        public LiveDataService()
        {
            //Set up a an update every 5 seconds
           this.liveDataTimer = newTimer(newTimerCallback(LiveDataUpdate),null, 0, 5000);
        }

        void LiveDataUpdate(objecto)
        {
            LiveDataMessage liveDataMessage = newLiveDataMessage()
            {
                Description = “Live Data at “+ DateTime.Now.ToLongTimeString(),
                Value = newRandom().Next(0, 100)
            };
            PushToAllClients(liveDataMessage);
        }
    }
}

The DuplexService Class

You will notice that our LiveDataService inherits from the DuplexService we added to our project – this provides all the plumbing work for the duplex service:

Crucially this class is also marked with the following attribute, meaning our service can keep track of clients that have connected, because it stays in memory and is not recycled’:

Ok – so the DuplexService provides plenty of goodness for free, though there is one thing we need to alter in this file – you may have noticed already that it is not compiling.  Down at the bottom you will see a list of KnownTypes.  These related to the sample project you downloaded and not what we want.  We only have one specific KnownType (apart from the Connect and Disconnect) called LiveDataMessage. 

So you need to make the following change to the DuplexService.cs file (at the bottom) :

The LiveDataServiceFactory class

Finally we need to add the LiveDataServiceFactory class  – which inherits from the DataServiceFactory class in the DuplexService.cs file (and in fact that’s all it will do)

namespace DuplexExample.Web
{
    public class LiveDataServiceFactory : DuplexServiceFactory<LiveDataService> {}

}

If you go and look at the DuplexServiceFactory we are inheriting from (again in the DuplexService.cs file) you will see that it provides the configuration for the service with a custom binding (this is an alternative to providing configuration for doing this)

The Silverlight Project

Make sure you can build your solution, then add a Service Reference from the Silverlight project to the LiveDataService you have created:

I created a very simple UI – just a button and a ListBox shown below:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="75"/>
        <RowDefinition Height="225"/>
    </Grid.RowDefinitions>
    <Button Content="Connect"             Click="ButtonConnect_Click"             x:Name="ButtonConnect" Margin="10"></Button>
    <ListBox Grid.Row="1"             ScrollViewer.VerticalScrollBarVisibility="Visible"              x:Name="ListBox1"></ListBox>
</Grid>

Here is all the code in MainPage.Xaml.cs.  Take a look at it here then we’ll discuss it:

public partial class MainPage : UserControl
{
    DuplexServiceClient receiver;
    ObservableCollection<string> liveDataMessages =                                 new ObservableCollection<string>();
    CustomBinding binding = new CustomBinding(
                                new PollingDuplexBindingElement(),
                                new BinaryMessageEncodingBindingElement(),
                                new HttpTransportBindingElement()
                                );

    public MainPage()
    {
        InitializeComponent();

        ListBox1.ItemsSource = liveDataMessages;

        //make sure the endpoint address is correct
        receiver = new DuplexServiceClient(binding,                  new EndpointAddress("http://localhost:6719/LiveDataService.svc"));
        receiver.SendToClientReceived += (sender, e) =>
            {
                if (e.msg is LiveDataMessage)
                {
                    LiveDataMessage msg = (LiveDataMessage)e.msg;
                    liveDataMessages.Add(string.Format("{0}.                      Value = {1}", msg.Description, msg.Value));
                }
            };
    }

    bool connected = false;
    private void ButtonConnect_Click(object sender, RoutedEventArgs e)
    {
        if (connected)
        {
            Disconnect();
        }
        else
        {
            Connect();
        }
    }

    private void Connect()
    {
        ButtonConnect.Content = "Connecting...";
        receiver.SendToServiceCompleted += (sender, e) =>
        {
            ButtonConnect.Content = "Connected (click to disconnect)";
            connected = true;
        };
        receiver.SendToServiceAsync(new ConnectMessage());
    }

    private void Disconnect()
    {
        ButtonConnect.Content = "Disconnecting...";
        receiver.SendToServiceCompleted += (sender, e) =>
            {
                ButtonConnect.Content = "Disconnected (click to connect)";
                connected = false;
            };
        receiver.SendToServiceAsync(new DisconnectMessage());
    }

}

At the top of this code, we declare 3 variables: the DuplexServiceClient,a  CustomBinding (which matched the binding of the service we created on the server) and an ObservableCollection to store the messages we get from the server.  We instantiate the DuplexServiceClient in the class constructor using the custom binding and and endpoint (make sure this is the correct address for your service) and wire up the SendToClientReceived event which is where we add the messages we get from the server to the observableCollection (which in turn shows them in the ListBox)

However we also need to provide a Connect method (which sends a ConnectMessage to the server) – this is to essentially to let the Duplex service on the server know we are here, and allow it to keep track us via a Session ID.  You can see this in DuplexService.cs file as shown below (line 133):

The disconnect method does the reverse by sending a DisconnectMessage to the server which reacts like this (removing the client from it’s tracked session id’s)

Testing Your Application

Press F5 to run the application, then click the Connect  button  – you will see messages sent to Silverlight from the Server every 5 seconds.  To make it more interesting, start a second browser instance and run the same application and connect that too.  You will see both clients being updated at the exactly the same time.

Hope this is of use.

You can download the source code from here: http://cid-fb8b852ef1ab0b35.skydrive.live.com/self.aspx/SampleCode/DuplexExample.zip

Cheers

Ian