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-blazor-webassembly.md

11 KiB
Raw Blame History

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 04/30/2020
Blazor
Identity
Let's Encrypt
Razor
SignalR
tutorials/signalr-blazor-webassembly

Use ASP.NET Core SignalR with Blazor WebAssembly

By Daniel Roth and Luke Latham

[!INCLUDE]

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

[!INCLUDE]

Visual Studio Code

[!INCLUDE]

Visual Studio for Mac

[!INCLUDE]

.NET Core CLI

[!INCLUDE]

Create a hosted Blazor WebAssembly app project

When not using Visual Studio version 16.6 Preview 2 or later, install the Blazor WebAssembly template. The Microsoft.AspNetCore.Components.WebAssembly.Templates package has a preview version while Blazor WebAssembly is in preview. In a command shell, execute the following command:

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

Follow the guidance for your choice of tooling:

Visual Studio

  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.

[!NOTE] If you upgraded or installed a new version of Visual Studio and the Blazor WebAssembly template doesn't appear in the VS UI, reinstall the template using the dotnet new command shown previously.

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. In a command shell, execute the following command:

    dotnet new blazorwasm --hosted --output BlazorSignalRApp

  2. In Visual Studio for Mac, 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 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 Send button. The name and message are displayed on both pages instantly:

    SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

    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 Send button. The name and message are displayed on both pages instantly:

    SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

    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 Send button. The name and message are displayed on both pages instantly:

    SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

    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 Send button. The name and message are displayed on both pages instantly:

    SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

    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