Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Hinweis
Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 10-Version dieses Artikels.
Warnung
Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie unter .NET und .NET Core Support Policy. Die aktuelle Version finden Sie in der .NET 10-Version dieses Artikels.
Dieses Tutorial bietet eine grundlegende Arbeitserfahrung zum Erstellen einer Echtzeit-App unter Verwendung von SignalR mit Blazor. Dieser Artikel ist nützlich für Entwickler, die bereits mit SignalR vertraut sind und versuchen, zu verstehen, wie SignalR in einer Blazor-App angewendet wird. Ausführliche Anleitungen zu den SignalR- und Blazor-Frameworks finden Sie in den folgenden Referenzdokumentationssätzen und in der API-Dokumentation:
Lernen Sie, wie Sie:
- Erstellen einer Blazor-App
- Hinzufügen der SignalR-Clientbibliothek
- Hinzufügen eines SignalR-Hubs
- Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
- Hinzufügen eines Razor-Komponentencodes für Chat
Am Ende dieses Tutorials verfügen Sie über eine funktionierende Chat-App.
Voraussetzungen
Visual Studio (neueste Version) mit ASP.NET und Webentwicklung Workload
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. Wenn Sie das Beispiel-Repository öffnen, öffnen Sie den Versionsordner, den Sie verwenden möchten, und suchen Sie das Beispiel namens BlazorSignalRApp.
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. Wenn Sie das Beispiel-Repository öffnen, öffnen Sie den Versionsordner, den Sie verwenden möchten, und suchen Sie das Beispiel namens BlazorWebAssemblySignalRApp.
Anzeigen oder Herunterladen von Beispielcode (Vorgehensweise zum Herunterladen)
Erstellen der Datei Blazor Web App
Befolgen Sie die Anleitungen für die Auswahl der Tools:
Hinweis
Visual Studio 2022 oder höher und .NET 8 oder höher SDK sind erforderlich.
In Visual Studio:
- Wählen Sie Neues Projekt im Startfenster oder Datei>Neu>Projekt aus der Menüleiste.
- Wählen Sie im Dialogfeld Neues Projekt erstellen in der Liste der Projektvorlagen Blazor Web App aus. Wählen Sie die Schaltfläche Weiter aus.
- Geben Sie im Dialogfeld Neues Projekt konfigurieren im Feld
BlazorSignalRAppden Namen für das Projekt ein. Übernehmen Sie dabei die gleiche Groß-/Kleinschreibung. Die Verwendung von exakt diesem Projektnamen ist wichtig, um sicherzustellen, dass die Namespaces für den Code übereinstimmen, den Sie aus dem Tutorial in die zu erstellende App kopieren. - Vergewissern Sie sich, dass der Standort für die App geeignet ist. Lassen Sie das Kontrollkästchen Legen Sie die Projektmappe und das Projekt im selben Verzeichnis ab aktiviert. Wählen Sie die Schaltfläche Weiter aus.
- Verwenden Sie im Dialogfeld Zusätzliche Informationen die folgenden Einstellungen:
- Framework: Vergewissern Sie sich, dass das neueste Framework ausgewählt ist. Wenn Visual Studio Framework Dropdownliste nicht das neueste verfügbare .NET Framework enthält, update Visual Studio und starten Sie das Lernprogramm neu.
- Authentifizierungstyp: Keine
- Für HTTPS konfigurieren: Aktiviert
- Interaktiver Rendermodus: WebAssembly
- Interaktivitätsort: Pro Seite/Komponente
- Beispielseiten einschließen: Aktiviert
- Keine Anweisungen der obersten Ebene verwenden: Nicht aktiviert
- Verwenden Sie die .dev.localhost TLD in der Anwendungs-URL: Nicht ausgewählt
- Klicken Sie auf Erstellen.
Die Anleitung in diesem Artikel verwendet eine WebAssembly-Komponente für den SignalR-Client, da es nicht sinnvoll ist, eine Verbindung über SignalR zu einem Hub von einer interaktiven Serverkomponente in derselben Anwendung herzustellen, da dies zu einer zu hohen Auslastung des Serverports führen kann.
Hinzufügen der SignalR-Clientbibliothek
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das projekt BlazorSignalRApp.Client, und wählen Sie Manage NuGet Packages aus.
Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.
Geben Sie bei ausgewähltem Browse im Suchfeld Microsoft.AspNetCore.SignalR.Client ein.
Wählen Sie in den Suchergebnissen die neueste Version der Microsoft.AspNetCore.SignalR.Client package aus. Wählen Sie Installieren aus.
Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.
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 BlazorSignalRApp-Serverprojekt einen Hubs-Ordner (Plural), und fügen Sie die folgende ChatHub-Klasse (Hubs/ChatHub.cs) hinzu:
using Microsoft.AspNetCore.SignalR;
namespace BlazorSignalRApp.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
Öffnen Sie die Datei Program des BlazorSignalRApp-Serverprojekts.
Fügen Sie die Namespaces für Microsoft.AspNetCore.ResponseCompression und die klasse ChatHub am Anfang der Datei hinzu:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;
Hinzufügen von Middlewarediensten für SignalR und Antwortkomprimierung:
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
[ "application/octet-stream" ]);
});
Verwenden Sie Middleware für die Reaktionskomprimierung oben in der Konfiguration der Verarbeitungspipeline. Fügen Sie die folgende Codezeile unmittelbar nach der Zeile ein, die die App erstellt (var app = builder.Build();):
app.UseResponseCompression();
Fügen Sie einen Endpunkt für den Hub hinzu:
app.MapHub<ChatHub>("/chathub");
Hinzufügen von Razor-Komponentencode für Chat
Fügen Sie dem Projekt Pages/Chat.razor die folgende BlazorSignalRApp.Client-Datei hinzu:
@page "/chat"
@rendermode InteractiveWebAssembly
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable
<PageTitle>Chat</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 = [];
private string? userInput;
private string? messageInput;
protected override async Task OnInitializedAsync()
{
hubConnection = new HubConnectionBuilder()
.WithUrl(Navigation.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();
}
}
}
Fügen Sie der Komponente NavMenu einen Eintrag hinzu, um die Chatseite zu erreichen. Fügen Sie in Components/Layout/NavMenu.razor unmittelbar nach dem <div>-Block für die Weather-Komponente den folgenden <div>-Block hinzu:
<div class="nav-item px-3">
<NavLink class="nav-link" href="chat">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Chat
</NavLink>
</div>
Hinweis
Deaktivieren Sie die Middleware für die Reaktionskomprimierung in der Development Umgebung, wenn Sie Hot Reload verwenden. Weitere Informationen finden Sie unter ASP.NET Core BlazorSignalR Guidance.
Ausführen der App
Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:
Wenn das Serverprojekt BlazorSignalRApp im Projektmappen-Explorer ausgewählt ist, drücken Sie F5, um die App mit Debugging auszuführen, oder Ctrl+F5, um die App ohne Debugging auszuführen.
Kopieren Sie die URL aus der Adressleiste, öffnen Sie eine neue Browserinstanz oder Registerkarte, und fügen Sie die URL in die Adressleiste ein.
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:
Zitate: Star Trek VI: The Undiscovered Country (Das unentdeckte Land) ©1991 Paramount
Gehostetes Blazor WebAssembly-Erlebnis
Erstellen der App
Befolgen Sie die Anleitungen für die Auswahl der Tools zum Erstellen einer gehosteten Blazor WebAssembly-App:
Hinweis
Visual Studio 2022 oder höher und .NET oder höher 6 SDK sind erforderlich.
Erstellen Sie ein neues Projekt.
Wählen Sie die Blazor WebAssembly App-Vorlage aus. Klicken Sie auf Weiter.
Geben Sie BlazorWebAssemblySignalRApp in das Feld Project name 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.
Aktivieren Sie im Dialogfeld Weitere Informationen das Kontrollkästchen ASP.NET Core Gehostet.
Klicken Sie auf Erstellen.
Vergewissern Sie sich, dass eine gehostete Blazor WebAssembly-App erstellt wurde: Bestätigen Sie in Projektmappen-Explorer das Vorhandensein eines Client Projekts und eines Server Projekts. Wenn die beiden Projekte nicht vorhanden sind, beginnen Sie mit der Auswahl des ASP.NET Core Hosted Kontrollkästchens, bevor Sie Create aktivieren.
Hinzufügen der SignalR-Clientbibliothek
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das projekt BlazorWebAssemblySignalRApp.Client, und wählen Sie Manage NuGet Packages aus.
Überprüfen Sie im Dialogfeld NuGet-Pakete verwalten, ob die Paketquelle auf nuget.org eingestellt ist.
Geben Sie bei ausgewähltem Browse im Suchfeld Microsoft.AspNetCore.SignalR.Client ein.
Wählen Sie in den Suchergebnissen den Microsoft.AspNetCore.SignalR.Client package aus. Legen Sie die Version so fest, dass sie zum freigegebenen Framework der App passt. Wählen Sie Installieren aus.
Wenn das Dialogfeld Vorschau der Änderungen anzeigen angezeigt wird, wählen Sie die Option OK aus.
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);
}
}
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);
}
}
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);
}
}
}
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
Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Program.cs.
Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Hinzufügen von Middlewarediensten für SignalR und Antwortkomprimierung:
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Verwenden Sie Middleware für die Reaktionskomprimierung oben in der Konfiguration der Verarbeitungspipeline unmittelbar nach der Zeile, in der die App erstellt wird:
app.UseResponseCompression();
Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback einen Endpunkt für den Hub hinzu. Fügen Sie unmittelbar nach der Zeile app.MapControllers(); folgende Zeile hinzu:
app.MapHub<ChatHub>("/chathub");
Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Server die Datei Startup.cs.
Fügen Sie am Anfang der Datei den Namespace für die ChatHub-Klasse hinzu:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Hinzufügen von Middlewarediensten für SignalR und Antwortkomprimierung:
services.AddSignalR();
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Verwenden Sie Middleware für die Reaktionskomprimierung oben in der Konfiguration der Verarbeitungspipeline:
app.UseResponseCompression();
Fügen Sie zwischen den Endpunkten für Controller und dem clientseitigen Fallback unmittelbar nach der Zeile endpoints.MapControllers(); einen Endpunkt für den Hub hinzu:
endpoints.MapHub<ChatHub>("/chathub");
Hinzufügen von Razor-Komponentencode für Chat
Öffnen Sie im Projekt BlazorWebAssemblySignalRApp.Client die Datei Pages/Index.razor.
Ersetzen Sie das Markup durch folgenden Code:
@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
}
}
}
@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
}
}
}
@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();
}
}
}
@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();
}
}
Hinweis
Deaktivieren Sie die Middleware für die Reaktionskomprimierung in der Development Umgebung, wenn Sie Hot Reload verwenden. Weitere Informationen finden Sie unter ASP.NET Core BlazorSignalR Guidance.
Ausführen der App
Befolgen Sie die Anleitungen für die Auswahl Ihrer Tools:
Wählen Sie in Projektmappen-Explorer das Projekt BlazorWebAssemblySignalRApp.Server aus. Drücken Sie F5-, um die App mit Debugging auszuführen, oder STRG+F5-, um die App ohne Debugging auszuführen.
Wichtig
Wenn Sie eine gehostete Blazor WebAssembly-App ausführen, führen Sie die App über das Projekt der LösungServer aus.
Google Chrome oder Microsoft Edge müssen der ausgewählte Browser für eine Debugsitzung sein.
Wenn die App nicht im Browser gestartet werden kann:
- Vergewissern Sie sich in der .NET-Konsole, dass die Lösung aus dem Projekt "Server" ausgeführt wird.
- Aktualisieren Sie den Browser mithilfe der Schaltfläche zum erneuten Laden des Browsers.
Kopieren Sie die URL aus der Adressleiste, öffnen Sie eine neue Browserinstanz oder Registerkarte, und fügen Sie die URL in die Adressleiste ein.
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:
Zitate: Star Trek VI: The Undiscovered Country (Das unentdeckte Land) ©1991 Paramount
Nächste Schritte
In diesem Tutorial haben Sie Folgendes gelernt:
- Erstellen einer Blazor-App
- Hinzufügen der SignalR-Clientbibliothek
- Hinzufügen eines SignalR-Hubs
- Hinzufügen von SignalR-Diensten und eines Endpunkts zum SignalR-Hub
- Hinzufügen eines Razor-Komponentencodes für Chat
Ausführliche Anleitungen zu den SignalR- und Blazor-Frameworks finden Sie in den folgenden Referenzdokumentationssätzen:
Zusätzliche Ressourcen
- Bearer Tokenauthentifizierung mit Identity Server-, WebSockets- und Server-Sent ereignissen
- Sichern eines SignalR-Hubs in Blazor WebAssembly-Apps
- Ursprungsübergreifende Aushandlung SignalR für die Authentifizierung
- SignalRKonfiguration
- ASP.NET Core-BlazorApps debuggen
-
Blazor GitHub-Beispiel-Repository (
dotnet/blazor-samples) (wie man herunterlädt)