Real Time Computing for Every Day Tasks with ASP.NET SignalR

Very recently I had to repair the roof of the carport of my house due to water damage after months of neglect.  In order to take debris to the local recycling facility, and to ferry new construction materials home for the repairs I needed to rent a truck or large enough vehicle.  When I called the rental shop asking for a pickup truck for the next day the booking agent told me that there was one truck available for the next day - "I was in luck" - I thought, but while I was negotiating a two day rental the agent interrupted me and told me: "Actually sir, that truck is no longer available".  I had to wait for another 24 hours to have my truck.

Real Time With SignalR

What went wrong?  The state of the rental model changed and when I was notified I did not have enough clarity to tell the agent "I'll take it, I'll take it!" and instead decided to negotiate an extra day on the rental.  What would be the solution to this rental problem?  I could face the same problem the next day if I was not fast enough!  A real time system, pushing notifications to registered clients would help me make a better decision.

SignalR is a new Microsoft library; where its RC1 was released in December 2012.  This library makes it extremely simple to ASP.NET developers to add real-time web functionality to applications.  In a nutshell, this framework is a persistent connection abstraction over HTTP for .Net.  Using SignalR server side code is able to push content to connected clients instantly as it becomes available instead of having connected clients periodically poll information from the system.

SignalR works like a Hub system where connected or subscribed clients send data to the system and the system as a result of this sends data to all subscribed clients or group of clients.  The system also pushes notifications to clients as a result of an event raised by external sources.

What is SignalR

SignalR is a server-side framework to write push services.  It is composed of a set of server and client libraries to make push service communication easy and simple to use on any platform, and it has been optimized for asynchronous processing.

SignalR provides a light weight infrastructure to build HTTP light wight services. 

SignalR Programming Models

Two programming models are available:

• Persistent Connections
• Hubs

Persistent Connections offer a low level API similar to Socket Programming, however, the API provides semantics to Connect, Reconnect, broadcast to all clients, groups or individuals.  Persistent Connections offers great flexibility, however, programmers are responsible for sending and receiving the data.  

Hubs is a high level API which is built on top of Persistent Connections.  The way it works is very similar to RPC from client-server and server-client.  It is very simple to use and the framework generates automatically a client proxy (JavaScript) representing the server side methods that the client can call.  Hubs work like a controller in ASP.NET MVC but it is not a controller and it does not inherits from any controller abstraction.

SignalR has an excellent reach in terms of pushing data to different clients because the SignalR team has implemented a rigorous failover mechanism to be able to support different clients and technologies.  Here is how SignalR attempts to establish its communications depending on the environment and supported technology:

1. First it will try to connect using WebSockets which is a fairly new technology.  However, this technology needs to be supported by the environment (OS and clients).
2. If WebSockets fails, then it will try to use Server Sent Events.
3. If Server Sent Events fails, then it will try to use Forever Frame which uses a hidden IFrame.  For this example, launch IE debugging tools and under Networking we can see the Forever Frame at work.
4. If all of the above fails then Long Polling is used.  Long Polling opens a connection to the server and waits until data is available.  Once the data is available then it is polled and the client connects again waiting for data to be available again.

Independently of the API used, if the connection times out then SignalR will attempt to create the connection again.

Getting Started with SignalR

To get started you need to install at least five packages.  I have tried creating SignalR projects on Visual Studio 2010 Ultimate and on Visual Studio 2012 Express for Web.  In either case you can add the required packages using NuGet.

The sample project gives a quick flavor of how well this real time technology works.  The SignalR team at Microsoft is really doing a great job!

The packages that you need are:

1. Microsoft ASP.NET SignalR
2. Microsoft ASP.NET SignalR Web Components
3. Microsoft ASP.NET SignalR JavaScript Client
4. Microsoft ASP.NET SignalR Core Components
5. Microsoft ASP.NET SignalR OWIN

The SignalR team at Microsoft has worked very hard to make the experience of implementing real time push services for web solutions seem painless so in this way we can concentrate on building our business solutions.

The Rental Vehicle Problem with SignalR

This solution uses a Hub API implementation.  The structure of my project is depicted in this figure:

