AspNetCore.Docs/aspnetcore/signalr/get-started-signalr-core.md

title	author	description	manager	ms.author	ms.custom	ms.date	ms.prod	ms.technology	ms.topic	uid
Get started with SignalR on ASP.NET Core	rachelappel	Learn the basics of building a real-time app using SignalR for ASP.NET Core.	wpickett	rachelap	mvc	03/06/2018	aspnet-core	dotnet-signalr	tutorial	signalr/get-started-signalr-core

Tutorial: Get started with SignalR for ASP.NET Core

By Rachel Appel

This tutorial teaches the basics of building a real-time app using SignalR for ASP.NET Core.

View or download sample code (how to download)

This tutorial demonstrates the following SignalR development tasks:

[!div class="checklist"]

• Create an ASP.NET Core web app.
• Create a SignalR hub to push content to clients.
• Use the SignalR JavaScript library to send messages and display updates from the hub.

Prerequisites

Install the following software:

• .NET Core 2.1.0 Preview 1 SDK or later
• Visual Studio 2017 version 15.6 or later with the ASP.NET and web development workload
• npm

Create an ASP.NET Core project that hosts SignalR client and server

1. Use the File > New Project menu option and choose ASP.NET Core Web Application. Name the project SignalRChat.

2. Select Web Application to create a project using Razor Pages. Then select Ok. Be sure that ASP.NET Core 2.1 is selected from the framework selector, though SignalR runs on older versions of .NET.

The libraries that host SignalR server-side code are included in the project template. Install the client-side JavaScript separately with npm.

 npm install @aspnet/signalr

3. Copy the signalr.js from node_modules\@aspnet\signalr\dist\browser to the wwwroot\lib folder in your project.

Create the SignalR Hub

A hub is a class that serves as a high-level pipeline that allows the client and server to call methods on each other.

1. Add a class to the project by choosing File > New > File and selecting Visual C# Class.

2. Inherit from Microsoft.AspNetCore.SignalR.Hub. The Hub class contains properties and events for managing connections and groups, as well as sending and receiving data.

3. Create the Send method that sends a message to all connected chat clients. Notice it returns a Task, because SignalR is asynchronous. Asynchronous code scales better.

[!code-csharpStartup]

Configure the project to use SignalR

The SignalR server must be configured so that it knows to pass requests to SignalR.

1. To configure a SignalR project, modify the ConfigureServices method of the application's Startup class by inserting a call to services.AddSignalR.

services.AddSignalR adds SignalR as part of the ASP.NET Core middleware pipeline.

1. Configure routes to your hubs using UseSignalR.

[!code-csharpStartup]

Create the SignalR client code

1. Replace the content in Pages\Index.cshtml with the following code:

[!code-cshtmlIndex]

The preceding HTML displays name and message fields, and a submit button. Notice the script references at the bottom: a reference to SignalR and chat.js.

1. Add a JavaScript file to the wwwroot\js folder named chat.js and add the following code to it:

[!code-javascriptIndex]

Run the app

1. Select Debug > Start without debugging to launch a browser and load the website locally. Copy the URL from the address bar.

2. Open another browser instance (any browser) and paste the URL in the address bar.

3. Choose either browser, enter a name and message, and click the Send button. The name and message are displayed on both pages instantly.