Learning ASP.NET Signal R – Part 2

This is second post in the series on ASP.NET SignalR. You can access first post from the following link

Learning ASP.NET SignalR – Part 1

In this post, we’ll examine, How SignalR works on various environments. We’ll try dig it out with the help of an example.

First let me know, when you require real time update your UI?
A chat application?

Right. But it’s not the chat application only, you can use it at many other scenarios like any real time data requirement, collaborative applications, Real time loggers, Real Time dashboards, Games, Stock market, Real time news, Live match feeds etc… and many more.

But for this analysis, we’ll use chat application. And will discuss other scenarios in my next post.

So let’s create an chat sample application.

Let me tell you my environment. I am using VS2012 Pro for this development and my OS is Windows 8.

So to create a simple chat application. Start  File -> New Project-> ASP.NET Empty Web Applications and say name it SignalRChat

Now Tools -> Library Package Manager ->Package Manager Console.

A console will be opened and put the following command

install-package Microsoft.AspNet.SignalR

and Press enter. Wait for few seconds, it will install the SignalR and will download all the required libraries in your project. Add Global.asax in your project and add the following line in your Application_Start() method


This is required to add the default hub route and it will be added at Client side. Now lets add a class say named ChatHub which implements Hub Class and it is available under the namespace Microsoft.AspNet.SignalR . Now add a method as

 public void Distribute(string name, string message)
            // Call the broadcastMessage method to update all clients.
            Clients.All.broadcastMessage(name, message);

Now it’s time add an HTML page. Let’s add Chat.htm. On this page add the following scripts and hub class

  <script src="/Scripts/jquery-1.8.2.min.js" ></script>
  <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
  <script src="/signalr/hubs"></script>

Update the the version of the scripts file that is available in your solution. Now add the following javascript code in your HTML file,

  <script type="text/javascript">
         $(function () {
             // Declare a proxy to reference the hub.
             var chat = $.connection.chatHub;
             // Create a function that the hub can call to broadcast messages.
             chat.client.broadcastMessage = function (name, message) {
                 // Html encode display name and message.
                 var encodedName = $('<div />').text(name).html();
                 var encodedMsg = $('<div />').text(message).html();
                 // Add the message to the page.
                 $('#discussion').append('<li><strong>' + encodedName
                     + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
             // Get the user name and store it to prepend to messages.
             $('#displayname').val(prompt('Enter your name:', ''));
             // Set initial focus to message input box.
             // Start the connection.
             $.connection.hub.start().done(function () {
                 $('#sendmessage').click(function () {
                     // Call the Send method on the hub.
                     chat.server.distribute($('#displayname').val(), $('#message').val());
                     // Clear text box and reset focus for next comment.

If you see the above script, first it creates the reference of HUB Class. This is actually, required to perform all the steps. It adds a method which receives the chat message.  It receives the message at run time and update the UI accordingly. And It also adds a event on the send button and call the distribute method on the server to broadcast the message. One thing, you keep in mind that it has a check whether the HUB is started or not. And Click event of Send button will be fired only if HUB is ready or it is ready to accept the request. Also we require to add some HTML Controls. It could be as

  <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">

So now the code is ready to start. Let’s run the code. Now You’ll be prompt to put name and you can open the same URL on some other browser and starts chatting amongst browsers. So your code is running.

So this is a very simple application of Application. So now I’ll try to run the same application in different environment. Current browser is Firefox19 on windows 8. Let’s visit firebug net tab


Now if you see the the above first red marked encircled area, there is a negotiation request sent to the server to negotiate the protocol that will be used. Again if you see the next encircled area where it is written transport=websockets  and also a connectionToken is there. It means websockets is supported and it is used here.

Now I am going to run the same application on different environment that has OS WinXP SP3 and IE8. So let’s run, now when see this


Now if you see here red encircled area, here the transport is foreverFrame. And when I ran this it was working as similar as I ran on Win8 and FF19 it was transport=websockets. Here also you can see the page is getting refreshed.

Now I will show it you on another browser on the winXp3 machine


So here if see here the encircled area and here is the transport is serverSentEvents.

You can see here, as I discussed in my first post in this series, that according to the supported technologies appropriate one is selected  based on the order that was pictorially shown and discussed.

So the whole Idea, in this post to explain you that SignalR provides complete abstraction over technology and you need to use the similar simple API to work on it. You don’t need to care about the underneath technologies and environment.

Now in my next post, I’ll discuss various scenarios, where you can use this technology and make best use of it.

So hope, you must have enjoyed this post a lot.


2 thoughts on “Learning ASP.NET Signal R – Part 2

    • When you click on send button, it calls the distribute method of the HUB (which is written at server side). Now if I understand your question correctly, if you want to do some more actions on server side on click your button, then one way could be you can initiate some jQuery Ajax call if that cannot be achieved via HUB class.
      Does that answers your question OR I understood wrong?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s