SignalR Hub demo site

I needed a solution to broadcast real-time data from a webserver to either a desktop or webclient. SignalR is perfect for this. I’ve uploaded a simple working demo for SignalR using the hub strategy. This is what you’d typically use in a broadcast type of system. This could be a chat or stock-market quotes client. The system needs to send information for any user who’s subscribed.

For this example, I created a simple server timer thread which updates both a web page and console window.  Both clients are updated by “push” notifications from the server.

The same libraries are used for both desktop web clients. This makes implementation maintainable. In addition, the integration with ASP.NET MVC4 allows for very rapid development.

There are quite a few steps involved to get SignalR Hubs working the first time if you’re using ASP.NET MVC4.

The entire working solution can be downloaded here:

SignalRDemo

Use NuGet and add the SignlaR package to your ASP.NET MVC4 project

In the Solution Explorer, right click on your ASP.NET MVC4 project and select Manage NuGet Packages. Search for SignalR. Select the top package as shown.

SignalR NuGet Install

Subclass Hub and create your logic

I created a folder for my Hubs in the ASP.NET MVC4 project.  The code is very simple.  If a client subscribes to the “addMessage” signal, they will receive the message each time the timer elapses.  I also have a StartTimer method to demonstrate that a client can send controlling messages to the server.

    public class TimeQuery : Hub
    {
        static string messageToSend = DateTime.Now.ToString();
        Timer t = new Timer(500);

        public void StartTimer()
        {
            t.Elapsed +=t_Elapsed;
            t.Start();
        }

        private void t_Elapsed(object sender, ElapsedEventArgs e)
        {
            Clients.All.addMessage("Date time  : " + messageToSend);
            messageToSend = DateTime.Now.ToString();
        }
    }

Update BungleConfigs.cs to include the SignalR scripts

You must the new SignalR scripts to the site.

            bundles.Add(new ScriptBundle("~/bundles/jquerySignalR")
                .Include("~/Scripts/jquery.signalR*"));

Add the auto-generated SignalR hubs scripts to the layout

In _Layout.cshtml, I render the SignalR scripts and the hubs scripts.  I also add my custom demo js which is covered next.

    @Scripts.Render("~/bundles/jquerySignalR")
    <script src="~/signalr/hubs" type="text/javascript"></script>
    <script src="~/Scripts/SignalRDemo.js" type="text/javascript"></script>

Create a JavaScript file to connect/respond to the server

This is very simple. I create a connection to the TimeQuery hub and subscribe to any “addMessage” signals.  Then I start hub listener.  Once the hub listener connection is made, I start the timer.

$(function () {
    var timeQuery = $.connection.timeQuery;

    // Declare a function on the chat hub so the server can invoke it          
    timeQuery.client.addMessage = function (message) {
        $('#messages').empty();
        $('#messages').append('<li>' + message + '</li>');
    };

    // Start the connection
    $.connection.hub.start().done(function() {
        timeQuery.server.startTimer();
    });
});

Looking at the result

Take a look at the project.  When you run the example, you’ll find the server timer starts and the web page is updated by the server.  Take a look at the network traffic.  Chrome only shows network traffic for setting up the connections for SignalR.  Monitoring my SignalR traffic is something I still need to look into.

DMCA.com Protection Status