Utiliser ASP.NET Core SignalR avec Blazor
Remarque
Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.
Important
Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.
Pour la version actuelle, consultez la version .NET 8 de cet article.
Ce didacticiel fournit une expérience de travail de base pour créer une application en temps réel SignalR à l'aide de Blazor. Cet article s’adresse aux développeurs qui connaissent déjà SignalR et qui cherchent à savoir comment utiliser SignalR dans une application Blazor. Pour obtenir une aide détaillée sur les frameworks SignalR et Blazor, consultez les ensembles de documentation de référence suivants et la documentation des API :
Apprenez à :
- Créer une application Blazor
- Ajouter la bibliothèque cliente SignalR
- Ajouter un hub SignalR
- Ajouter des services SignalR et un point de terminaison pour le hub SignalR
- Ajouter un code de composant Razor pour la conversation
À la fin de ce tutoriel, vous disposerez d’une application de conversation opérationnelle.
Prérequis
Visual Studio 2022 version 16.4 ou ultérieure avec la charge de travail Développement ASP.NET et web
Exemple d’application
Le téléchargement de l’exemple d’application de conversation du tutoriel n’est pas requis pour ce tutoriel. L’exemple d’application est l’application de travail opérationnelle finale produite en suivant les étapes de ce tutoriel.
Affichez ou téléchargez l’exemple de code (procédure de téléchargement)
Créer une application Web Blazor
Suivez l’aide pour votre choix d’outils :
Notes
Visual Studio 2022 ou version ultérieure et .NET Core SDK 8.0.0 ou version ultérieure sont requis.
Créez un projet.
Sélectionnez le modèle d'Blazorapplication Web. Sélectionnez Suivant.
Entrez BlazorSignalRApp dans le champ Nom du projet. Vérifiez que l’entrée Emplacement est correcte ou indiquez un emplacement pour le projet. Cliquez sur Suivant.
Confirmez que le Framework est .NET 8 ou version ultérieure. Sélectionnez Créer.
Ajouter la bibliothèque cliente SignalR
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet BlazorSignalRApp, puis sélectionnez Gérer les packages NuGet.
Dans la boîte de dialogue Gérer les packages NuGet, confirmez que la source du package est définie sur nuget.org.
Avec Parcourir sélectionné, entrez Microsoft.AspNetCore.SignalR.Client dans la zone de recherche.
Dans les résultats de la recherche, sélectionnez la dernière version du package Microsoft.AspNetCore.SignalR.Client. Cliquez sur Installer.
Si la fenêtre de dialogue Aperçu des modifications s’affiche, sélectionnez OK.
Si la boîte de dialogue Acceptation de la licence s’affiche, sélectionnez J’accepte si vous acceptez les termes du contrat de licence.
Ajouter un hub SignalR
Créez un dossier (plural) Hubs et ajoutez la classe ChatHub (Hubs/ChatHub.cs) suivante à la racine de l’application :
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);
}
}
Ajouter des services et un point de terminaison au hub SignalR
Ouvrez le fichier Program.
Ajoutez l’espace de noms de Microsoft.AspNetCore.ResponseCompression et de la classe ChatHub en haut du fichier :
using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;
Ajouter des services de middleware de compression de réponse :
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Utilisez Response Compression Middleware en haut de la configuration du pipeline de traitement :
app.UseResponseCompression();
Ajoutez un point de terminaison pour le hub immédiatement après la ligne routant les composants Razor (app.MapRazorComponents<T>()) :
app.MapHub<ChatHub>("/chathub");
Ajouter le code de composant Razor pour la conversation
Ouvrez le fichier Components/Pages/Home.razor .
Remplacez la balise par le code suivant :
@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();
}
}
}
Notes
Lorsque vous utilisez le Rechargement à chaud, désactivez l’intergiciel de compression de réponse dans l’environnement Development. Pour plus d’informations, consultez Aide relative à ASP.NET Core BlazorSignalR.
Exécuter l’application
Suivez l’aide relative à vos outils :
Appuyez sur F5 pour exécuter l’application avec le débogage ou sur Ctrl+F5 (Windows)/⌘+F5 (macOS) pour exécuter l’application sans débogage.
Copiez l’URL à partir de la barre d’adresse, ouvrez un autre onglet ou instance du navigateur, puis collez l’URL dans la barre d’adresse.
Choisissez un des navigateurs, entrez un nom et un message, puis sélectionnez le bouton pour envoyer le message. Le nom et le message sont affichés instantanément dans les deux pages :
Citations : Star Trek VI : Terre inconnue ©1991 Paramount
Expérience Blazor WebAssembly hébergée
Créer l’application
Suivez les instructions des outils que vous avez choisis pour créer une application Blazor WebAssembly hébergée :
Remarque
Visual Studio 2022 ou version ultérieure et SDK .NET Core 6.0.0 ou version ultérieure sont requis.
Créer un nouveau projet.
Choisissez le modèle d’application Blazor WebAssembly. Sélectionnez Suivant.
Entrez BlazorWebAssemblySignalRApp dans le champ Nom du projet. Vérifiez que l’entrée Emplacement est correcte ou indiquez un emplacement pour le projet. Sélectionnez Suivant.
Dans la boîte de dialogue Informations supplémentaires, cochez la case ASP.NET Core Hébergée.
Sélectionnez Créer.
Confirmez qu’une application hébergée Blazor WebAssembly a été créée : dans Explorateur de solutions, confirmez la présence d’un projet Client et d’un projet Server. Si les deux projets ne sont pas présents, recommencez et confirmez la sélection de la case ASP.NET Core Hébergé avant de sélectionner Créer.
Ajouter la bibliothèque cliente SignalR
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet BlazorWebAssemblySignalRApp.Client, puis sélectionnez Gérer les packages NuGet.
Dans la boîte de dialogue Gérer les packages NuGet, confirmez que la source du package est définie sur nuget.org.
Avec Parcourir sélectionné, entrez Microsoft.AspNetCore.SignalR.Client dans la zone de recherche.
Dans les résultats de la recherche, sélectionnez le package Microsoft.AspNetCore.SignalR.Client. Définissez la version pour qu’elle corresponde à l’infrastructure partagée de l’application. Cliquez sur Installer.
Si la fenêtre de dialogue Aperçu des modifications s’affiche, sélectionnez OK.
Si la boîte de dialogue Acceptation de la licence s’affiche, sélectionnez J’accepte si vous acceptez les termes du contrat de licence.
Ajouter un hub SignalR
Dans le projet BlazorWebAssemblySignalRApp.Server, créez un dossier (au pluriel) Hubs et ajoutez la classe ChatHub suivante (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);
}
}
}
Ajouter des services et un point de terminaison au hub SignalR
Dans le projet BlazorWebAssemblySignalRApp.Server, ouvrez le fichier Program.cs.
Ajoutez l’espace de noms de la classe ChatHub en haut du fichier :
using BlazorWebAssemblySignalRApp.Server.Hubs;
Ajoutez SignalR et des services Middleware de compression des réponses :
builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Utilisez le Middleware de compression des réponses en haut de la configuration du pipeline de traitement, de suite après la ligne qui génère l’application :
app.UseResponseCompression();
Entre les points de terminaison des contrôleurs et le secours côté client, ajoutez un point de terminaison pour le hub. De suite après la ligne app.MapControllers();, ajoutez la ligne suivante :
app.MapHub<ChatHub>("/chathub");
Dans le projet BlazorWebAssemblySignalRApp.Server, ouvrez le fichier Startup.cs.
Ajoutez l’espace de noms de la classe ChatHub en haut du fichier :
using BlazorWebAssemblySignalRApp.Server.Hubs;
Ajoutez SignalR et des services Middleware de compression des réponses :
services.AddSignalR();
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Utilisez Response Compression Middleware en haut de la configuration du pipeline de traitement :
app.UseResponseCompression();
Entre les points de terminaison des contrôleurs et le mécanisme de secours côté client, ajoutez un point de terminaison pour le hub de suite après la ligne endpoints.MapControllers(); :
endpoints.MapHub<ChatHub>("/chathub");
Ajouter le code de composant Razor pour la conversation
Dans le projet BlazorWebAssemblySignalRApp.Client, ouvrez le fichier Pages/Index.razor.
Remplacez la balise par le code suivant :
@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();
}
}
Notes
Lorsque vous utilisez le Rechargement à chaud, désactivez l’intergiciel de compression de réponse dans l’environnement Development. Pour plus d’informations, consultez Aide relative à ASP.NET Core BlazorSignalR.
Exécuter l’application
Suivez l’aide relative à vos outils :
Dans l'Explorateur de solutions, sélectionnez le projet BlazorWebAssemblySignalRApp.Server. Appuyez sur F5 pour exécuter l’application avec le débogage ou sur Ctrl+F5 (Windows)/⌘+F5 (macOS) pour exécuter l’application sans débogage.
Important
Lors de l’exécution d’une application Blazor WebAssembly hébergée, exécutez l’application à partir du projet de la solutionServer.
Google Chrome ou Microsoft Edge doit être le navigateur sélectionné pour une session de débogage.
Si l’application ne parvient pas à démarrer dans le navigateur :
- Dans la console .NET, confirmez que la solution s’exécute à partir du projet « Server ».
- Actualisez le navigateur à l’aide du bouton de rechargement du navigateur.
Copiez l’URL à partir de la barre d’adresse, ouvrez un autre onglet ou instance du navigateur, puis collez l’URL dans la barre d’adresse.
Choisissez un des navigateurs, entrez un nom et un message, puis sélectionnez le bouton pour envoyer le message. Le nom et le message sont affichés instantanément dans les deux pages :
Citations : Star Trek VI : Terre inconnue ©1991 Paramount
Expérience Blazor Server
Créer l’application
Suivez les instructions des outils que vous avez choisis pour créer une application Blazor Server :
Remarque
Visual Studio 2022 ou version ultérieure et SDK .NET Core 6.0.0 ou version ultérieure sont requis.
Créer un nouveau projet.
Sélectionnez le modèle d’application Blazor Server. Sélectionnez Suivant.
Entrez BlazorServerSignalRApp dans le champ Nom du projet. Vérifiez que l’entrée Emplacement est correcte ou indiquez un emplacement pour le projet. Sélectionnez Suivant.
Sélectionnez Créer.
Ajouter la bibliothèque cliente SignalR
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet BlazorServerSignalRApp, puis sélectionnez Gérer les packages NuGet.
Dans la boîte de dialogue Gérer les packages NuGet, confirmez que la source du package est définie sur nuget.org.
Avec Parcourir sélectionné, entrez Microsoft.AspNetCore.SignalR.Client dans la zone de recherche.
Dans les résultats de la recherche, sélectionnez le package Microsoft.AspNetCore.SignalR.Client. Définissez la version pour qu’elle corresponde à l’infrastructure partagée de l’application. Cliquez sur Installer.
Si la fenêtre de dialogue Aperçu des modifications s’affiche, sélectionnez OK.
Si la boîte de dialogue Acceptation de la licence s’affiche, sélectionnez J’accepte si vous acceptez les termes du contrat de licence.
Ajouter le package System.Text.Encodings.Web
Cette section s’applique uniquement aux applications pour ASP.NET Core version 3.x.
En raison d’un problème de résolution de package lors de l’utilisation de System.Text.Json 5.x dans une application ASP.NET Core 3.x, le projet nécessite une référence de package pour System.Text.Encodings.Web. Le problème sous-jacent a été résolu dans une version corrective et reporté vers ASP.NET Core 5.0. Pour plus d’informations, consultez System.Text.Json définit netcoreapp3.0 sans dépendances (dotnet/runtime #45560).
Pour ajouter System.Text.Encodings.Web au projet, suivez l’aide relative à votre choix d’outils :
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet BlazorServerSignalRApp, puis sélectionnez Gérer les packages NuGet.
Dans la boîte de dialogue Gérer les packages NuGet, confirmez que la source du package est définie sur nuget.org.
Avec Parcourir sélectionné, entrez System.Text.Encodings.Web dans la zone de recherche.
Dans les résultats de la recherche, sélectionnez le package System.Text.Encodings.Web. Sélectionnez la version du package qui correspond à l’infrastructure partagée en cours d’utilisation. Cliquez sur Installer.
Si la fenêtre de dialogue Aperçu des modifications s’affiche, sélectionnez OK.
Si la boîte de dialogue Acceptation de la licence s’affiche, sélectionnez J’accepte si vous acceptez les termes du contrat de licence.
Ajouter un hub SignalR
Créez un dossier (au pluriel) Hubs et ajoutez la classe ChatHub suivante (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);
}
}
}
Ajouter des services et un point de terminaison au hub SignalR
Ouvrez le fichier Program.cs.
Ajoutez l’espace de noms de Microsoft.AspNetCore.ResponseCompression et de la classe ChatHub en haut du fichier :
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Ajouter des services de middleware de compression de réponse :
builder.Services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Utilisez Response Compression Middleware en haut de la configuration du pipeline de traitement :
app.UseResponseCompression();
Entre les points de terminaison pour le mappage du hub Blazor et le mécanisme de secours côté client, ajoutez un point de terminaison pour le hub de suite après la ligne app.MapBlazorHub(); :
app.MapHub<ChatHub>("/chathub");
Ouvrez le fichier Startup.cs.
Ajoutez l’espace de noms de Microsoft.AspNetCore.ResponseCompression et de la classe ChatHub en haut du fichier :
using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;
Ajouter des services de middleware de compression de réponse :
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
Utilisez Response Compression Middleware en haut de la configuration du pipeline de traitement :
app.UseResponseCompression();
Entre les points de terminaison pour le mappage du hub Blazor et le mécanisme de secours côté client, ajoutez un point de terminaison pour le hub de suite après la ligne endpoints.MapBlazorHub(); :
endpoints.MapHub<ChatHub>("/chathub");
Ajouter le code de composant Razor pour la conversation
Ouvrez le fichier Pages/Index.razor .
Remplacez la balise par le code suivant :
@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();
}
}
Notes
Lorsque vous utilisez le Rechargement à chaud, désactivez l’intergiciel de compression de réponse dans l’environnement Development. Pour plus d’informations, consultez Aide relative à ASP.NET Core BlazorSignalR.
Exécuter l’application
Suivez l’aide relative à vos outils :
Appuyez sur F5 pour exécuter l’application avec le débogage ou sur Ctrl+F5 (Windows)/⌘+F5 (macOS) pour exécuter l’application sans débogage.
Copiez l’URL à partir de la barre d’adresse, ouvrez un autre onglet ou instance du navigateur, puis collez l’URL dans la barre d’adresse.
Choisissez un des navigateurs, entrez un nom et un message, puis sélectionnez le bouton pour envoyer le message. Le nom et le message sont affichés instantanément dans les deux pages :
Citations : Star Trek VI : Terre inconnue ©1991 Paramount
Étapes suivantes
Dans ce didacticiel, vous avez appris à :
- Créer une application Blazor
- Ajouter la bibliothèque cliente SignalR
- Ajouter un hub SignalR
- Ajouter des services SignalR et un point de terminaison pour le hub SignalR
- Ajouter un code de composant Razor pour la conversation
Pour obtenir une aide détaillée sur les frameworks SignalR et Blazor, consultez les ensembles de documentation de référence suivants :
Ressources supplémentaires
- Authentification par jeton du porteur avec Identity Server, WebSockets et Server-Sent Events
- Sécuriser un hub SignalR dans les applications Blazor WebAssembly
- SignalR Négociation entre origines pour l’authentification
- Configuration SignalR
- Déboguer des applications ASP.NET Core Blazor
- Conseils d’atténuation des menaces pour le rendu statique côté serveur de Blazor ASP.NET Core
- Conseils d’atténuation des menaces pour le rendu interactif côté serveur de Blazor ASP.NET Core
- Dépôt GitHub d’exemples Blazor (
dotnet/blazor-samples) (Comment télécharger)
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour