Verwenden von ASP.NET Core SignalR mit Blazor

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

  • 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.

Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)

Voraussetzungen

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 Projektname BlazorWebAssemblySignalRApp 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 Durchsuchen Microsoft.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 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.AddControllersWithViews();
    builder.Services.AddRazorPages();
    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");
        // 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.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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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 Projektname BlazorServerSignalRApp 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 Durchsuchen Microsoft.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 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.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);
                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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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 Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR mit Blazor beschrieben. Sie lernen Folgendes:

  • 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.

Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)

Voraussetzungen

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 Projektname BlazorWebAssemblySignalRApp 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 Durchsuchen Microsoft.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:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddRazorPages();
        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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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 Projektname BlazorServerSignalRApp 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 Durchsuchen Microsoft.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);
                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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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 Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR mit Blazor beschrieben. Sie lernen Folgendes:

  • 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.

Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)

Voraussetzungen

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 Projektname BlazorWebAssemblySignalRApp 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 Durchsuchen Microsoft.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:

    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:

    • 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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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 Projektname BlazorServerSignalRApp 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 Durchsuchen Microsoft.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 Durchsuchen System.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);
                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, 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:

    In zwei Browserfenstern geöffnete SignalR Blazor-Beispiel-App mit ausgetauschten Nachrichten

    Zitate: Star Trek VI: 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