daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
AspNetCore.Docs/aspnetcore/tutorials/signalr.md

6.9 KiB
Raw Blame History

title author description monikerRange ms.author ms.custom ms.date uid
Get started with SignalR on ASP.NET Core rachelappel In this tutorial, you create an app using SignalR for ASP.NET Core. >= aspnetcore-2.1 rachelap mvc 05/22/2018 tutorials/signalr

Get started with SignalR on ASP.NET Core

By Rachel Appel

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

Solution

This tutorial demonstrates the following SignalR development tasks:

[!div class="checklist"]

  • Create a SignalR on ASP.NET Core web app.
  • Create a SignalR hub to push content to clients.
  • Modify the Startup class and configure the app.

View or download sample code (how to download)

Prerequisites

Install the following software:

Visual Studio

Visual Studio Code

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

Visual Studio

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

    New Project dialog in Visual Studio

  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.

    New Project dialog in Visual Studio

Visual Studio includes the Microsoft.AspNetCore.SignalR package containing its server libraries as part of its ASP.NET Core Web Application template. However, the JavaScript client library for SignalR must be installed using npm.

  1. Run the following commands in the Package Manager Console window, from the project root:

    npm init -y
npm install @aspnet/signalr

  2. Create a new folder named "signalr" inside the lib folder in your project. Copy the signalr.js file from node_modules\@aspnet\signalr\dist\browser to this folder.

Visual Studio Code

  1. From the Integrated Terminal, run the following command:

    dotnet new webapp -o SignalRChat

    [!INCLUDE]

  2. Install the JavaScript client library using npm.

    npm init -y
npm install @aspnet/signalr

  3. Create a new folder named "signalr" inside the lib folder in your project. Copy the signalr.js file from node_modules\@aspnet\signalr\dist\browser to this folder.

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.

Visual Studio

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

  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 SendMessage 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]

Visual Studio Code

  1. Open the SignalRChat folder in Visual Studio Code.

  2. Add a class to the project by selecting File > New File from the menu. Name the class ChatHub and the file ChatHub.cs.

  3. 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 to clients.

  4. Add a SendMessage method to the class. The SendMessage method 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 project's Startup.ConfigureServices method.

    services.AddSignalR makes the SignalR services available to the dependency injection system.

  2. Configure routes to your hubs with UseSignalR in the Configure method. app.UseSignalR adds SignalR to the middleware pipeline.

    [!code-csharpStartup]

Create the SignalR client code

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

    [!code-javascriptIndex]

  2. 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.

Run the app

Visual Studio

  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.

Visual Studio Code

  1. Press Debug (F5) to build and run the program. Running the program opens a browser window.

  2. Open another browser window and load the website locally in it.

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

Solution

Related resources

Introduction to ASP.NET Core SignalR