Friday 26 April 2013

Closer Look at SignalR

This post is in continuation to the previous SignalR Introduction Post here.
If you know what SignalR is and want to get into it, you can skip the above mentioned post and continue reading below.

Before we start digging into SignalR code, lets see a sample application from NuGet running on SignalR.

NOTE: Wondering what NuGet is? Refer to this wonderful NuGet Intro.
  • Open VS 2012.
  • Create a new asp.net 4.5 Empty Web Application.
  • In the solution explorer, right click on References and select Manage NuGet packages.
  • In the search box type "signalr sample" as shown below:


  • Click Install button on "Microsoft.AspNet.SignalR.Sample".
  • Accept the license. It will install the new SignalR sample stock ticker application.
  • Open the stockticker.html in two browser instances and click open market. 
  • You will see both instances of browser in sync while updating stocks after getting data from server.



 


This application is using websockets under the hood to push the data from server to client.
You can open the fiddler and monitor the traffic. Let me just see the logs that are coming in my fiddler:













Oops!

Fiddler says the application is using ServerSentEvents as the transport rather than websockets. If you remember we discussed (in previous blog) about this fallback option that SignalR will use in case WebSockets are not available as below:











But why is SignalR not using Web-sockets. Well the reason for that is Web-sockets are not natively supported in Win7.

Lets run this application on Windows 8 and see what happens. You will see fiddler will show transport as web-sockets. Great!










Now that we have seen SignalR working in a cool sample application (with actually using Websockets when available), its time to drill into the more details of how it works.

NOTE: Wondering what exactly are WebSockets? Refer to this wonderful Wiki link here. For those who already know just continue reading.

Lets see now what composes SignalR.
Complete SignalR code is divided into few NuGet packages.(What are NuGet Packages? Click to read...)

NOTE: NuGet Package: Everything necessary to install a library or tool is bundled into a package (a .nupkg file). A package includes files to copy to your project and a manifest file that describes the contents of the package and what needs to be done to add or remove the library.

I created a picture for high level package view as below:

















When you downloaded the clock ticker sample application above, NuGet actually pulled the Samples Package shown in above picture, from its repository along with all its dependencies (which in this case was the rest of the packages shown above in picture.)

To start with and for this blog post, we will just focus on the Core package. So, lets begin our Journey to the Core.


The Core SignalR Package

This package contains Microsoft.AspNet.SignalR.Core class library project which constitutes of several important classes responsible for building server side components needed to build SignalR endpoints.
The core revolves around Connections and Hubs. Lets first see what are these and how they are different from each other.

Connections: In SignalR connections is a low level API, for making RPC calls from server to client or client to server to send raw data. User is responsible to send and receive data and then frame that data into meaningful message. In the core package connections is represented by Microsoft.AspNet.SignalR.PersistentConnection class. It exposes SignalR service over the http.

For more details refer the git-hub PersistentConnection documentation here.

Hubs: Hubs on the other hand is easy to use high level API which is built on top of the Connections API. It enables you connect to the client from server and vice-verse with all the underlying connection plumbing being done by SignalR.

For more details refer the git-hub Hub documentation here.