Verwenden von ASP.NET Core SignalR mit Blazor

In diesem Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR mit Blazor beschrieben.

In diesem Artikel werden folgende Themen erläutert:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.

Voraussetzungen

Beispiel-App

Das Herunterladen des Beispiels einer Chat-App im Tutorial ist für dieses Tutorial nicht erforderlich. Die Beispiel-App ist die letzte funktionierende App, die mithilfe der Schritte dieses Tutorials erstellt wurde.

Anzeigen oder Herunterladen von Beispielcode

Erstellen einer gehosteten Blazor WebAssembly-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 2022 oder höher und das .NET Core SDK 6.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor WebAssembly App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorWebAssemblySignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Aktivieren Sie im Dialogfeld Zusätzliche Informationen das Kontrollkästchen Von ASP.NET Core gehostet.

  5. Wählen Sie Erstellen aus.

  6. Vergewissern Sie sich, dass eine gehostete Blazor WebAssembly-App erstellt wurde: Im Projektmappen-Explorer bestätigen Sie, dass ein Client-Projekt und ein Server-Projekt vorhanden sind. Wenn die beiden Projekte nicht vorliegen, beginnen Sie von vorn, und stellen Sie sicher, dass das Kontrollkästchen In ASP.NET Core gehostet aktiviert ist, bevor Sie auf Erstellen klicken.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorWebAssemblySignalRApp.Client-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie im BlazorWebAssemblySignalRApp.Server-Projekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.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-Hub

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Program.cs.

  2. Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Fügen Sie SignalR und Middlewaredienste für die Komprimierung von Antworten zu Program.cs hinzu:

    builder.Services.AddSignalR();
    builder.Services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
    
  4. In Program.cs:

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    app.UseResponseCompression();
    
    if (app.Environment.IsDevelopment())
    {
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    
    app.UseRouting();
    
    app.MapRazorPages();
    app.MapControllers();
    app.MapHub<ChatHub>("/chathub");
    app.MapFallbackToFile("index.html");
    
    app.Run();
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Client die Datei Pages/Index.razor.

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <PageTitle>Index</PageTitle>
    
    <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();
        }
    
        private async Task Send()
        {
            if (hubConnection is not null)
                {
                    await hubConnection.SendAsync("SendMessage", userInput, messageInput);
                }
        }
    
        public bool IsConnected =>
            hubConnection?.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Wählen Sie im Projektmappen-Explorer das BlazorWebAssemblySignalRApp.Server-Projekt aus. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

    Wichtig

    Wenn Sie eine gehostete Blazor WebAssembly App ausführen, führen Sie die App aus dem ServerProjekt der Projektmappe aus.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Erstellen einer Blazor Server-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 2022 oder höher und das .NET Core SDK 6.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor Server-App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorServerSignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorServerSignalRApp-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.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-Hub

  1. Öffnen Sie die Datei Program.cs .

  2. Fügen Sie am Anfang der Datei die Namespaces für Microsoft.AspNetCore.ResponseCompression und die ChatHub-Klasse hinzu:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Fügen Sie Middlewaredienste für die Komprimierung von Antworten zu Program.cs hinzu:

    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services.AddSingleton<WeatherForecastService>();
    builder.Services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
    
  4. In Program.cs:

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.

    • Fügen Sie zwischen den Endpunkten für die Zuordnung des Blazor-Hubs und den clientseitigen Fallback einen Endpunkt für den Hub hinzu:

      app.MapHub<ChatHub>("/chathub");
      
    app.UseResponseCompression();
    
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    
    app.UseStaticFiles();
    
    app.UseRouting();
    
    app.MapBlazorHub();
    app.MapHub<ChatHub>("/chathub");
    app.MapFallbackToPage("/_Host");
    
    app.Run();
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie die Datei Pages/Index.razor .

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <PageTitle>Index</PageTitle>
    
    <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);
                InvokeAsync(StateHasChanged);
            });
    
            await hubConnection.StartAsync();
        }
    
        private async Task Send()
        {
            if (hubConnection is not null)
                {
                    await hubConnection.SendAsync("SendMessage", userInput, messageInput);
                }
        }
    
        public bool IsConnected =>
            hubConnection?.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Weitere Informationen zum Erstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation:

Zusätzliche Ressourcen

In diesem Artikel werden folgende Themen erläutert:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.

