Partager via

Utiliser ASP.NET Core SignalR avec Blazor

Note

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 9 de cet article.

Warning

Cette version d'ASP.NET Core n'est plus prise en charge. Pour plus d’informations, consultez la stratégie de prise en charge de .NET et .NET Core. Pour la version actuelle, consultez la version .NET 9 de cet article.

Importante

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

Prerequisites

Visual Studio (dernière version) avec la charge de travail ASP.NET et développement 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. Lorsque vous ouvrez le référentiel d’exemples, ouvrez le dossier de la version que vous souhaitez cibler et recherchez l’exemple nommé BlazorSignalRApp

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. Lorsque vous ouvrez le référentiel d’exemples, ouvrez le dossier de la version que vous souhaitez cibler et recherchez l’exemple nommé BlazorWebAssemblySignalRApp

Afficher ou télécharger l’exemple de code (comment télécharger)

Créez une classe Blazor Web App

Suivez l’aide pour votre choix d’outils :

Note

Visual Studio 2022 ou version ultérieure et le Kit de développement logiciel (SDK) .NET 8 ou version ultérieure sont requis.

Dans Visual Studio :

  • Sélectionnez Créer un nouveau projet dans la fenêtre Démarrer ou sélectionnez Fichier>Nouveau>projet dans la barre de menus.
  • Dans la boîte de dialogue Créer un nouveau projet, sélectionnez Blazor Web App dans la liste des modèles de projet. Sélectionnez le bouton Suivant.
  • Dans la boîte de dialogue Configurer votre nouveau projet, nommez le projet BlazorSignalRApp dans le champ Nom du projet, en respectant la casse. Il est important d’utiliser exactement ce nom de projet afin de garantir que les espaces de noms correspondent pour le code que vous copiez du didacticiel dans l’application que vous créez.
  • Vérifiez que l’emplacement de l’application est approprié. Laissez la case Placer la solution et le projet dans le même répertoire cochée. Sélectionnez le bouton Suivant.
  • Dans la boîte de dialogue Informations supplémentaires, utilisez les paramètres suivants :
    • Framework : vérifiez que le dernier framework est sélectionné. Si la liste déroulante Framework de Visual Studio ne comprend pas le dernier framework .NET disponible, mettez à jour Visual Studio et redémarrez le didacticiel.
    • Type d’authentification : Aucun
    • Configurer pour HTTPS : Sélectionné
    • Mode de rendu interactif : WebAssembly
    • Emplacement de l’interactivité : Par page/composant
    • Inclure des pages d’exemple : Sélectionné
    • Ne pas utiliser les instructions de niveau supérieur : Non sélectionné
    • Utilisez le TLD .dev.localhost dans l’URL de l’application : Non sélectionné
    • Sélectionnez Créer.

Les instructions de cet article utilisent un composant WebAssembly pour le client SignalR, car il n’est pas judicieux d’utiliser SignalR pour se connecter à un hub à partir d’un composant Interactive Server dans la même application, car cela peut entraîner l’épuisement des ports du serveur.

Ajouter la bibliothèque cliente SignalR

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet BlazorSignalRApp.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 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

Dans le projet serveur BlazorSignalRApp, créez un dossier Hubs (au pluriel) et ajoutez la classe ChatHub suivante (Hubs/ChatHub.cs) :

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 du projet serveur BlazorSignalRApp.

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;

Ajoutez SignalR et des services Middleware de compression des réponses :

builder.Services.AddSignalR();

builder.Services.AddResponseCompression(opts =>
{
   opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
       [ "application/octet-stream" ]);
});

Utilisez Response Compression Middleware en haut de la configuration du pipeline de traitement. Placez la ligne de code suivante immédiatement après la ligne qui compile l’application (var app = builder.Build();) :

app.UseResponseCompression();

Ajoutez un point de terminaison pour le hub :

app.MapHub<ChatHub>("/chathub");

Ajouter le code de composant Razor pour la conversation

Ajoutez le fichier Pages/Chat.razor suivant au projet BlazorSignalRApp.Client :

@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();
        }
    }
}

Ajoutez une entrée au composant NavMenu pour accéder à la page de chat. Dans Components/Layout/NavMenu.razor, immédiatement après le bloc <div> pour le composant Weather, ajoutez le bloc <div> suivant :

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

Note

Lorsque vous utilisez le Development, désactivez l’intergiciel de compression de réponse dans l’environnement . Pour plus d’informations, consultez Conseils relatifs à ASP.NET Core BlazorSignalR.

Exécuter l'application

Suivez l’aide relative à vos outils :

Avec le projet BlazorSignalRApp serveur sélectionné dans de l’Explorateur de solutions, appuyez sur F5 pour exécuter l’application avec débogage ou Ctrl+F5 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 :

L’application SignalRBlazor s’ouvre dans deux fenêtres de navigateur affichant les messages échangés.

Citations : Star Trek VI : Terre inconnue ©1991 Paramount

Expérience Blazor WebAssembly hébergée

Créer l’application

Suivez les instructions relatives à l’outil de votre choix pour créer une application Blazor WebAssembly hébergée :

Note

Visual Studio 2022 ou version ultérieure et .NET ou version ultérieure 6 SDK sont requis.

Créer un nouveau projet.

Choisissez le modèle d’applicationBlazor 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();
    }
}

Note

Lorsque vous utilisez le Development, désactivez l’intergiciel de compression de réponse dans l’environnement . Pour plus d’informations, consultez Conseils relatifs à 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 débogage ou Ctrl+F5 pour exécuter l’application sans débogage.

Importante

Lorsque vous exécutez une application Blazor WebAssembly hébergée, exécutez l’applicationServer à partir du projet de la solution.

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 :

L’application SignalRBlazor s’ouvre dans deux fenêtres de navigateur affichant les messages échangés.

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 :

Présentation d’SignalRASP.NET Core ASP.NET Core Blazor

Ressources supplémentaires

  • Last updated on