Click here to Skip to main content
Click here to Skip to main content

SignalR Simplified

, 3 May 2014
Rate this:
Please Sign up or sign in to vote.
SignalR demo

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Igor Vigdorchik
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionVery Good Articles PinmemberVineshPatel199011-Jul-14 20:32 
AnswerRe: Very Good Articles PinpremiumIgor Vigdorchik12-Jul-14 4:33 
SuggestionGot my 5... Pinmemberpl.26-May-14 2:56 
GeneralRe: Got my 5... PinpremiumIgor Vigdorchik6-May-14 6:54 
QuestionGood, but would be better Pinmemberkiquenet.com4-May-14 23:47 
AnswerRe: Good, but would be better PinpremiumIgor Vigdorchik5-May-14 7:54 
QuestionVery nice article ! PinpremiumVolynsky Alex3-May-14 21:35 
AnswerRe: Very nice article ! PinpremiumIgor Vigdorchik4-May-14 3:14 
GeneralRe: Very nice article ! PinpremiumVolynsky Alex4-May-14 21:09 
GeneralMy vote of 5 Pinmemberd47422-May-14 18:54 
GeneralRe: My vote of 5 PinpremiumIgor Vigdorchik3-May-14 3:11 
GeneralMy vote of 3 Pinpremiumphil.o1-May-14 2:00 
GeneralRe: My vote of 3 PinpremiumIgor Vigdorchik1-May-14 7:36 
Question[My vote of 2] Hm... PinprofessionalNicholas Marty30-Apr-14 21:16 
AnswerRe: [My vote of 2] Hm... PinpremiumIgor Vigdorchik1-May-14 7:35 
GeneralRe: [My vote of 2] Hm... PinmemberGustav Brock4-May-14 23:19 
QuestionVisual Studio 2013 PinmemberDewey30-Apr-14 14:43 
AnswerRe: Visual Studio 2013 PinpremiumIgor Vigdorchik30-Apr-14 15:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 4 May 2014
Article Copyright 2014 by Igor Vigdorchik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid