SignalR Simplified

• Download demo project - 4.5 MB

What is SignalR

• Real-time HTTP-based asynchronous persistent connection communication framework for ASP.NET applications
• Runs in all browsers that support JavaScript
• Can be self-hosted
• Provides a rich server and client side APIs set

SignalR makes it easy to build real-time multi-user connected applications.

The goal of this article is not to provide a detailed explanation of SignalR architecture and internals, but rather to help you to jump start writing SignalR applications.

There are 3 steps involved in writing SignalR applications:

• Add SignalR components either through the new Visual Studio template or the NuGet package.
• Write the server code in your preferred .NET language.
• Write the client code in HTML and JavaScript.

Add SignalR to the project

In Solution Explorer, right-click the project and select Manage NuGet Packages. Type SignalR in the search area, click Search and select Microsoft ASP.NET SignalR package. After you click Install a set of script files and assembly references that support SignalR will be added to the project.

Server Code

Startup Class

The server needs to know which URL to intercept and direct to SignalR. To do that, we add an OWIN startup class. Right-click your project in Solution Explorer, select Add and Owin Startup Class. By convention the name of the new class should be Startup but it's not required. A new class will be created for you and no more changes are required.

 
[assembly: OwinStartup(typeof(SignalRDemo.Startup))] 
 
public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        // Any connection or hub wire up and configuration should go here
        app.MapSignalR();
    }
}

Notice the assembly attribute. It will set the startup class to the Startup class in the SignalRDemo namespace.

Hub Class

Hubs are classes to implement push services in SignalR. They provide the abstraction on top of persistent connection and they are responsible for sending messages between server and client. Public methods defined in the hub are callable by the clients. Hub sends messages to clients by invoking client-side methods.

Also it detects and handles clients' connections.

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

Note that the Send() function defined on the server will be called by the client code.

Client Code

It connects HTML with JavaScript to send and receive data from the server.

Declare a proxy to reference the ChatHub (defined in the server code).

var chat = $.connection.chatHub;

Create a callback function in the script. The hub class on the server calls this function to push content updates to each client.

chat.client.broadcastMessage = function (name, message) {
    // Code the show the content pushed by the server
};

Call the Send method on the hub.

chat.server.send(name, message);

The last step is to start the connection and you're done.

$.connection.hub.start();

Demo Project

The demo project contains the complete code that implements the following SignalR models:

• Peer-to-peer - communications sent to clients are initiated by one of the clients
• Server broadcast - communications sent to clients are initiated by the server
• Group broadcast - sending a message to a group of users
• Calculate the number of clients connected to the server

The demo project was developed with Visual Studio 2013 and .NET framework 4.5.