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/signalr/get-started.md

6.5 KiB
Raw Blame History

title author description manager ms.author ms.custom ms.date ms.prod ms.topic ms.technology uid
Get started with SignalR on ASP.NET Core rachelappel In this tutorial, you create an app using SignalR for ASP.NET Core. wpickett rachelap mvc 03/16/2018 aspnet-core tutorial aspnet signalr/get-started

Get started with SignalR on ASP.NET Core

By Rachel Appel

[!INCLUDEVersion notice]

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

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

  1. Right-click the project in Solution Explorer > Add > New Item > npm Configuration File. Name the file package.json.

  2. Run the following command in the Package Manager Console window, from the project root:

      npm install @aspnet/signalr

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

Visual Studio Code

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

      dotnet new razor -o SignalRChat

  2. Install the JavaScript client library using npm.

      npm init -y
  npm install @aspnet/signalr

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.

  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.

  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 adds SignalR as part of the 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, named chat.js, to the wwwroot\js folder. Add the following code to it:

[!code-javascriptIndex]

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