In the world of software development there are a number of conferences that are offered each year and one of the most coveted of the year is Build. This year Microsoft hosted the Build conference on the Microsoft campus and as usual, rolled out the red carpet for the attendees. The focus this year was centered on Windows 8 and Windows Phone 8; however the hidden gem of this year’s conference for me was the introduction of SignalR.

An event like Build coupled with the release of both Windows 8 and Windows Phone 8, a release eagerly awaited by the development community, made the Build conference full of energy and anticipation. Build kicked off with the Day 1 Keynote given by Steve Ballmer. Steve went over how information touches all aspects in our lives and how the Windows 8 systems bring that information with the best experience and exposure possible. The 2nd Keynote on day two by Satya Nadella, President of Microsoft’s Server & Tools Business, dove into developers using Windows, exposing all the devices available to the new platform and then fulfilling it further with the cloud.

As with many conferences, opportunities to meet with vendors, compete in coding challenges, network with others, and attend in-depth sessions fills each day. Out of all the activities, one session stood out amongst everything for me. The session was presented by Damian Edwards on Building Real-Time Web Apps with ASP.Net SignalR.

Prior to Build, I had not heard of SignalR. SignalR is a new technology allowing for “real-time” web based functionality without having to do call-backs or polling like many solutions have had to do in the past. Call-backs and polling mechanisms caused unnecessary traffic and still didn’t achieve real-time communication. All of this compounded on unstable development and choppy, interactivity.

Demoing SignalR

To show how simple it is to utilize the SignalR functionality I will walk through a recreation of a demo Damian presented during his session. While the sample may not apply directly to the real world, it shows just how rapidly the functionality can be exposed with very little development needs by using SignalR. The sample that we will create will be a simplified web interface with an item within it and several other client interfaces with items in them as well. When the item within the primary interface is moved, by mouse, all secondary clients and items will move in synchrony. The movement will be identical in position and speed to the movements that are performed in the primary interface. This seamless reaction in the secondary clients is what makes this example so interesting.

To begin, create a new ASP.Net Empty Web Application (.Net Framework 4.5) project in Visual Studio 2012. Once the project has been created you will need to add the following NuGet packages to complete our sample:

  • jQuery
  • jQuery UI (Combined Library)
  • Microsoft ASP.NET SignalR (Note, you will have to select Include Prerelease in the Manage NuGet Packages dialog)

The Hub

Now that the project is setup we can begin writing our code. We will begin by adding a class which will act as the Hub for the SignalR communications. The Hub code is server side and will handle communications between the clients.

public class
MoveShapeHub: Microsoft.AspNet.SignalR.Hubs.Hub

{

}

Next we will create a public method called MoveShape. The MoveShape method accepts an x and y parameter indicating the position of the object.

public
void MoveShape(int x, int y)

{

Clients.Others.shapeMoved(x, y);

}

As you can see inside this method, we call the Clients.Others.shapeMoved and pass along the same parameters. The Clients.Others indicates that all connected clients who listen for the shapeMoved event, other than the one who called this method, will receive the notification.

Lastly, we will add a HubName attribute to the class which allows us to use a friendly name for our hub object in our clients. The HubName attribute is an optional step, and we will show how the HubName is used later in the code.

[HubName(“moveShape”)]

 

jQuery Script

Next we will create a jQuery script, MoveShape.js, which will complete the connection between the client and server hub.

First, we will add the appropriate jquery references:

/// <reference path=”jquery-1.8.2.js” />

/// <reference path=”jquery.signalR-1.0.0-alpha2.js” />

/// <reference path=”jquery-ui-1.9.0.js” />

 

Next, add a function to the constructor which will execute upon the body OnLoad event

$(function () {

});

Inside of that function we will define a couple of objects for use in our jQuery code.

  • hub – object that defines our connection to the SignalR hub object
  • $shape – the object in the html page that will affected by our actions and/or the actions of another client through the hub

    var hub = $.connection.moveShape,

$shape = $(“#shape”);

 

In the code above we see the name of our hub object referred to as moveShape. This is the name that was used in the HubName attribute. Had a HubName attribute not been added the code would have looked like the following:

    var hub = $.connection.MoveShapeHub,

 

Next, add the client side code to tell the jQuery code what to do when the hub returns a shapeMoved event. In our case we will simply update the css of the $shape object.

hub.client.shapeMoved = function (x, y) {

$shape.css({ left: x, top: y });

};

 

Lastly, add a call to start the connection and then a jQuery deferred function which will allow the object to be draggable by the user and to inform the hub when the user moves the object.

 

$.connection.hub.start().done(function () {

$shape.draggable({

drag: function () {

hub.server.moveShape(this.offsetLeft, this.offsetTop || 0);

}

});

});

 

Finally, create a simple index.html file which can be viewed in the client browser. Similar to the jQuery file we will need to add some script references as shown below:


<script
src=”Scripts/jquery-1.8.2.js”></script>


<script
src=”Scripts/jquery-ui-1.9.0.js”></script>


<script
src=”Scripts/jquery.signalR-1.0.0-alpha2.js”></script>


<script
src=”/signalr/hubs”></script>


<script
src=”Scripts/MoveShape.js”></script>

 

Next, define a div tag with the id of “shape” to match our jQuery file:


<div
id=”shape”></div>

 

Lastly, add some style elements for the div giving our object some basic attributes like height, width and color:


<style>


#shape {


width: 100px;


height: 100px;


background-color: blue;


cursor: move;

}


</style>

 

Pulling it all Together

At this point our coding efforts are compete. Build the project and view the page in a browser of your choice. At initial load, we should see a simple blue box in the top left corner of the browser window.

Now, as you can see below, we have opened several browser windows all showing our object in the same location. This was achieved by moving just one of the blocks, and the other blocks all moved synchronously in the other browser windows.

Summary

As we’ve seen with this simple but powerful example, it is extremely easy to create and consume real-time bi-directional communication within a web application. SignalR adds more value by not requiring the client to be a web application. This promotes the creation of the same communication abilities to be developed between WinForms, Windows8, and other client applications all of which are communicating with a SignalR Hub object. There is a NuGet sample package for SignalR which shows a stock ticker example as well and additional information can be found online at www.signalr.net. One last example worth a look is a real-time web hosting shooter game which can be found at http://shootr.signalr.net.

So while SignalR is still in a pre-release alpha state, the value and power already seen with it may very well hold the keys to a true revolution in real-time connected systems.