Voraussetzungen

Beispiel-App

Das Herunterladen des Beispiels einer Chat-App im Tutorial ist für dieses Tutorial nicht erforderlich. Die Beispiel-App ist die letzte funktionierende App, die mithilfe der Schritte dieses Tutorials erstellt wurde.

Anzeigen oder Herunterladen von Beispielcode

Erstellen einer gehosteten Blazor WebAssembly-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 16.10 oder höher und das .NET Core SDK 5.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor WebAssembly App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorWebAssemblySignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Aktivieren Sie im Dialogfeld Zusätzliche Informationen das Kontrollkästchen Von ASP.NET Core gehostet.

  5. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorWebAssemblySignalRApp.Client-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie im BlazorWebAssemblySignalRApp.Server-Projekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.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-Hub

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Startup.cs.

  2. Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Fügen Sie SignalR und Middlewaredienste für die Komprimierung von Antworten zu Startup.ConfigureServices hinzu:

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

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    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.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToFile("index.html");
        });
    }
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Client die Datei Pages/Index.razor.

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <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();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Wählen Sie im Projektmappen-Explorer das BlazorWebAssemblySignalRApp.Server-Projekt aus. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

    Wichtig

    Wenn Sie eine gehostete Blazor WebAssembly App ausführen, führen Sie die App aus dem ServerProjekt der Projektmappe aus.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Erstellen einer Blazor Server-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 16.10 oder höher und das .NET Core SDK 5.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor Server-App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorServerSignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorServerSignalRApp-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.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-Hub

  1. Öffnen Sie die Datei Startup.cs .

  2. Fügen Sie am Anfang der Datei die Namespaces für Microsoft.AspNetCore.ResponseCompression und die ChatHub-Klasse hinzu:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Fügen Sie Middlewaredienste für die Komprimierung von Antworten zu Startup.ConfigureServices hinzu:

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

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für die Zuordnung des Blazor-Hubs und den clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToPage("/_Host");
        });
    }
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie die Datei Pages/Index.razor .

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <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);
                InvokeAsync(StateHasChanged);
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Weitere Informationen zum Erstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation:

Zusätzliche Ressourcen

In diesem Artikel werden folgende Themen erläutert:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.

Voraussetzungen

Beispiel-App

Das Herunterladen des Beispiels einer Chat-App im Tutorial ist für dieses Tutorial nicht erforderlich. Die Beispiel-App ist die letzte funktionierende App, die mithilfe der Schritte dieses Tutorials erstellt wurde.

Anzeigen oder Herunterladen von Beispielcode

Erstellen einer gehosteten Blazor WebAssembly-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 16.6 oder höher und das .NET Core SDK 3.1.300 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor WebAssembly App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorWebAssemblySignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Aktivieren Sie im Dialogfeld Zusätzliche Informationen das Kontrollkästchen Von ASP.NET Core gehostet.

  5. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorWebAssemblySignalRApp.Client-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie im BlazorWebAssemblySignalRApp.Server-Projekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.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-Hub

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Startup.cs.

  2. Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Fügen Sie SignalR und Middlewaredienste für die Komprimierung von Antworten zu Startup.ConfigureServices hinzu:

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

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    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 Chat

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Client die Datei Pages/Index.razor.

  2. Ersetzen Sie das Markup durch folgenden 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();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public void Dispose()
        {
            _ = hubConnection?.DisposeAsync();
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Wählen Sie im Projektmappen-Explorer das BlazorWebAssemblySignalRApp.Server-Projekt aus. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

    Wichtig

    Wenn Sie eine gehostete Blazor WebAssembly App ausführen, führen Sie die App aus dem ServerProjekt der Projektmappe aus.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Erstellen einer Blazor Server-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 16.6 oder höher und das .NET Core SDK 3.1.300 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor Server-App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorServerSignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorServerSignalRApp-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen des System.Text.Encodings.Web-Pakets

Dieser Abschnitt gilt nur für Apps für ASP.NET Core Version 3.x.

Aufgrund eines Problems bei der Paketauflösung bei der Verwendung von System.Text.Json 5.x in einer ASP.NET Core 3.x-App erfordert das Projekt einen Paketverweis für System.Text.Encodings.Web. Das zugrunde liegende Problem wird in einem zukünftigen Patchrelease von .NET 5 gelöst. Weitere Informationen finden Sie unter System.Text.Json defines netcoreapp3.0 with no dependencies #45560 (System.Text.Json definiert netcoreapp3.0 ohne Abhängigkeiten – Nr.45560).

Befolgen Sie den Leitfaden für Ihr bevorzugtes Tool, um System.Text.Encodings.Web zum Projekt hinzuzufügen:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorServerSignalRApp-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenSystem.Text.Encodings.Web in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket System.Text.Encodings.Web aus. Wählen Sie die Version des Pakets aus, die zum verwendeten freigegebenen Framework passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.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-Hub

  1. Öffnen Sie die Datei Startup.cs .

  2. Fügen Sie am Anfang der Datei die Namespaces für Microsoft.AspNetCore.ResponseCompression und die ChatHub-Klasse hinzu:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Fügen Sie Middlewaredienste für die Komprimierung von Antworten zu Startup.ConfigureServices hinzu:

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

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für die Zuordnung des Blazor-Hubs und den clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseResponseCompression();
    
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }
    
        app.UseHttpsRedirection();
        app.UseStaticFiles();
    
        app.UseRouting();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapHub<ChatHub>("/chathub");
            endpoints.MapFallbackToPage("/_Host");
        });
    }
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie die Datei Pages/Index.razor .

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <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);
                InvokeAsync(StateHasChanged);
            });
    
            await hubConnection.StartAsync();
        }
    
        async Task Send() =>
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected =>
            hubConnection.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            await hubConnection?.DisposeAsync();
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Weitere Informationen zum Erstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation:

