SignalR 2 in Silverlight 5

• Download source code (Server and Silverlight) - 236.5 KB
• Download source code (Silverlight) - 6.1 KB

Introduction

SignalR is the latest technology for real-time web functionality. You should create code for both server-side and client-side applications to use SignalR properly. There are a lot of good works for server-side part, and also there are some demos for client-side part. But unfortunately for Silverlight applications, the articles and demos are obsolete. The all new SignalR client library (which can be used in Silverlight too) will be used in this tip, and I will discuss a chat demo step-by-step.

Preparing Solution and Projects

First of all, you need to create a Silverlight application. You can use any template you want, but I prefer to create a clean and neat solution. Open Visual Studio 2012 or 2013 and click "New Project...". Use .NET Framework 4.5 as your target framework.
SignalR works in .NET 4.0 either, but if you use .NET 4.5 you will access SignalR class templates in Visual Studio.
From the installed templates, select Web then Visual Studio 2012, then select ASP.NET Empty Web Application.

Now go to the properties page of the ASP.NET project you’ve already build, and from the left menu select Silverlight Applications. Then click Add button, and in the Add window, enter what you want as the project’s name.

Now it's time to prepare the SignalR server.

Preparing SignalR Server

Visual Studio made it easy to add assemblies and components needed to build a SignalR server. Just right click the ASP web project and Add > New Item... (Alternatively you can select Add > SignalR Hub Class (v2)). Now enter the class name something like ChatHub.

As you click Add button, you will see Visual Studio tries to download required libraries and scripts from nuget and adds them to your project.

Then you need to add a startup class that starts SignalR hubs hosted in your ASP application. To aim this just Add a New Item and select OWIN Startup Class (Alternatively, you can select Add > OWIN Startup Class).

Now you should produce some code. Change the Startup class like this:

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }

Then change the hatHub class as shown below:

    public class ChatHub : Hub
    {
        public void SendMessage(string name, string message)
        {
            Clients.All.received(name, message);
        }
    }

Creating Silverlight SignalR Client

Now it's time to create the client. I've inserted some controls into MainPage.xaml file in order to create a chat program. You may download the code and use it. Then you should add "Microsoft.AspNet.SignalR.Client" nuget package to your Silverlight project. This will add the capability of connecting a SignalR hub and transmitting data with it.

Now you can produce the code needed to connect to SignalR hub. To do this, I've handled "Loaded" event of the MainPage, and instantiated a new HubConnection like this:

    string serverUri = new Uri(HtmlPage.Document.DocumentUri, "/").ToString();
    connection = new HubConnection(serverUri, true);
    hub = connection.CreateHubProxy("ChatHub");
    hub.On<string, string="">("received",
        (name, message) =>
        {
            // something you want to do when something receives
        });
    connection.Start();</string,>

Now the client is connected to the SignalR hub, and also handles the "received" dynamic expression. So it's time to send something to the hub. To do this, I added this code to the send button's click event handler:

    hub.Invoke("SendMessage", txtName.Text, txtMessage.Text);

It's all you need to do to have a SignalR client in Silverlight. I also added some extra codes to enrich user experience of my Silverlight chat page.

Conclusion

As you saw, building a SignalR client in Silverlight is very simple and easy. Here, I will mention the steps again briefly:

Server

1. Add a SignalR hub class.
2. Add the methods you want to use by client-side in the hub class.
3. Add an OWIN startup class.

Client

1. Create a hub connection and a hub proxy.
2. Handle methods called by server which you want pass them to clients (This is the main purpose of using SignalR).
3. Call methods from hub class if required.