Verwenden von ASP.NET Core SignalR mit Blazor WebAssemblyUse ASP.NET Core SignalR with Blazor WebAssembly

Von Daniel Roth und Luke LathamBy Daniel Roth and Luke Latham

In diesem Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR mit Blazor WebAssembly beschrieben.This tutorial teaches the basics of building a real-time app using SignalR with Blazor WebAssembly. Sie lernen Folgendes:You learn how to:

  • Erstellen eines gehosteten Blazor WebAssembly-App-ProjektsCreate a Blazor WebAssembly Hosted app project
  • Hinzufügen der SignalR-ClientbibliothekAdd the SignalR client library
  • Hinzufügen eines SignalR-HubsAdd a SignalR hub
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-HubAdd SignalR services and an endpoint for the SignalR hub
  • Hinzufügen von Razor-Komponentencode für ChatAdd Razor component code for chat

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.At the end of this tutorial, you'll have a working chat app.

Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)View or download sample code (how to download)

VoraussetzungenPrerequisites

Erstellen eines gehosteten Blazor WebAssembly-App-ProjektsCreate a hosted Blazor WebAssembly app project

Befolgen Sie die Anleitungen für die Auswahl der Tools:Follow the guidance for your choice of tooling:

Hinweis

Visual Studio 16.6 oder höher und das .NET Core SDK 3.1.300 oder höher sind erforderlich.Visual Studio 16.6 or later and .NET Core SDK 3.1.300 or later are required.

  1. Erstellen Sie ein neues Projekt.Create a new project.

  2. Klicken Sie auf Blazor-App und dann auf Weiter.Select Blazor App and select Next.

  3. Geben Sie im Feld Projektname BlazorSignalRApp ein.Type BlazorSignalRApp in the Project name field. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an.Confirm the Location entry is correct or provide a location for the project. Wählen Sie Erstellen aus.Select Create.

  4. Wählen Sie die Blazor WebAssembly App-Vorlage aus.Choose the Blazor WebAssembly App template.

  5. Aktivieren Sie unter Erweitert das Kontrollkästchen Von ASP.net Core gehostet.Under Advanced, select the ASP.NET Core hosted check box.

  6. Wählen Sie Erstellen aus.Select Create.

Hinzufügen der SignalR-ClientbibliothekAdd the SignalR client library

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorSignalRApp.Client-Projekt, und wählen Sie NuGet-Pakete verwalten aus.In Solution Explorer, right-click the BlazorSignalRApp.Client project and select Manage NuGet Packages.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.In the Manage NuGet Packages dialog, confirm that the Package source is set to nuget.org.

  3. Geben Sie bei Auswahl von Durchsuchen Microsoft.AspNetCore.SignalR.Client in das Suchfeld ein.With Browse selected, type Microsoft.AspNetCore.SignalR.Client in the search box.

  4. Wählen Sie in den Suchergebnissen das Microsoft.AspNetCore.SignalR.Client-Paket aus, und klicken Sie dann auf Installieren.In the search results, select the Microsoft.AspNetCore.SignalR.Client package and select Install.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.If the Preview Changes dialog appears, select OK.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.If the License Acceptance dialog appears, select I Accept if you agree with the license terms.

Hinzufügen eines SignalR-HubsAdd a SignalR hub

Erstellen Sie im BlazorSignalRApp.Server-Projekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:In the BlazorSignalRApp.Server project, create a Hubs (plural) folder and add the following ChatHub class (Hubs/ChatHub.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Hinzufügen von Diensten und eines Endpunkts zum SignalR-HubAdd services and an endpoint for the SignalR hub

  1. Öffnen Sie im Projekt BlazorSignalRApp.Server die Datei Startup.cs.In the BlazorSignalRApp.Server project, open the Startup.cs file.

  2. Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:Add the namespace for the ChatHub class to the top of the file:

    using BlazorSignalRApp.Server.Hubs;
    
  3. Fügen Sie SignalR und Middlewaredienste für die Komprimierung von Antworten zu Startup.ConfigureServices hinzu:Add SignalR and Response Compression Middleware services to Startup.ConfigureServices:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. In Startup.Configure:In Startup.Configure:

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.Use Response Compression Middleware at the top of the processing pipeline's configuration.
    • Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu.Between the endpoints for controllers and the client-side fallback, add an endpoint for the hub.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToFile("index.html");
        });
    }
    

Hinzufügen von Razor-Komponentencode für ChatAdd Razor component code for chat

  1. Öffnen Sie im Projekt BlazorSignalRApp.Client die Datei Pages/Index.razor.In the BlazorSignalRApp.Client project, open the Pages/Index.razor file.

  2. Ersetzen Sie das Markup durch folgenden Code:Replace the markup with the following code:

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    Task Send() =>
        hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
        
    public void Dispose()
    {
        _ = hubConnection.DisposeAsync();
    }
}

Ausführen der AppRun the app

  1. Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:Follow the guidance for your tooling:
  1. Wählen Sie im Projektmappen-Explorer das BlazorSignalRApp.Server-Projekt aus.In Solution Explorer, select the BlazorSignalRApp.Server project. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5, um die App ohne Debuggen auszuführen.Press F5 to run the app with debugging or Ctrl+F5 to run the app without debugging.

  2. Kopieren Sie die URL aus der Adressleiste, öffnen Sie eine neue Browserinstanz oder Registerkarte, und fügen Sie die URL in die Adressleiste ein.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  3. Geben Sie in einem der beiden Browser einen Namen und eine Nachricht ein, und klicken Sie auf die Schaltfläche zum Senden der Nachricht.Choose either browser, enter a name and message, and select the button to send the message. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:The name and message are displayed on both pages instantly:

    Die SignalR-Blazor WebAssembly-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschte Nachrichten angezeigt werden.SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

    Zitate: Star Trek VI: Das unentdeckte Land ©1991 ParamountQuotes: Star Trek VI: The Undiscovered Country ©1991 Paramount

Nächste SchritteNext steps

In diesem Tutorial haben Sie gelernt, wie die folgenden Aufgaben ausgeführt werden:In this tutorial, you learned how to:

  • Erstellen eines gehosteten Blazor WebAssembly-App-ProjektsCreate a Blazor WebAssembly Hosted app project
  • Hinzufügen der SignalR-ClientbibliothekAdd the SignalR client library
  • Hinzufügen eines SignalR-HubsAdd a SignalR hub
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-HubAdd SignalR services and an endpoint for the SignalR hub
  • Hinzufügen von Razor-Komponentencode für ChatAdd Razor component code for chat

Weitere Informationen zum Erstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation:To learn more about building Blazor apps, see the Blazor documentation:

Zusätzliche RessourcenAdditional resources