Using SignalR for real time communication on the web

In a previous blog post I mentioned how exited I was about WebSockets and the future with real time duplex communication over the Internet. Unfortunately the current support for WebSockets, both on the client and on the server, is still somewhat limited making this a thing of the future. Does that mean we can do this yet? Not quite.

SignalR to the resque

Even if a pure Web Socket solution isn’t possible yet there are perfectly good alternatives. And the one I really like is SignalR as it allows for the same kind of application today. Check out a live demo of a simple chat application here.

So if SignalR works today does it mean it doesn’t use Web Sockets? Well it might or might not depending on the circumstances. SignalR actually provides an abstraction layer over the actual transport used. And depending on the client and sever capabilities it can use one or 4 different networking techniques

• WebSockets
• Server Send Events
• Forever frame
• Long polling

It just chooses the best solution that both the browser and server support.

SignalR is multi browser

I have create a simple chat page using SignalR and as you can see in the screenshot below it supports lots of browsers on different platforms, here I used desktop IE, Chrome and FireFox as wel as my iPad and Windows Phone 7. All of these just work with SignalR. Pretty good as Web Sockets would only work on Chrome and FireFox at the moment.

The client side code

The HTML markup required is really simple

<h2>

    SignalR Chat</h2>

<inputtype="text"id="txt"/>

<buttonid="btn">

    Submit</button>

<ulid='messages'>

</ul>

<scriptsrc='@Url.Content("~/Scripts/jquery.signalR-0.5.2.js")'>
   1:  
</script>
   1:  
   2:  
   3:<script src='@Url.Content("~/signalr/hubs")/'> 
</script>

$(function () {

var hub = $.connection.signalRChatHub;

    $.connection.hub.start();

    hub.ChatMessage = function (msg) {

        $('<li>').text(msg).prependTo('#messages');

    };

    $('#btn').click(function () {

var txt = $('#txt').val();

        hub.sendMessage(txt);

        $('#txt').val('').focus();

    });

});

The server parts

The server side implementation of SignalR is also quite nice. All I had to do is add the SignalR nuget package and create a class deriving from Hub.

publicclass SignalRChatHub : Hub

{

publicvoid SendMessage(string message)

    {

        Clients.ChatMessage("Echo " + message);

    }

}

The public SendMessage is automatically made available to JavaScript clients and the Clients property is a Dynamic object. Just call a method on Clients and it will fire on all connected JavaScript client. You can also just call back to the originating client using the Dynamic Caller property if you want to. And best of all this works perfectly fine with my budget shared hosing account.

Check out a live demo here.

Enjoy!