AspNetCore.Docs/aspnetcore/tutorials/signalr-blazor-webassembly.md

title	author	description	monikerRange	ms.author	ms.custom	ms.date	no-loc	uid
Use ASP.NET Core SignalR with Blazor WebAssembly	guardrex	Create a chat app that uses ASP.NET Core SignalR with Blazor WebAssembly.	>= aspnetcore-3.1	riande	mvc	06/10/2020	cookie Cookie Blazor Blazor Server Blazor WebAssembly Identity Let's Encrypt Razor SignalR	tutorials/signalr-blazor-webassembly

Use ASP.NET Core SignalR with Blazor WebAssembly

By Daniel Roth and Luke Latham

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

[!div class="checklist"]

• Create a Blazor WebAssembly Hosted app project
• Add the SignalR client library
• Add a SignalR hub
• Add SignalR services and an endpoint for the SignalR hub
• Add Razor component code for chat

At the end of this tutorial, you'll have a working chat app.

View or download sample code (how to download)

Prerequisites

Visual Studio

• Visual Studio 2019 16.6 or later with the ASP.NET and web development workload
• [!INCLUDE .NET Core 3.1 SDK]

Visual Studio Code

[!INCLUDE]

Visual Studio for Mac

• Visual Studio for Mac version 8.6 or later
• [!INCLUDE .NET Core 3.1 SDK]

.NET Core CLI

[!INCLUDE]

---

Create a hosted Blazor WebAssembly app project

Follow the guidance for your choice of tooling:

Visual Studio

[!NOTE] Visual Studio 16.6 or later and .NET Core SDK 3.1.300 or later are required.

1. Create a new project.

2. Select Blazor App and select Next.

3. Type BlazorSignalRApp in the Project name field. Confirm the Location entry is correct or provide a location for the project. Select Create.

4. Choose the Blazor WebAssembly App template.

5. Under Advanced, select the ASP.NET Core hosted check box.

6. Select Create.

Visual Studio Code

1. In a command shell, execute the following command:

   dotnet new blazorwasm --hosted --output BlazorSignalRApp
   

2. In Visual Studio Code, open the app's project folder.

3. When the dialog appears to add assets to build and debug the app, select Yes. Visual Studio Code automatically adds the .vscode folder with generated launch.json and tasks.json files.

Visual Studio for Mac

1. Install the latest version of Visual Studio for Mac and perform the following steps:

2. Select File > New Solution or create a New project from the Start Window.

3. In the sidebar, select Web and Console > App.

4. Choose the Blazor WebAssembly App template. Select Next.

5. Confirm that Authentication is set to No Authentication. Select the ASP.NET Core Hosted check box. Select Next.

6. In the Project Name field, name the app BlazorSignalRApp. Select Create.

   If a prompt appears to trust the development certificate, trust the certificate and continue. The user and keychain passwords are required to trust the certificate.

7. Open the project by navigating to the project folder and opening the project's solution file (.sln).

.NET Core CLI

In a command shell, execute the following command:

dotnet new blazorwasm --hosted --output BlazorSignalRApp

---

Add the SignalR client library

Visual Studio

1. In Solution Explorer, right-click the BlazorSignalRApp.Client project and select Manage NuGet Packages.

2. In the Manage NuGet Packages dialog, confirm that the Package source is set to nuget.org.

3. With Browse selected, type Microsoft.AspNetCore.SignalR.Client in the search box.

4. In the search results, select the Microsoft.AspNetCore.SignalR.Client package and select Install.

5. If the Preview Changes dialog appears, select OK.

6. If the License Acceptance dialog appears, select I Accept if you agree with the license terms.

Visual Studio Code

In the Integrated Terminal (View > Terminal from the toolbar), execute the following commands:

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

Visual Studio for Mac

1. In the Solution sidebar, right-click the BlazorSignalRApp.Client project and select Manage NuGet Packages.

2. In the Manage NuGet Packages dialog, confirm that the source drop-down is set to nuget.org.

3. With Browse selected, type Microsoft.AspNetCore.SignalR.Client in the search box.

4. In the search results, select the check box next to the Microsoft.AspNetCore.SignalR.Client package and select Add Package.

5. If the License Acceptance dialog appears, select Accept if you agree with the license terms.

.NET Core CLI

In a command shell, execute the following commands:

cd BlazorSignalRApp
dotnet add Client package Microsoft.AspNetCore.SignalR.Client

---

Add a SignalR hub

In the BlazorSignalRApp.Server project, create a Hubs (plural) folder and add the following ChatHub class (Hubs/ChatHub.cs):

[!code-csharp]

Add services and an endpoint for the SignalR hub

1. In the BlazorSignalRApp.Server project, open the Startup.cs file.

2. Add the namespace for the ChatHub class to the top of the file:

   using BlazorSignalRApp.Server.Hubs;
   

3. Add SignalR and Response Compression Middleware services to Startup.ConfigureServices:

   [!code-csharp]

4. In Startup.Configure:

   • Use Response Compression Middleware at the top of the processing pipeline's configuration.
   • Between the endpoints for controllers and the client-side fallback, add an endpoint for the hub.

   [!code-csharp]

Add Razor component code for chat

1. In the BlazorSignalRApp.Client project, open the Pages/Index.razor file.

2. Replace the markup with the following code:

[!code-razor]

Run the app

1. Follow the guidance for your tooling:

Visual Studio

1. In Solution Explorer, select the BlazorSignalRApp.Server project. Press F5 to run the app with debugging or Ctrl+F5 to run the app without debugging.

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

3. Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly:

   

   Quotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

Visual Studio Code

1. When VS Code offers to create a launch profile for the Server app (.vscode/launch.json), the program entry appears similar to the following to point to the app's assembly ({APPLICATION NAME}.Server.dll):

   "program": "${workspaceFolder}/Server/bin/Debug/netcoreapp3.1/{APPLICATION NAME}.Server.dll"
   

2. Press F5 to run the app with debugging or Ctrl+F5 to run the app without debugging.

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

4. Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly:

   

   Quotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

Visual Studio for Mac

1. In the Solution sidebar, select the BlazorSignalRApp.Server project. Press ⌘+↩ to run the app with debugging or ⌥+⌘+↩ to run the app without debugging.

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

3. Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly:

   

   Quotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

.NET Core CLI

1. In a command shell, execute the following commands:

   cd Server
   dotnet run
   

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

3. Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly:

   

   Quotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

---

Next steps

In this tutorial, you learned how to:

[!div class="checklist"]

• Create a Blazor WebAssembly Hosted app project
• Add the SignalR client library
• Add a SignalR hub
• Add SignalR services and an endpoint for the SignalR hub
• Add Razor component code for chat

To learn more about building Blazor apps, see the Blazor documentation:

[!div class="nextstepaction"] xref:blazor/index

Additional resources

• xref:signalr/introduction
• SignalR cross-origin negotiation for authentication