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.

image

 

The client side code

The HTML markup required is really simple

<h2>


    SignalR Chat</h2>


<input type="text" id="txt" />


<button id="btn">


    Submit</button>


<ul id='messages'>


</ul>


 


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

 
The most important thing about the markup is the two script references at the bottom. The firsts, jquery.signalR-0.5.2.js, points to client side library that ships with SignalR. The second, /signalr/hubs, is a dynamically generated based on the server side Hub classes, see below.
 
The client side JavaScript is also quite simple.
 
$(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();


    });


});

 
Basically SignalR extends jQuery and add the connection property containing a property for each hub. Next we call start() to initialize the communication and start listening for the ChatMessage callback, this is the method being called on the server Clients property below. To send some data to the server we just call the sendMessage() function, the public function defined on the server side hub below.
 
 

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.

public class SignalRChatHub : Hub


{


    public void 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!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>