Usare ASP.NET Core SignalR con Blazor
Nota
Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.
Importante
Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.
Per la versione corrente, vedere la versione .NET 8 di questo articolo.
Questa esercitazione offre un'esperienza di lavoro di base per la creazione di un'app in tempo reale con SignalRBlazor. Questo articolo è utile per gli sviluppatori che hanno già familiarità con SignalR e cercano di comprendere come usare SignalR in un'app Blazor . Per indicazioni dettagliate sui SignalR framework e Blazor , vedere i set di documentazione di riferimento seguenti e la documentazione dell'API:
Scopri come:
- Creare un'app Blazor
- Aggiungere la SignalR libreria client
- Aggiungere un SignalR hub
- Aggiungere SignalR servizi e un endpoint per l'hub SignalR
- Aggiungere un Razor codice componente per la chat
Al termine di questa esercitazione si avrà un'app di chat funzionante.
Prerequisiti
Visual Studio 2022 o versione successiva con il carico di lavoro ASP.NET e sviluppo Web
Esempio di app
Il download dell'app di chat di esempio dell'esercitazione non è necessario per questa esercitazione. L'app di esempio è l'app finale e funzionante prodotta seguendo i passaggi di questa esercitazione.
Visualizzare o scaricare il codice di esempio (procedura per il download)
Creare un'app Blazor Web
Seguire le indicazioni per la scelta degli strumenti:
Nota
Sono necessari Visual Studio 2022 o versioni successive e .NET Core SDK 8.0.0 o versioni successive.
Creare un nuovo progetto.
Selezionare il Blazor modello App Web. Selezionare Avanti.
Digitare BlazorSignalRApp il campo Nome progetto. Verificare che la voce Location sia corretta o specificare un percorso per il progetto. Selezionare Avanti.
Verificare che Framework sia .NET 8 o versione successiva. Seleziona Crea.
Aggiungere la SignalR libreria client
In Esplora soluzioni fare clic con il pulsante destro del mouse sul BlazorSignalRApp progetto e scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet verificare che l'originepacchetto sia impostata su nuget.org.
Con Sfoglia selezionato, digitare Microsoft.AspNetCore.SignalR.Client nella casella di ricerca.
Nei risultati della ricerca selezionare la versione più recente del Microsoft.AspNetCore.SignalR.Client pacchetto. Selezionare Installa.
Se viene visualizzata la finestra di dialogo Anteprima modifiche , selezionare OK.
Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.
Aggiungere un SignalR hub
Creare una Hubs cartella (plurale) e aggiungere la classe seguente ChatHub (Hubs/ChatHub.cs) alla radice dell'app:
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);
}
}
Aggiungere servizi e un endpoint per l'hub SignalR
Apri il file Program.
Aggiungere gli spazi dei nomi per Microsoft.AspNetCore.ResponseCompression e la ChatHub classe all'inizio del file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;
Aggiungere i servizi middleware di compressione della risposta:
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Usare il middleware di compressione della risposta nella parte superiore della configurazione della pipeline di elaborazione:
app.UseResponseCompression();
Aggiungere un endpoint per l'hub subito dopo la riga che esegue il mapping Razor dei componenti (app.MapRazorComponents<T>()):
app.MapHub<ChatHub>("/chathub");
Aggiungere Razor il codice del componente per la chat
Apri il file Components/Pages/Home.razor.
Sostituire il markup con il codice seguente:
@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable
<PageTitle>Home</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);
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();
}
}
}
Nota
Disabilitare il middleware di compressione della risposta nell'ambiente Development quando si usa Ricaricamento rapido. Per altre informazioni, vedere ASP.NET Linee guida di baseBlazorSignalR.
Eseguire l'app
Seguire le indicazioni per gli strumenti:
Premere F5 per eseguire l'app con debug o CTRL+F5 (Windows)/⌘+F5 (macOS) per eseguire l'app senza eseguire il debug.
Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.
Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:
Citazioni: Star Trek VI: The Undiscovered Country ©1991 Paramount
Esperienza ospitata Blazor WebAssembly
Creare l'app
Seguire le indicazioni per la scelta degli strumenti per creare un'app ospitata Blazor WebAssembly :
Nota
Sono necessari Visual Studio 2022 o versioni successive e .NET Core SDK 6.0.0 o versioni successive.
Creare un nuovo progetto.
Scegliere il Blazor WebAssembly modello App . Selezionare Avanti.
Digitare BlazorWebAssemblySignalRApp il campo Nome progetto. Verificare che la voce Location sia corretta o specificare un percorso per il progetto. Selezionare Avanti.
Nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted .
Seleziona Crea.
Verificare che sia stata creata un'app ospitataBlazor WebAssembly: in Esplora soluzioni verificare la presenza di un Client progetto e di un Server progetto. Se i due progetti non sono presenti, ricominciare e confermare la selezione della casella di controllo ASP.NET Core Hosted prima di selezionare Crea.
Aggiungere la SignalR libreria client
In Esplora soluzioni fare clic con il pulsante destro del mouse sul BlazorWebAssemblySignalRApp.Client progetto e scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet verificare che l'originepacchetto sia impostata su nuget.org.
Con Sfoglia selezionato, digitare Microsoft.AspNetCore.SignalR.Client nella casella di ricerca.
Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.
Se viene visualizzata la finestra di dialogo Anteprima modifiche , selezionare OK.
Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.
Aggiungere un SignalR hub
BlazorWebAssemblySignalRApp.Server Nel progetto creare una Hubs cartella (plurale) e aggiungere la classe seguente ChatHub (Hubs/ChatHub.cs):
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);
}
}
}
Aggiungere servizi e un endpoint per l'hub SignalR
Nel progetto BlazorWebAssemblySignalRApp.Server aprire il file Program.cs.
Aggiungere lo spazio dei nomi per la ChatHub classe all'inizio del file:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Aggiungere SignalR e rispondere ai servizi middleware per la compressione delle risposte:
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Usare il middleware di compressione della risposta nella parte superiore della configurazione della pipeline di elaborazione immediatamente dopo la riga che compila l'app:
app.UseResponseCompression();
Tra gli endpoint per i controller e il fallback sul lato client, aggiungere un endpoint per l'hub. Subito dopo la riga app.MapControllers();aggiungere la riga seguente:
app.MapHub<ChatHub>("/chathub");
Nel progetto BlazorWebAssemblySignalRApp.Server aprire il file Startup.cs.
Aggiungere lo spazio dei nomi per la ChatHub classe all'inizio del file:
using BlazorWebAssemblySignalRApp.Server.Hubs;
Aggiungere SignalR e rispondere ai servizi middleware per la compressione delle risposte:
services.AddSignalR();
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Usare il middleware di compressione della risposta nella parte superiore della configurazione della pipeline di elaborazione:
app.UseResponseCompression();
Tra gli endpoint per i controller e il fallback sul lato client, aggiungere un endpoint per l'hub immediatamente dopo la riga endpoints.MapControllers();:
endpoints.MapHub<ChatHub>("/chathub");
Aggiungere Razor il codice del componente per la chat
Nel progetto BlazorWebAssemblySignalRApp.Client aprire il file Pages/Index.razor.
Sostituire il markup con il codice seguente:
@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();
}
}
Nota
Disabilitare il middleware di compressione della risposta nell'ambiente Development quando si usa Ricaricamento rapido. Per altre informazioni, vedere ASP.NET Linee guida di baseBlazorSignalR.
Eseguire l'app
Seguire le indicazioni per gli strumenti:
In Esplora soluzioni selezionare il progetto BlazorWebAssemblySignalRApp.Server. Premere F5 per eseguire l'app con debug o CTRL+F5 (Windows)/⌘+F5 (macOS) per eseguire l'app senza eseguire il debug.
Importante
Quando si esegue un'app ospitata Blazor WebAssembly , eseguire l'app dal progetto dellaServer soluzione.
Google Chrome o Microsoft Edge devono essere il browser selezionato per una sessione di debug.
Se l'app non viene avviata nel browser:
- Nella console .NET verificare che la soluzione sia in esecuzione dal progetto "Server".
- Aggiornare il browser usando il pulsante ricaricamento del browser.
Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.
Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:
Citazioni: Star Trek VI: The Undiscovered Country ©1991 Paramount
Blazor Server Esperienza
Creare l'app
Seguire le indicazioni per la scelta degli strumenti per creare un'app Blazor Server :
Nota
Sono necessari Visual Studio 2022 o versioni successive e .NET Core SDK 6.0.0 o versioni successive.
Creare un nuovo progetto.
Selezionare il Blazor Server modello App . Selezionare Avanti.
Digitare BlazorServerSignalRApp il campo Nome progetto. Verificare che la voce Location sia corretta o specificare un percorso per il progetto. Selezionare Avanti.
Seleziona Crea.
Aggiungere la SignalR libreria client
In Esplora soluzioni fare clic con il pulsante destro del mouse sul BlazorServerSignalRApp progetto e scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet verificare che l'originepacchetto sia impostata su nuget.org.
Con Sfoglia selezionato, digitare Microsoft.AspNetCore.SignalR.Client nella casella di ricerca.
Nei risultati della ricerca selezionare il Microsoft.AspNetCore.SignalR.Client pacchetto. Impostare la versione in modo che corrisponda al framework condiviso dell'app. Selezionare Installa.
Se viene visualizzata la finestra di dialogo Anteprima modifiche , selezionare OK.
Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.
Aggiungere il pacchetto System.Text.Encodings.Web
Questa sezione si applica solo alle app per ASP.NET Core versione 3.x.
A causa di un problema di risoluzione dei pacchetti quando si usa System.Text.Json 5.x in un'app ASP.NET Core 3.x, il progetto richiede un riferimento al pacchetto per System.Text.Encodings.Web. Il problema sottostante è stato risolto in una versione patch ed è stato eseguito il backporting in ASP.NET Core 5.0. Per altre informazioni, vedere System.Text.Json definisce netcoreapp3.0 senza dipendenze (dotnet/runtime #45560).
Per aggiungere System.Text.Encodings.Web al progetto, seguire le indicazioni per la scelta degli strumenti:
In Esplora soluzioni fare clic con il pulsante destro del mouse sul BlazorServerSignalRApp progetto e scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet verificare che l'originepacchetto sia impostata su nuget.org.
Con Sfoglia selezionato, digitare System.Text.Encodings.Web nella casella di ricerca.
Nei risultati della ricerca selezionare il System.Text.Encodings.Web pacchetto. Selezionare la versione del pacchetto corrispondente al framework condiviso in uso. Selezionare Installa.
Se viene visualizzata la finestra di dialogo Anteprima modifiche , selezionare OK.
Se viene visualizzata la finestra di dialogo Accettazione licenza, selezionare Accetto se si accettano le condizioni di licenza.
Aggiungere un SignalR hub
Creare una Hubs cartella (plurale) e aggiungere la classe seguente ChatHub (Hubs/ChatHub.cs):
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);
}
}
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);
}
}
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);
}
}
}
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);
}
}
}
Aggiungere servizi e un endpoint per l'hub SignalR
Apri il file Program.cs.
Aggiungere gli spazi dei nomi per Microsoft.AspNetCore.ResponseCompression e la ChatHub classe all'inizio del file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Aggiungere i servizi middleware di compressione della risposta:
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Usare il middleware di compressione della risposta nella parte superiore della configurazione della pipeline di elaborazione:
app.UseResponseCompression();
Tra gli endpoint per il mapping dell'hub Blazor e il fallback sul lato client, aggiungere un endpoint per l'hub immediatamente dopo la riga app.MapBlazorHub();:
app.MapHub<ChatHub>("/chathub");
Apri il file Startup.cs.
Aggiungere gli spazi dei nomi per Microsoft.AspNetCore.ResponseCompression e la ChatHub classe all'inizio del file:
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Aggiungere i servizi middleware di compressione della risposta:
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Usare il middleware di compressione della risposta nella parte superiore della configurazione della pipeline di elaborazione:
app.UseResponseCompression();
Tra gli endpoint per il mapping dell'hub Blazor e il fallback sul lato client, aggiungere un endpoint per l'hub immediatamente dopo la riga endpoints.MapBlazorHub();:
endpoints.MapHub<ChatHub>("/chathub");
Aggiungere Razor il codice del componente per la chat
Apri il file Pages/Index.razor.
Sostituire il markup con il codice seguente:
@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);
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();
}
}
}
@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);
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();
}
}
}
@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();
}
}
}
@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();
}
}
Nota
Disabilitare il middleware di compressione della risposta nell'ambiente Development quando si usa Ricaricamento rapido. Per altre informazioni, vedere ASP.NET Linee guida di baseBlazorSignalR.
Eseguire l'app
Seguire le indicazioni per gli strumenti:
Premere F5 per eseguire l'app con debug o CTRL+F5 (Windows)/⌘+F5 (macOS) per eseguire l'app senza eseguire il debug.
Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.
Scegliere uno dei browser, immettere un nome e un messaggio e selezionare il pulsante per inviare il messaggio. Il nome e il messaggio vengono visualizzati immediatamente in entrambe le pagine:
Citazioni: Star Trek VI: The Undiscovered Country ©1991 Paramount
Passaggi successivi
Questa esercitazione ha descritto come:
- Creare un'app Blazor
- Aggiungere la SignalR libreria client
- Aggiungere un SignalR hub
- Aggiungere SignalR servizi e un endpoint per l'hub SignalR
- Aggiungere un Razor codice componente per la chat
Per indicazioni dettagliate sui SignalR framework e Blazor , vedere i set di documentazione di riferimento seguenti:
Risorse aggiuntive
- Autenticazione del token di connessione con Identity server, WebSocket ed eventi inviati dal server
- Proteggere un SignalR hub nelle Blazor WebAssembly app
- SignalR negoziazione tra origini per l'autenticazione
- SignalR Configurazione
- Eseguire il debug di app ASP.NET Core Blazor
- Linee guida per la mitigazione delle minacce per ASP.NET rendering lato server statico Core Blazor
- Linee guida per la mitigazione delle minacce per ASP.NET rendering lato server interattivo Core Blazor
- Blazorrepository GitHub di esempi () (
dotnet/blazor-samplescome scaricare)
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per