Note the SignalR JS library added.

 The Rent a Truck problem is a simplified rise problem where users are rising each other to get the resource they want.  Available rental vehicles are limited, therefore, the basic idea is first comes-first served.  What the Rent a Truck does for registered users is notify them about the current state of the available collection of rental vehicles when changes occur.

SignalR can be used to solve much more complex problems such as The Assignment Problem, which is the core of the algorithm use in auctions, so bidders do not need to be polling periodically "am I winning?...  am I winning?... oh, I lost!" and instead are notified when other bidders place a bid real time so they can react to that if they have more money in their pockets.

The Hub

The RentalShopHub class is defined in the above figure.  Note that this class derives from Hub and that the class is decorated with the attribue HubName.  This attribute is the name, rentalShop,  that clients are going to know the service by, and it will be used when making a connection.  

HubName is used by clients to connect to the hub.  The client uses a dynamically generated JavaScript proxy, hubs, which is sent to the client.

Also note in the hub class the void methods RentVehicle and ReturnAllRentals.  In the body of these methods there is a call to a function which is not implemented anywhere, rentalStatus,  which takes a RentalViewModel objact as a parameter.  This is a dynamic expression which is compiled on the fly and this is provided by the framework.  All I care at this point is that I want to return to the client a ViewModel object.

This is the client receiving a pushed notification from the server

Another method of interest, and the way it is handled from the client, is RentalsState, which takes no parameters and returns a ViewModel containing the state of the model of the system.

Note how this method is used from the client.  Keep in mind that SignalR has been optimized for asynchronous, therefore because this is all happening asynchronous we need to wait until rentasState is done.

SignalR has been optimized for asynchronous communication therefore the client needs to wait until this method is done before it does anything to the data sent to the client.  The above figure also gives a hint at the fact that we need to wait until the connection has been started before we handle the rest of the UI.

The Client

I am not going to dedicate time to the actual markup.  You can take a look at the HTML and CSS from the project download.  The client JavaScript is the interesting part.

Line 4 stands out.  This mysterious script src="/signalR/hubs" is a JavaScript proxy which is produced by SignalR so we can reference methods in the server through JavaScript.  This is the heart of the simplicity of SignalR.  If this solution was using SignalR Persistent Connections API then this proxy would not be provided and we would be responsible for creating and managing this duplex type of communication.  Just think that this is the JavaScript proxy which is promised by the framework and that it is send down the wire in the response to the first GET from the client.

Dynamically generated Hubs.  This JavaScript proxy is provided by SignalR only when using the Hub high level API

Initially ignore from line 22 to line 41, the story does not start there.  The initial magic is between line 44 and line 80.  On Line 11 the connection object is created using the SignalR library and on Line 44 the connection is started.  Note that we need to wait until the connection has started before anything else is done.

Once the conneciton has been created successfully the client invokes the server method on Line 47 to get the initial state of the system.

This is what we see in the browser debugger.  Not that every time you hit F5 to refresh the page a new connection is created with a different connection Id.

Note the Forever Frame being used as the type of transport for the connection.  My computer is running Win7 Pro which does not support the use of WebSockets.  This is part of the SignalR failback mechanism in action.  Thank you SignalR Team!  You are a bunch of Batmans!

Now redirect your attention to line 72.  In this block the rent button click event has been handled.  Note how the client is calling the server method rentVehicle passing the value of the checked radio button.  On teh server, inside of RentVehicle the server  notifies all connected clients the current rental status (see line 40 of the Hub above).

Register the Default Hubs Route