Zusätzliche Ressourcen

In diesem Artikel werden folgende Themen erläutert:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.

Voraussetzungen

Beispiel-App

Das Herunterladen des Beispiels einer Chat-App im Tutorial ist für dieses Tutorial nicht erforderlich. Die Beispiel-App ist die letzte funktionierende App, die mithilfe der Schritte dieses Tutorials erstellt wurde.

Anzeigen oder Herunterladen von Beispielcode

Erstellen einer gehosteten Blazor WebAssembly-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 2022 oder höher und das .NET Core SDK 6.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor WebAssembly App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorWebAssemblySignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Aktivieren Sie im Dialogfeld Zusätzliche Informationen das Kontrollkästchen Von ASP.NET Core gehostet.

  5. Wählen Sie Erstellen aus.

  6. Vergewissern Sie sich, dass eine gehostete Blazor WebAssembly-App erstellt wurde: Im Projektmappen-Explorer bestätigen Sie, dass ein Client-Projekt und ein Server-Projekt vorhanden sind. Wenn die beiden Projekte nicht vorliegen, beginnen Sie von vorn, und stellen Sie sicher, dass das Kontrollkästchen In ASP.NET Core gehostet aktiviert ist, bevor Sie auf Erstellen klicken.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorWebAssemblySignalRApp.Client-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie im BlazorWebAssemblySignalRApp.Server-Projekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.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-Hub

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Program.cs.

  2. Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:

    using BlazorWebAssemblySignalRApp.Server.Hubs;
    
  3. Fügen Sie SignalR und Middlewaredienste für die Komprimierung von Antworten zu Program.cs hinzu:

    builder.Services.AddSignalR();
    builder.Services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
    
  4. In Program.cs:

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.
    • Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu.
    app.UseResponseCompression();
    
    if (app.Environment.IsDevelopment())
    {
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    
    app.UseRouting();
    
    
    app.MapRazorPages();
    app.MapControllers();
    app.MapHub<ChatHub>("/chathub");
    app.MapFallbackToFile("index.html");
    
    app.Run();
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Client die Datei Pages/Index.razor.

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <PageTitle>Index</PageTitle>
    
    <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();
        }
    
        private async Task Send()
        {
            if (hubConnection is not null)
                {
                    await hubConnection.SendAsync("SendMessage", userInput, messageInput);
                }
        }
    
        public bool IsConnected =>
            hubConnection?.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Wählen Sie im Projektmappen-Explorer das BlazorWebAssemblySignalRApp.Server-Projekt aus. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

    Wichtig

    Wenn Sie eine gehostete Blazor WebAssembly App ausführen, führen Sie die App aus dem ServerProjekt der Projektmappe aus.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Erstellen einer Blazor Server-App

Befolgen Sie die Anleitungen für die Auswahl der Tools:

