Tutorial versions

Questions and comments

Please leave feedback on how you liked this
tutorial and what we could improve in the comments at the bottom of the page. If you have questions that are not directly related to the tutorial, you can post them to the
ASP.NET SignalR forum
or StackOverflow.com.

Overview

This tutorial introduces SignalR development by showing how to build a simple browser-based chat application. You will add the SignalR library to an empty ASP.NET
web application, create a hub class for sending messages to clients, and create an HTML page that lets users send and receive chat messages.
For a similar tutorial that shows how to create a chat application in MVC 5 using an MVC view, see
Getting Started with SignalR 2 and MVC 5.

SignalR is an open-source .NET library for building web applications that require live user interaction or
real-time data updates. Examples include social applications, multiuser games, business collaboration,
and news, weather, or financial update applications. These are often called real-time applications.

SignalR simplifies the process of building real-time applications. It includes an ASP.NET server
library and a JavaScript client library to make it easier to manage client-server connections and
push content updates to clients. You can add the SignalR library to an existing ASP.NET application
to gain real-time functionality.

The tutorial demonstrates the following SignalR development tasks:

Adding the SignalR library to an ASP.NET web application.

Creating a hub class to push content to clients.

Creating an OWIN startup class to configure the application.

Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

The following screen shot shows the chat application running in a browser. Each new user can post comments and see comments added after the user joins the chat.

Set up the Project

This section shows how to use Visual Studio 2013 and SignalR version 2 to create an empty ASP.NET web application, add SignalR, and create the chat application.

Prerequisites:

Visual Studio 2013. If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio 2013 Express Development Tool.

The following steps use Visual Studio 2013 to create an ASP.NET Empty Web Application and add the SignalR library:

In Visual Studio, create an ASP.NET Web Application.

In the New ASP.NET Project window, leave Empty selected and click Create Project.

In Solution Explorer, right-click the project, select Add | SignalR Hub Class (v2).
Name the class ChatHub.cs and add it to the project. This step creates the
ChatHub class and adds to the project a set of script files and assembly references that support SignalR.

Note: You can also add SignalR to a project by opening the Tools | Library Package Manager | Package Manager Console
and running a command:

install-package Microsoft.AspNet.SignalR

If you use the console to add SignalR, create the SignalR
hub class as a separate step after you add SignalR.

Note: If you are using Visual Studio 2012, the SignalR Hub Class (v2) template will not be available. You can add a plain Class
called ChatHub instead.

In Solution Explorer, expand the Scripts node. Script libraries for jQuery and SignalR are visible in the project.

In Solution Explorer, right-click the project, then click Add | HTML Page. Name the new page index.html.

In Solution Explorer, right-click the HTML page you just created and click Set as Start Page.

Replace the default code in the HTML page with the following code.

Note: A later version of the SignalR scripts may be installed by the package manager. Verify that the script references below correspond to
the versions of the script files in the project (they will be different if you added SignalR using NuGet rather than adding a hub.)

Run the Sample

Press F5 to run the project in debug mode. The HTML page loads in a browser instance and prompts for a user name.

Enter a user name.

Copy the URL from the address line of the browser and use it to open two more browser instances. In each browser instance, enter a unique user name.

In each browser instance, add a comment and click Send. The comments should display in all browser instances.

Note: This simple chat application does not maintain the discussion context on the server. The hub broadcasts comments to all current users. Users who join the
chat later will see messages added from the time they join.

The following screen shot shows the chat application running in three browser instances, all of which are updated when one instance sends a message:

In Solution Explorer, inspect the Script Documents node for the running application. There is a script file
named hubs that the SignalR library dynamically generates at runtime. This file manages the communication between jQuery script
and server-side code.

Examine the Code

The SignalR chat application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and
receive messages.

SignalR Hubs

In the code sample the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Deriving from the Hub class is a useful way to build
a SignalR application. You can create public methods on your hub class and then access those methods by calling them from scripts in a web page.

In the chat code, clients call the ChatHub.Send method to send a new message. The hub in turn sends the message to all clients by calling
Clients.All.broadcastMessage.

The Send method demonstrates several hub concepts :

Declare public methods on a hub so that clients can call them.

Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to access all clients connected to this hub.

Call a function on the client (such as the broadcastMessage function) to update clients.

SignalR and jQuery

The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. The essential tasks in the code are declaring a proxy to reference the hub,
declaring a function that the server can call to push content to clients, and starting a connection to send messages to the hub.

The following code declares a reference to a hub proxy.

var chat = $.connection.chatHub;

Note: In JavaScript the reference to the server class and its members is in camel case. The code sample references the C# ChatHub class in JavaScript
as chatHub.

The following code is how you create a callback function in the script. The hub class on the server calls this function to push content updates to each client. The two lines that HTML encode
the content before displaying it are optional and show a simple way to prevent script injection.

Next Steps

You learned that SignalR is a framework for building real-time web applications. You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to
create a hub class, and how to send and receive messages from the hub.

Installs powered by the Microsoft Web Platform Installer

The product(s) you are about to install leverage the Web Platform Installer (WebPI) for installation. By downloading and using the Web Platform Installer (WebPI), you agree to the license terms and privacy statement for WebPI. This installer will contact Microsoft over the Internet to retrieve product information. WebPI uses the Microsoft Customer Experience Improvement Program (CEIP), which is turned on by default, see privacy statement for more information. Some of the Microsoft software obtained through WebPI may use CEIP. To view which software uses CEIP, see here.