SignalR will not work if the route is not set.  The following piece of code will get it up and running.  Even if you implemented other hubs in your solution, this code is the default medicine and your solutions will work.  Note that I have two SignalR hubs in my project; a Chat using Hubs (when I was learning socket programming it was uncool not to develop one's own chat), and the Rent a Truck hub.

If something frails, if you get strange errors during negotiation the transport, or anything then write a comment bellow and we will try to troubleshoot it together.

Conclusion

SingalR is a new framework created by Microsoft which allows ASP.NET developers add real time functionality to their applications.  Using this framework and using its Hub high level API and in a few lines of code, a simple real time push notification solution was created to resolve the Rent a Truck (select a resource) problem.

What is Next

My interest now resides in researching how external events can trigger a notification push to registered clients using SignalR.  The particular scenario could be described as follows:  the push service would be observing changes in a database and when the change takes place then registered clients (connected clients) are notified of the change using SignalR

The project

The project which is available for download was created using Visual Studio 2012 Express for Web.  I created this article while listening to "The Dark Knight Rises" OST by Hanz Zimmer.  Wicket!  

To run the solutions unzip and build the project (Visual Studio Express 2012 for Web) and expand any of the hub folders (RentaTruck or ChatHub), then right click on the index file and select to View in Browser. then launch other browsers (Chrome, Firefox, Opera) and paste the url of the running SignalR and go at it.

Its is easy...  build your own real time SignalR solution and brag about it.

The Drawings

I drew all images by hand and scanned them, which I thought was pretty cool!  I used to be pretty good at drawing when I was a child... long time ago... yes, I was a child once.  I remember that after I watched the film "Spartacus" 1960, with Kirk Douglas, and "Helen of Troy" 1956, I used to spend countless hours drawing epic battles between Roman and Greek soldiers...  those were the good days!  Today I see the cycle starting again in my children.  I love them!

References

1. SignalR http://www.asp.net/signalr
2. SignalR GitHub Samples:  https://github.com/SignalR/Samples
3. Quick Starts:  https://github.com/SignalR/SignalR/wiki/QuickStart-Hubs
4. Quick Starts:  https://github.com/SignalR/SignalR/wiki/QuickStart-Persistent-Connections
5. SignalR Security: http://www.asp.net/signalr/overview/security/introduction-to-security
6. http://www.asp.net/signalr/overview/security/hub-authorization
7. http://www.asp.net/signalr/overview/security/persistent-connection-authorization

Client Side MVVM with KnockoutJS and BackboneJS: Which one should I use in my project? Part II Solution Details

In Part I Define a Selection Process the selection criteria was established.  This release attempts to use KnockoutJS and BackboneJS under the same scenario to carry out the evaluation.  The project used was created using Visual Studio 2012 Express for Web.  No database is required for this test.  This project can be downloaded at the end of this article.

The Application

The application displays a collection of products and it allows the client to update and create a product.

When the browser requests the URL of the site the client gets a collection of products from the server.  The client can also get a product for a valid product id.  When the product is updated, or put to the server with updates, the product collection is also refreshed to show the new change.  Inside of the "Add New Product" tab a new product can be posted and this change also refreshes the product collection with the new item added.

In the MVVM pattern the ViewModel is driving all this logic and  behavior of the application.  The view binds to properties of this ViewModel which in turns exposes data obtained from the Model (server side) entities.

Two solutions will implement the scenarios described above.  One implementation will use KnockoutJS and the second one BackboneJS.

The Knockout Solution

The view need to display the collection of products and for this it uses a table HTML element.  The body of the table is bound to a an observable collection in the ViewModel shown later.

Pay attention to lines 13 to 21.  The code is telling knockout that a property of the ViewModel named "products" is bound to a foreach loop which in turn copies the section of markup for each element of the collection, in this case each product.

The following ViewModel, when instantiated, loads the collection of products from the server with a GET. Thus far, we are not able to change anything because the product properties are binding to TEXT in the markup.  Executing code like that would get us the products from the server and the grid view displays.  Not much, but we are on our way.

The code above is self explanatory.  It shows that the ViewModel contains a ProductViewModel with properties of the Product (Id, Name, Category, and Weight) and it contains two observable objects: a knockout ObservableArray and a knockout Observable product.

Details Section

The Details section contains two tabs: one to search/Display/Update a product and the other to create a new one.  To GET a product by its ID the get button is bound to "getById" function of the ViewModel.  Note that "if" a product is returned then the "if binding" displays the section of markup corresponding to the product in the ViewModel.  Note that "product" is used as if a function was being called.

Note the the "click" events of the buttons to GET and PUT, fetch and update respectively, are bound to the "getById" and "update" ViewModel functions respectively.

Get Product By Id

Put Product (update)

Note that line 16 indicates that ajax will send a PUT.  We could have used a POST to update the product however that would be using the wrong HTTP verb for the update.  Note that inside the ajax success handler , Line 20, there is call to "getAll()".  This ViewModel function is responsible for updating the products collection after a successful update and by Knockout magic the product grid is updated.

Get All

this function removes all member of the collection and get them again with $.getJSON and populates the observable array and because the table body is "observing" this collection then Knockout refreshes the table body.

Create a New Product

The html markup content of the create new product tab shown above is simple.  Note that the "Add New" product button is bound to the "create" method of the ViewModel.

The code of the create new product function is straight forward.  However, note that Line 19 above is not doing a GET to update the ObservableArray products but instead it updates the collection and by doing this the collection also notifies the grid view, the table, that it needs updating and Knockout renders the table again. 

How is Everything Started in the Knockout Solution?

The magic kicks in by instantiating the ViewModel and applying the Knockout bindings on this ViewModel. Easy?

The Backbone Solution

A bit of a confession; I started this project in order to learn BackboneJS and with a bit more exposure to the KnockoutJS framework.  This means that what I am sharing with you is in a bit of disadvantage vs the Knockout solution and this might influence my decision when grading the level of difficulty between the two implementations.

While the Knockout implementation was very straight forward the Backbone implementation forced me to pick up a pencil and design my views and models.  This solution might change later on but this is what I came up with first go.  The design went thought some growing pains because I wanted to use the Backbone framework as much as I could and not have markup on the page that was not handled by Backbone.

There are differences on how these framework deal with HTTP verbs and how the Model, the back end entity, is created, updated or deleted.  The Knockout solution explicitly implemented the GET with $.getJSON and POST/PUT using $.ajax by sending the respective request type.  Backbone is a bit more refined in this sense and implements this mechanism for us and hides it in the lib.  However, this has its cons.  This means that someone who know jQuery and JavaScript opens a Backbone solution implementation and it turns difficult to know what is going on first view.

Framework Classes

Backbone has six main classes:

• Backbone.Model
• Backbone.Collection (also a Model)
• Backbone.View
• Backbone.Events
• Backbone.Router
• Backbone.History

In this research we are creating objects of the type Model, Collection and View by extending the Backbone classes Model, Collection and View  respectively.  

The Product Model

As for the Knockout solution, for this solution a Product model is also required.  

Important to note how properties of the model are created.  the defaults function is executed as soon as the model is instanciated.  This is one way to set these properties.  Properties can also be added to the model by using "setters" , so we could also write:

It is very important to note Line 9, of our Product Model the Model.url.  This is where Backbone is going to GET the resource from when we pass the id to this URL when the model is fetched with Model.fetch().  Model.fecth() delegates to Backbone.sync to save or read the model from the server.  Fetch uses by default jQuery.ajax to do the RESTful JSON request, just like Knockout with the difference that Backbone "hides" this from the user; one needs to know this magic trick.

The Product Collection Model

The model property of the collection indicates to Backbone the type that the collection contains, in this case a Product Model.  Note the URL of the collection model.  This is the URL used by Backbone for the RESTful JSON request PUT/POST when the client calls save() on the Product is not new when we are updating or is new when we are posting a new one.

The Backbone Views

The Views identified for this test application are depicted in the following image:

In the above image the Grid View is the same
although it was drown twice.  So, this application
has 4 Views

There one view which is not depicted in the image and this is the View of a Product row in the GridView; so this means that a View can be a container for other views.

The Grid View

For the grid view the solution uses templates.  Backbone can display views without using templates however are more maintainable, can be reused, etc.



Note the template inside of the script tag starting on line 17 above.  Note the syntax required by UnderscoreJS, the template engine used by BackboneJS.  Note that the template markup is not wrapped by a tr tag.  The view object will "fix" this.  In order to build the grid view we need two views:  a Product row view and the collection view.  The template use to build the grid view indicates that the grid view is rather passive and it only displays, like in the Knockout solution, the collection of products when the page is loaded and when the collection model changes.



Things to note from the above extended views: tagName, Initilialize, and render.  Starting with RowView; tagName is the view wrapping tag.  If we the view definition does not provide one then Backbone defaults the value of the DOM element el ($el is the cashed jQuery el) to a "div" tag.  This explains the need for a "tr" element for a RowView.  The initialize function is the constructor of the Backbone View.  Models (Model and Collection) also have a constructor.  For RowView Line 18 is setting the template of the view to the template which is in the markup, and this is the UnderscodeJS at work.

The view is displayed when render is called.

For the TableView, pay attention to the constructor (initialize) and note that the view is registering itself to listen to events on its model such as "sync" and "change".  The render method of TableView iterates through the collection of models, these are the products, and renders each one of them.

With what we have we could display already the GridView this way:



Line 20 created the ViewModel of the view which is injected in the constructor in line 21.  Line 22 fetches the products from the server  with a GET using the ProductsList URL and because the View is registered to the "sync" event on the collection, when the event is fired Backbone indicating that the model has been synchronized then the view renders.

This is a taste on how BackboneJS works.

Search and Details/Update View

The details/update view is very simple and it also uses a template.  I will omit that part.  The ViewModels of these views are a bit more interesting and are using a composite model, DetailsViewModel, which contains two model properties:  a Product and ProductsList.  The ProductsList property is to be a reference to the same model created to construct the GridView.  The intention is to call fetch() on the grid ViewModel after a product has been successfully updated in the details view.



On DetailsView note that in the constructor/initialize function the View register to the "sync" event on productGetModel property of the model to render itself.  Something new we see is that we can wire events of the view to methods handlers of interest.  Note that when an input field is updated the Product model is updated along with the "id" of the model.  This is critical so BackboneJS knows that the model is "dirty", isNew() returns false, and it needs to be updated with a PUT.  Something new in this View appears inside of the "saveProduct" function, Line 40, where the product is saved with a PUT (because the model is dirty).  Note that on the success of the save, Line 51, the reference to the ViewModel of the products table, gridVewModel, is fetched from the server and as a consequence the table refreshes.

The SearchView sets the id of the Product and it fetches the product.  The section of code shows that SearchView and DetailsView are using the same ViewModel.  Maybe this is telling me that the SearchView and DetaillsView should be merged.

Creating a New Product

What is interesting and new in the code above is the "adding to the collection model using add".  Because add on the collection is changing the model a "sync" is fired and as a result the gridView refreshes like magic.  Note that this add is local and it is added to the gridVew ViewModel on a save-success on the product.  The product save success callback is passing the new product with its Id.

How is the entire thing started in the BackboneJS solution?

WEB API Controller Endpoint

ASP.NET Web API framework makes it very easy to create HTTP Services to create RESTful applications.  The magic of this type of application is that RESTful services can be consumed by a wide range of clients and devices; it could be smartphone, tablet, a browser, a cashier at your favorite clothing store, etc.

The Web API end point deals with client HTTP requests using verbs such as GET, POST, PUT, DELETE then the Web API end point sends the response which can be JSON or XML.  By default the response returned by the endpoint is in JSON format but the framework can return other formats depending on the format type requested by the client.

The end point controller is borrowed from Mike Wasson tutorials (http://www.asp.net/web-api/overview/creating-web-apis/creating-a-web-api-that-supports-crud-operations).  Read this tutorial to get you started.  You can also examine the controller and other server side classes by downloading the project used for this research.

When examining the endpoint note that the controller inherits from ApiContoller and that the respective actions are returning a Product or an IEnumerable.  This is awsome!  Here is where the framework starts to do lots of good things for us, such as serializing a Product or collection to the response when the respective action returns.

Web API Routing in WebApiConfig

Something else you need to note is that routing is no longer in Global.asxa but in WebApiConfig class located in the App_Start directory.  We could change all this but I rather keep the defaults new settings.

This project was created using Visual Studio 2012 Express for Web and it is a little more than 4 MB as a zip file.  This file has been uploaded to my DropBox drive.

Part III Final Conclusion

This installment is already too long and I might have lost some readers along the way, so the discussion as to which framework should I use to build a client for my ASP.NET MVC Web API solution is going to be in a separate section.  

References

1. MSDN ASP.NET Web API: http://msdn.microsoft.com/en-us/library/hh833994(v=vs.108).aspx
2. KnockoutJS Documentation:  http://knockoutjs.com/
3. Learn KnockoutJS:  http://learn.knockoutjs.com/
4. Avoiding Common Backbone.js Pitfalls: Interesting paper about common errors while working with this frame work.  http://ozkatz.github.io/avoiding-common-backbonejs-pitfalls.html