Skip to content

signalr.md

Latest commit

 

History

History
233 lines (142 loc) · 9.01 KB

signalr.md

File metadata and controls

233 lines (142 loc) · 9.01 KB
title Get started with ASP.NET Core SignalR
author wadepickett
description In this tutorial, you create a chat app that uses ASP.NET Core SignalR.
<!-- ms.author bradyg -->
ms.author wpickett
monikerRange >= aspnetcore-3.1
ms.custom mvc, engagement-fy23
ms.date 11/06/2023
uid tutorials/signalr

Tutorial: Get started with ASP.NET Core SignalR

[!INCLUDE]

:::moniker range=">= aspnetcore-8.0"

This tutorial teaches the basics of building a real-time app using SignalR. You learn how to:

[!div class="checklist"]

  • Create a web project.
  • Add the SignalR client library.
  • Create a SignalR hub.
  • Configure the project to use SignalR.
  • Add code that sends messages from any client to all connected clients.

At the end, you'll have a working chat app:

SignalR sample app

Prerequisites

Visual Studio

[!INCLUDE]

Visual Studio Code

[!INCLUDE]

Create a web app project

Visual Studio

Start Visual Studio 2022 and select Create a new project.

Create a new project from the start window

In the Create a new project dialog, select ASP.NET Core Web App (Razor Pages), and then select Next.

Create an ASP.NET Core Web App

In the Configure your new project dialog, enter SignalRChat for Project name. It's important to name the project SignalRChat, including matching the capitalization, so the namespaces match the code in the tutorial.

Select Next.

In the Additional information dialog, select .NET 8.0 (Long Term Support) and then select Create.

Additional information

Visual Studio Code

The tutorial assumes familiarity with VS Code. For more information, see Getting started with VS Code

  • Select New Terminal from the Terminal menu to open the integrated terminal.
  • Change to the directory (cd) that will contain the project.
  • Run the following commands:
dotnet new webapp -o SignalRChat
code -r SignalRChat

The dotnet new command creates a new Razor Pages project in the SignalRChat folder.

The code command opens the SignalRChat folder in the current instance of Visual Studio Code.

[!INCLUDE]

Add the SignalR client library

The SignalR server library is included in the ASP.NET Core shared framework. The JavaScript client library isn't automatically included in the project. For this tutorial, use Library Manager (LibMan) to get the client library from unpkg. unpkgis a fast, global content delivery network for everything on npm.

Visual Studio

In Solution Explorer, right-click the project, and select Add > Client-Side Library.

In the Add Client-Side Library dialog:

  • Select unpkg for Provider
  • Enter @microsoft/signalr@latest for Library.
  • Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.
  • Set Target Location to wwwroot/js/signalr/.
  • Select Install.

Add Client-Side Library dialog - select library

LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

Visual Studio Code

In the integrated terminal, run the following commands to install LibMan after uninstalling any previous version, if one exists.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

[!INCLUDE]

Navigate to the project folder, which contains the SignalRChat.csproj file.

Run the following command to get the SignalR client library by using LibMan. It may take a few seconds before displaying output.

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

The parameters specify the following options:

  • Use the unpkg provider.
  • Copy files to the wwwroot/js/signalr destination.
  • Copy only the specified files.

The output looks similar to the following:

Downloading file https://unpkg.com/@microsoft/signalr@latest/dist/browser/signalr.js...
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Create a SignalR hub

A hub is a class that serves as a high-level pipeline that handles client-server communication.

In the SignalRChat project folder, create a Hubs folder.

In the Hubs folder, create the ChatHub class with the following code:

[!code-csharpChatHub]

The ChatHub class inherits from the SignalR xref:Microsoft.AspNetCore.SignalR.Hub class. The Hub class manages connections, groups, and messaging.

The SendMessage method can be called by a connected client to send a message to all clients. JavaScript client code that calls the method is shown later in the tutorial. SignalR code is asynchronous to provide maximum scalability.

Configure SignalR

The SignalR server must be configured to pass SignalR requests to SignalR. Add the following highlighted code to the Program.cs file.

[!code-csharpStartup]

The preceding highlighted code adds SignalR to the ASP.NET Core dependency injection and routing systems.

Add SignalR client code

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

[!code-cshtmlIndex]

The preceding markup:

  • Creates text boxes and a submit button.
  • Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
  • Includes script references to SignalR and the chat.js app code is created in the next step.

In the wwwroot/js folder, create a chat.js file with the following code:

[!code-javascriptchat]

The preceding JavaScript:

  • Creates and starts a connection.
  • Adds to the submit button a handler that sends messages to the hub.
  • Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Run the app

Visual Studio

Select Ctrl+F5 to run the app without debugging.

Visual Studio Code

Select Ctrl+F5 to run the app without debugging.

Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

Choose either browser, enter a name and message, and select the Send Message button.

The name and message are displayed on both pages instantly.

Completed SignalR sample app

Tip

If the app doesn't work, open the browser developer tools (F12) and go to the console. Look for possible errors related to HTML and JavaScript code. For example, if signalr.js was put in a different folder than directed, the reference to that file won't work resulting in a 404 error in the console. signalr.js not found error If an ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY error has occurred in Chrome, run the following commands to update the development certificate:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Publish to Azure

For information on deploying to Azure, see Quickstart: Deploy an ASP.NET web app. For more information on Azure SignalR Service, see What is Azure SignalR Service?.

Next steps

:::moniker-end

[!INCLUDE]

[!INCLUDE]

[!INCLUDE]