Introduction to SignalR

Rohit Taralekar

Rate me:

4.73/5 (33 votes)

14 May 2013CPOL3 min read

162.1K

7.3K

This article gives you a basic idea about the new developer's API called SignalR.

Download source code - 4 MB

Introduction

This article gives you a basic idea about the new developer's API called "SignalR".

Background

In earlier ASP.NET applications, user refreshes a web page to see new data or a page uses "long polling" to retrieve new data, i.e., when new data arrives to server it will not be directly transmitted to all clients or specific clients, for that the user has to refresh the page, and the page will be updated.

For example, you can go to cricinfo.com, there you can see a page is refreshed for 1 or 2 seconds and many times you see the score is not updated. In such situations there is the need of the new Microsoft API called "SignalR".

What is SignalR

SignalR is a new developer's API provided for ASP.NET web applications, used to add "real time" web functionality to ASP.NET applications. "Real Time" web functionality is the ability to have server code to push contents to connected clients.

SignalR supports "server push" or "broadcasting" functionality. It handles connection management automatically. In classic HTTP connections for client-server communication connection is re-established for each request, but SignalR provides persistent connection between the client and the server. In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than request-response model today. SignalR is an open-source API, and is accessible through GitHub.

Where to use:

Chat room applications
Real-time monitoring applications
Job progress updates
Real time forms

You can see the use of SignalR for a chat room application in the following image:

In the above example as soon as user2 sends some message, it will be received by all other users.

API Details

SignalR provides two models for communication:

Persistent Connections

The Persistent Connection API gives developer direct access to the low level communication protocol that SignalR exposes. This API uses the format of the actual message sent that needs to be specified and if the developer prefers to work with messaging and dispatching model rather than a remote invocation.

Hubs:

It's a High Level API written over PersistentConnection. This API allows the client and server to call methods on each other directly. Hubs also allow you to pass strongly typed parameters to methods, enabling model binding.

Code

Steps:

Open Visual Studio 2010.
Create a new project, select ASP.NET Empty Web Application and name it 'ChatRoomApplication'.
Go to Tools and open Package Manager Console.
If you don't have a Nuget package manager console then download it. For that go to Tools-->Extension Manager, and in the Search textbox, enter 'NuGet Package Manager', and download it.
Open Package Manager console (Tools --> Library Package Manager --> Package Manager Console).
Give command 'Install-Package Microsoft.AspNet.SignalR'.
It will add references of SignalR DLLs to your application.
In Solution Explorer right click on ChatRoomApplication and add class "ChatHub". A ChatHub.cs file will be added.
Derive the ChatHub class from 'Hub'. It should look like:

public class ChatHub : Hub
{
}

Write method Send in the ChatHub class as:

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.sendMessage(name,message);
    }
}

Now add the Global.asax file to your application. And in the application_start event map your hub by RouteTable.Routes.MapHubs(). It should look like:

protected void Application_Start(object sender,EventArgs e)
{
    RouteTable.Routes.MapHubs();
}

Now add an ASPX page and name it default.aspx
Copy the following code in the <head></head> section:

JavaScript

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Proxy created on the fly          
        var chat = $.connection.chatHub;

        // Get the user name and store it to prepend to messages.
        $('#displayname').val(prompt('Enter your name:', ''));

        // Declare a function on the chat hub so the server can invoke it          
        chat.client.sendMessage = function (name, message) {
			var encodedName = $('<div />').text(name).html();
			var encodedMsg = $('<div />').text(message).html();
			$('#messages').append('<li>' + encodedName + 
			    ':  ' + encodedMsg + '</li>');
        };

        // Start the connection
        $.connection.hub.start().done(function () {
            $("#send").click(function () {
                // Call the chat method on the server
                chat.server.send($('#displayname').val(), $('#msg').val());
            });
        });
    });
</script>

Copy the following code into the <body> part:

XML

<div>
<input type="text" id="msg" />
<input type="button" id="send" value="Send" />
<input type="hidden" id="displayname" />
<ul id="messages">
</ul>
</div>

That's it, now run your application, open multiple instances of the browser and copy the same URL there...and type message in the text box, click on the Send button, and you can see the message will be displayed on all browsers.
For more information, look at the submitted code.

License

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

Written By

Rohit Taralekar

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

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