Hinweis

Visual Studio 2022 oder höher und das .NET Core SDK 6.0.0 oder höher sind erforderlich.

  1. Erstellen Sie ein neues Projekt.

  2. Wählen Sie die Blazor Server-App-Vorlage aus. Klicken Sie auf Weiter.

  3. Geben Sie im Feld ProjektnameBlazorServerSignalRApp ein. Vergewissern Sie sich, dass der Eintrag für den Speicherort korrekt ist, oder geben Sie einen Speicherort für das Projekt an. Klicken Sie auf Weiter.

  4. Wählen Sie Erstellen aus.

Hinzufügen der SignalR-Clientbibliothek

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das BlazorServerSignalRApp-Projekt, und wählen Sie NuGet-Pakete verwalten aus.

  2. Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.

  3. Geben Sie bei Auswahl von DurchsuchenMicrosoft.AspNetCore.SignalR.Client in das Suchfeld ein.

  4. Wählen Sie in den Suchergebnissen das Paket Microsoft.AspNetCore.SignalR.Client aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.

  5. Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.

  6. Wenn das Dialogfeld Zustimmung zur Lizenz erscheint, wählen Sie Ich stimme zu aus, wenn Sie mit den Lizenzbedingungen einverstanden sind.

Hinzufügen eines SignalR-Hubs

Erstellen Sie einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:

using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.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-Hub

  1. Öffnen Sie die Datei Program.cs .

  2. Fügen Sie am Anfang der Datei die Namespaces für Microsoft.AspNetCore.ResponseCompression und die ChatHub-Klasse hinzu:

    using Microsoft.AspNetCore.ResponseCompression;
    using BlazorServerSignalRApp.Server.Hubs;
    
  3. Fügen Sie Middlewaredienste für die Komprimierung von Antworten zu Program.cs hinzu:

    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services.AddSingleton<WeatherForecastService>();
    builder.Services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
    
  4. In Program.cs:

    • Verwenden Sie die Middlewaredienste für die Komprimierung von Antworten am Anfang der Konfiguration der Verarbeitungspipeline.

    • Fügen Sie zwischen den Endpunkten für die Zuordnung des Blazor-Hubs und den clientseitigen Fallback einen Endpunkt für den Hub hinzu:

      app.MapHub<ChatHub>("/chathub");
      
    app.UseResponseCompression();
    
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    
    app.UseStaticFiles();
    
    app.UseRouting();
    
    app.MapBlazorHub();
    app.MapHub<ChatHub>("/chathub");
    app.MapFallbackToPage("/_Host");
    
    app.Run();
    

Hinzufügen von Razor-Komponentencode für Chat

  1. Öffnen Sie die Datei Pages/Index.razor .

  2. Ersetzen Sie das Markup durch folgenden Code:

    @page "/"
    @using Microsoft.AspNetCore.SignalR.Client
    @inject NavigationManager NavigationManager
    @implements IAsyncDisposable
    
    <PageTitle>Index</PageTitle>
    
    <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);
                InvokeAsync(StateHasChanged);
            });
    
            await hubConnection.StartAsync();
        }
    
        private async Task Send()
        {
            if (hubConnection is not null)
                {
                    await hubConnection.SendAsync("SendMessage", userInput, messageInput);
                }
        }
    
        public bool IsConnected =>
            hubConnection?.State == HubConnectionState.Connected;
    
        public async ValueTask DisposeAsync()
        {
            if (hubConnection is not null)
            {
                await hubConnection.DisposeAsync();
            }
        }
    }
    

Ausführen der App

Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:

  1. Drücken Sie F5, um die App mit Debuggen auszuführen, oder drücken Sie STRG+F5 (Windows)/+F5 (macOS), um die App ohne Debuggen auszuführen.

  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.

  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. Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt:

    SignalRBlazorDie-Beispiel-App wird in zwei Browserfenstern geöffnet, in denen die ausgetauschten Nachrichten angezeigt werden.

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

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

  • Erstellen eines Blazor-Projekts
  • Hinzufügen der SignalR-Clientbibliothek
  • Hinzufügen eines SignalR-Hubs
  • Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
  • Hinzufügen von Razor-Komponentencode für Chat

Weitere Informationen zum Erstellen von Blazor-Apps finden Sie in der Blazor-Dokumentation:

Zusätzliche Ressourcen