Understanding SignalR and some Knockout.js to do real time communication

In this post, I demonstrate how to create a simple SignalR application using SignalR open source library.  SignalR makes it easy to do real time asynchronous two way communication with server and client.

Open Visual Studio and hit Ctrl+Shift+N to create a new project and click on “ASP.NET Empty Web Application”.  I am using Visual Studio 2012 and .Net Framework 4.5.

Then we are going to install SignalR dlls using Nuget Package Manager.  Right click the project in solution explorer and click on Manage Nuget Packages as shown below.

Or hit Ctrl+Q and type “Nuget” in the quick launch box and click on the first one as shown below.

Hit Ctrl+E and Search for “SignalR” then Click on Install on the first one which is what we need.  Then again install lastest version of jQuery by doing the same thing because SignalR will bring down one or two minor version older.

Hit Ctrl+Shift+A on your keyboard to Add a new class named “myUtilHub.cs” to our solution and add the following code to it.

Add two using statements to add reference to SignalR and SignalR.Hubs and create a public method called sendMessage(). The add code that will talk to our clients will be through Clients class and a dynamic expression which should be a javascript function defined on the individual clients. If you mouseover talk you will see that it is a dynamic expression. The Clients class is available to you when you import SignalR namespace.

Ctrl+Shift+A and add javascript file named myUtil.js to solution and add this function in the extend method of myUtil.js.  The $.extend method of jquery will add properties to our util hub on the client side. You can add as many functions as you want. The server will be able to communicate with these methods via a dynamic expression.
Hit Ctrl+Shift+A and add html page named demo.html and add the following code to it. Now in this function you can get the data that was passed to us and render it inside the div tag of our demo.html.
Right click on demo.html in solution explorer and then click on setup as start page and hit F5 to run the application. You will start seeing the messages as shown below and if you open another browser and type type the same url you will see same output appear in real time.  In IE9 check the document mode, it should be to IE9 for this demo to work.

We can pass data to our sendMessage function like sendMessage("Hello world"); and on the server side we can change our function to accept values from clients like sendMessage(string myvalue).

You can pass .Net object to all clients  and we can access those objects properties in our client side JavaScript.  For example, if you want to pass a DateTime object and access its properties in client side JavaScript then you can do that too.  Change the code of sendMessage() function in our myUtilHub.cs as follows:

In our talk function of hub inside myUtil.js file we will access performance counter's RawValue property to get % Processor Time.

All looks good but there is a problem here.  We don't want to keep scrolling for every new value so we would like to update the UI as the data comes in and I wanted to see if I could do this with the help of Knockout.js or not.  So here it goes.  First of all follow the step to add a Nuget package and then install "Knockout.js" package and add script reference to our demo.html add bindings to it.  Final demo.html
Now change myUtil.js to add ViewModel and add observable properties which will bind to the totalTime in html whenever any change is detected. I commented our all code to append something inside our div tag. Instead we are now using knockout.js to update the UI by passing in ViewModel. Now run the project and see the performance counter update in the browser in real time and this will work in all the browsers at the same time.