Realtime web application with SignalR

A couple of weeks back i got a task to develop a chat application for an existing application that we have. The idea was so that the existing members could chat with each other without requiring any external IM services such as YM, Skype or MSN messenger. Seems quite simple.. well let’s see about that.

I did some research on how would be the best way to do this, there are a couple of ways that I found:

  1. AJAXpolling
  2. Comet/ AJAX long polling
  3. HTML 5 Web Socket

AJAX Polling

Before AJAX, websites page where not as interactive as of now, imagine that you open your favorite news site and then you got a list of news up until that time displayed on the page, left the tab open for an hour, and if you go back to that tab and need to see if there’s any new news since you left you need to refresh the page. Well with AJAX, a JavaScript could run in the background firing every n minutes to check if there’s any new data and display, this approach is called AJAX polling.

Using this idea of AJAX polling, people start to experiment on creating a real-time apps for web application such as chat application. The drawback of it is because it check to the server every n seconds/minutes it will put the server under heavy load, and imagine that if you have hundreds or even thousand users using the chat application and each of them do a check on the server to see if there’s any new data.. it will be a nightmare.

Not to mention the bandwidth consumption that this approach uses, people that see the weakness of this approach then seek a better approach

Comet / AJAX long polling

It’s a method, improvement if you like, from learning the weakness of AJAX polling, the idea of Comet is the client browser maintain a persistent connection to the server, and instead of the client checks every n second/minutes to the server to check new data, the server itself will tell the clients if there any new data and sent it to them.

HTML 5 Web Socket

This is a new feature in HTML 5 to provide a real two way communication between server and client, we don’t need to any workaround such as AJAX polling or Comet to create real-time apps it will natively provided by the browser as a feature of HTML 5. So as long the client’s browser support it and the server also support it we all set to go.

Back to the chat application, after taking a look at the available approach it seems that Web Socket would be the way to do it.. however currently –at the time of writing- it’s not supported by IE 9, even though FF7 and Chrome 15 does support it the IIS doesn’t support the Web Socket protocol yet.. bummer. So it seems i at this point i could only use Comet to develop my chat application.

Here’s where SignalR come to action, SignalR is async signaling library for .NET to help build real time web application. It’s an open source library under MIT license that’s developed by Damian Edwards and David Fowler, folks from Microsoft. It’s very easy to use, here an example taken straight from the documentation page.


Go to NuGet and install the SignalR package into a WebApplication:

Install-Package SignalR


Create a class the derives from Hub:

public class Chat : Hub { public void Send(string message) { // Call the addMessage method on all clients Clients.addMessage(message); } }


Javascript + HTML
1 <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> 2 <script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script> 3 <script src="/signalr/hubs" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 // Proxy created on the fly 7 var chat = $; 8 9 // Declare a function on the chat hub so the server can invoke it 10 chat.addMessage = function(message) { 11 $('#messages').append('<li>' + message + '</li>'); 12 }; 13 14 $("#broadcast").click(function () { 15 // Call the chat method on the server 16 chat.send($('#msg').val()) 17 .done(function() { 18 console.log('Success!') 19 }) 20 .fail(function(e) { 21 console.warn(e); 22 }) 23 }); 24 25 // Start the connection 26 $.connection.hub.start(); 27 }); 28 </script> 29 30 <input type="text" id="msg" /> 31 <input type="button" id="broadcast" value="broadcast" /> 32 33 <ul id="messages"> 34 </ul>

If you didn’t notice, in the JavaScript code above it assign a click event handler to button with id broadcast which call a server method Send in Chat class.. and if we take a look at the Send method it will trigger the JavaScript addMessage() function for all connected clients. Pretty awesome isn’t it, this approach make it easy for client and server to communicate since they can call each other methods.If you run this code in multiple browsers and try it you will notice that if you press the broadcast button in one browser, then all the browser will all get the “Success!” message, a simple example of SignalR broadcast capability.

The other awesome thing about SignalR is that it will support Web Socket when IIS supports it, so at the moment i could just develop my chat application, and when IIS does support Web Socket, presumably on IIS 8 and .NET 4.5 i could just update the transport mechanism from Comet to Web Socket, and from what i read on the documentation page this could be done by just setting a single property, awesome !

Edit: Paul Batum has made a nice article of using Web Socket in Windows 8 developer preview with some example including chat.

The SignalR team hang out on, you’ll notice that it’s a chat application Smile, previously this chat app is meant to be an example for SignalR,  however with people keep adding new features into it, it slowly becomes a rich chat application, another good thing about open source. So if you want to know more about SignalR, download the source code at,  got any question or suggestion just go to their chat room, the nice folks there will help you.