Dan's Green Shoes

Got my green shoes on!

clip_image010_thumb.jpg

SignalR with Silverlight 5

4 Comments

SignalR is truly an amazing API. It’s ridiculously easy to use. The majority of SignalR client examples that I see on the web are for HTML/JS or WPF. There are examples for Silverlight but for older version of SignalR and Silverlight. What I was hoping to find was a step by step example using VS2k12, SL5 and latest greatest Nuget Packages. Since I could not find one, I thought I would create one and share. This step by step was highly inspired by the samples found here:

https://github.com/SignalR/SignalR/tree/master/samples

Setting up the Solution

Recommend you download the code and follow along. In Visual Studio 2012, create a new Silverlight 5 application called “SilverlightClientSignalR” as seen below.

clip_image002

clip_image003

This will create 2 projects, SilverlightClientSignalR.Web and SilverlightClientSignalR. Add the following Nuget packages to each project.

Project Name Nuget Package
SilverlightClientSignalR 1. Microsoft.ASP.NET SignalR .NET Client

2. Async for .NET Framework 4, Silverlight 4 and 5…

SilverlightClientSignalR.Web

Add a new ASP.NET MVC 4 Web Application. I used the Basic template.

clip_image005

clip_image006

SignalR Server Preparation

Add a new folder to the HubWeb project called “Hubs”. Inside that folder, add a new item and choose SignalR Hub Class as seen below. Name it TestHub.cs.

clip_image008

Nice feature of adding a new SignalR Hub class is the necessary SignalR packages are automatically added to your references as well. Modify the code to look like this:

clip_image010

We need to tell the ASP.NET routing system how to find the hubs. In Global.asax.cs, add the following code:

clip_image012

Since we need a Silverlight client to be able to call into the SignalR Hub service, we need to add a clientaccesspolicy.xml file to the HubWeb project to enable cross domain communication.

At this point, if you run the solution and type in http://localhost:{yourport#}/signalr/hubs, you should see the automatically created hubs.js file.

Silverlight Client SignalR Preparation

First, let’s add a button and TextBox named “Messages” to MainPage.xaml as seen below.

clip_image014

In the code behind for MainPage.xaml.cs, add the following code:

clip_image016

Add SignalRClient helper class to the Silverlight project.

clip_image018

The “RunAsync” method is the key to connecting your Silverlight client to the SignalR server. The minimum requirements to hook up a Silverlight client is to:

1. Instantiate a HubConnection passing in the URL of the SignalR server and calling Start.

2. For each server Hub, create a HubProxy to be able to receive and call messages.

Running the Code

Download the code here. Run the code and you should see the MainPage Silverlight page receiving messages from the SignalR server. To see the value of SignalR, copy and paste the URL into multiple tabs across multiple browsers. Take note that when you push a button, all the other tabs receive the message in near time. Silverlight clients talking to each other in real time, pretty cool eh?

clip_image020

About these ads

Author: Dan Hickman

Chief Technology Officer ProModel Corporation

4 thoughts on “SignalR with Silverlight 5

  1. Thanks so much for posting this!

  2. Hi, Have you tried capturing onDisconnected with HubConnection.Stop() during Silverlight App_Exit ? It is blocking the UI. Is there any workaround for this?

  3. MapHubs extension method does not seams to accept HubConfiguration. I am running on 4.0 Is there any otherway around?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 447 other followers