Didacticiel : prise en main de ASP.NET Core SignalRTutorial: Get started with ASP.NET Core SignalR

Ce didacticiel enseigne les bases de la création d’une application en temps réel à l’aide de SignalR.This tutorial teaches the basics of building a real-time app using SignalR. Vous apprenez à :You learn how to:

  • Créez un projet web.Create a web project.
  • Ajoutez la bibliothèque cliente SignalR.Add the SignalR client library.
  • Créez un hub SignalR.Create a SignalR hub.
  • Configurez le projet pour qu’il utilise SignalR.Configure the project to use SignalR.
  • Ajouter du code qui envoie des messages de n’importe quel client vers tous les clients connectés.Add code that sends messages from any client to all connected clients.

À la fin, vous disposerez d’une application de conversation opérationnelle :At the end, you'll have a working chat app:

[! Opérationnel. Exemple d’application non-LOC (Signalr)]

Configuration requisePrerequisites

Créer un projet application webCreate a web app project

  • Dans le menu, sélectionnez Fichier > Nouveau projet.From the menu, select File > New Project.

  • Dans la boîte de dialogue Créer un projet, sélectionnez Application web ASP.NET Core, puis Suivant.In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

  • Dans la boîte de dialogue Configurer votre nouveau projet, sélectionnez SignalRChat, puis Créer.In the Configure your new project dialog, name the project SignalRChat, and then select Create.

  • Dans la boîte de dialogue créer une application web ASP.net Core , sélectionnez .net Core et ASP.net Core 3,0.In the Create a new ASP.NET Core web Application dialog, select .NET Core and ASP.NET Core 3.0.

  • Sélectionnez Application web pour créer un projet qui utilise Razor Pages, puis Créer.Select Web Application to create a project that uses Razor Pages, and then select Create.

    Boîte de dialogue Nouveau projet dans Visual Studio

Ajouter la bibliothèque cliente SignalRAdd the SignalR client library

La bibliothèque SignalR Server est incluse dans l’infrastructure partagée ASP.NET Core 3,0.The SignalR server library is included in the ASP.NET Core 3.0 shared framework. La bibliothèque cliente JavaScript n’est pas incluse automatiquement dans le projet.The JavaScript client library isn't automatically included in the project. Pour ce tutoriel, vous utilisez le gestionnaire de bibliothèque (LibMan) pour obtenir la bibliothèque de client à partir de unpkg.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg est un réseau de distribution de contenu (CDN) qui peut fournir tout ce qui est trouvé dans npm, le gestionnaire de package Node.js.unpkg is a content delivery network (CDN)) that can deliver anything found in npm, the Node.js package manager.

  • Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis sélectionnez Ajouter > Bibliothèque côté client.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Dans la boîte de dialogue Ajouter une bibliothèque côté Client, pour Fournisseur sélectionnez unpkg.In the Add Client-Side Library dialog, for Provider select unpkg.

  • Pour Bibliothèque, entrez @microsoft/signalr@latest.For Library, enter @microsoft/signalr@latest.

  • Sélectionnez Choisir des fichiers spécifiques, développez le dossier dist/browser, puis sélectionnez signalr.js et signalr.min.js.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Définissez emplacement cible sur wwwroot/js/signalr/ , puis sélectionnez installer.Set Target Location to wwwroot/js/signalr/, and select Install.

    Boîte de dialogue Ajouter une bibliothèque côté client - sélectionner la bibliothèque

    LibMan crée un dossier wwwroot/js/signalr et y copie les fichiers sélectionnés.LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

Créer un hub SignalRCreate a SignalR hub

Un hub est une classe servant de pipeline global qui gère les communications client-serveur.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Dans le dossier de projet SignalRChat, créez un dossier Hubs.In the SignalRChat project folder, create a Hubs folder.

  • Dans le dossier Hubs, créez un fichier ChatHub.cs avec le code suivant :In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    La classe ChatHub hérite de la classe Hub SignalR.The ChatHub class inherits from the SignalR Hub class. La classe Hub gère les connexions, les groupes et la messagerie.The Hub class manages connections, groups, and messaging.

    La méthode SendMessage peut être appelée par un client connecté afin d’envoyer un message à tous les clients.The SendMessage method can be called by a connected client to send a message to all clients. Le code client JavaScript qui appelle la méthode est indiqué plus loin dans le didacticiel.JavaScript client code that calls the method is shown later in the tutorial. SignalR code est asynchrone pour fournir une évolutivité maximale. code is asynchronous to provide maximum scalability.

Configurer SignalRConfigure SignalR

Le serveur de SignalR doit être configuré pour transmettre les demandes SignalR à SignalR.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Ajoutez le code en surbrillance suivant au fichier Startup.cs.Add the following highlighted code to the Startup.cs file.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chatHub");
                });
            }
        }
    }
    

    Ces modifications ajoutent des SignalR aux systèmes de routage et d’injection de dépendances ASP.NET Core.These changes add SignalR to the ASP.NET Core dependency injection and routing systems.

Ajouter SignalR code clientAdd SignalR client code

  • Remplacez le contenu de Pages\Index.cshtml par le code suivant :Replace the content in Pages\Index.cshtml with the following code:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Le code précédent :The preceding code:

    • Crée des zones de texte pour le nom et le texte du message, ainsi qu’un bouton Envoyer.Creates text boxes for name and message text, and a submit button.
    • Crée une liste avec id="messagesList" pour l’affichage des messages reçus à partir du concentrateur SignalR.Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • Contient des références de script à SignalR et au code d’application de conversation. js que vous créez à l’étape suivante.Includes script references to SignalR and the chat.js application code that you create in the next step.
  • Dans le dossier wwwroot/js, créez un fichier chat.js avec le code suivant :In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Le code précédent :The preceding code:

    • Crée et lance une connexion.Creates and starts a connection.
    • Ajoute au bouton Envoyer un gestionnaire qui envoie des messages au hub.Adds to the submit button a handler that sends messages to the hub.
    • Ajoute à l’objet de connexion un gestionnaire qui reçoit des messages à partir du hub et les ajoute à la liste.Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Exécuter l'applicationRun the app

  • Appuyez sur Ctrl+F5 pour exécuter l’application sans débogage.Press CTRL+F5 to run the app without debugging.
  • 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.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Choisissez un des navigateurs, entrez un nom et un message, puis sélectionnez le bouton Envoyer le message.Choose either browser, enter a name and message, and select the Send Message button.

    Le nom et le message sont affichés sur les deux pages instantanément.The name and message are displayed on both pages instantly.

    [! Opérationnel. Exemple d’application non-LOC (Signalr)]

Conseil

  • Si l’application ne fonctionne pas, ouvrez vos outils de développement (F12) de navigateur et accédez à la console.If the app doesn't work, open your browser developer tools (F12) and go to the console. Vous pouvez observer des erreurs liées à votre code HTML et JavaScript.You might see errors related to your HTML and JavaScript code. Par exemple, supposez que vous placez signalr.js dans un dossier autre que celui stipulé.For example, suppose you put signalr.js in a different folder than directed. Dans ce cas, la référence à ce fichier ne fonctionnera pas et vous verrez une erreur 404 dans la console.In that case the reference to that file won't work and you'll see a 404 error in the console. Erreur de fichier SignalR.js introuvablesignalr.js not found error

  • Si vous recevez l’erreur ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY dans Chrome, exécutez les commandes suivantes pour mettre à jour votre certificat de développement :If you get the error ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome, run these commands to update your development certificate:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

Ce didacticiel enseigne les bases de la création d’une application en temps réel à l’aide de SignalR.This tutorial teaches the basics of building a real-time app using SignalR. Vous apprenez à :You learn how to:

  • Créez un projet web.Create a web project.
  • Ajoutez la bibliothèque cliente SignalR.Add the SignalR client library.
  • Créez un hub SignalR.Create a SignalR hub.
  • Configurez le projet pour qu’il utilise SignalR.Configure the project to use SignalR.
  • Ajouter du code qui envoie des messages de n’importe quel client vers tous les clients connectés.Add code that sends messages from any client to all connected clients.
    À la fin, vous disposerez d’une application de conversation active : [ ! Opérationnel. NO-LOC (Signalr)] exemple d’applicationAt the end, you'll have a working chat app: SignalR sample app

Configuration requisePrerequisites

Avertissement

Si vous utilisez Visual Studio 2017, consultez le problème no 3124 dotnet/sdk pour plus d’informations sur les versions du Kit SDK .NET Core qui ne fonctionnent pas avec Visual Studio.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Créer un projet webCreate a web project

  • Dans le menu, sélectionnez Fichier > Nouveau projet.From the menu, select File > New Project.

  • Dans la boîte de dialogue Nouveau projet, sélectionnez Installé > Visual C# > Web > Application web ASP.NET Core.In the New Project dialog, select Installed > Visual C# > Web > ASP.NET Core Web Application. Nommez le projet SignalRChat.Name the project SignalRChat.

    Boîte de dialogue Nouveau projet dans Visual Studio

  • Sélectionnez Application web pour créer un projet qui utilise Razor Pages.Select Web Application to create a project that uses Razor Pages.

  • Sélectionnez .NET Core comme framework cible, sélectionnez ASP.NET Core 2.2, puis cliquez sur OK.Select a target framework of .NET Core, select ASP.NET Core 2.2, and click OK.

    Boîte de dialogue Nouveau projet dans Visual Studio

Ajouter la bibliothèque cliente SignalRAdd the SignalR client library

La bibliothèque SignalR Server est incluse dans le sous-package Microsoft.AspNetCore.App.The SignalR server library is included in the Microsoft.AspNetCore.App metapackage. La bibliothèque cliente JavaScript n’est pas incluse automatiquement dans le projet.The JavaScript client library isn't automatically included in the project. Pour ce tutoriel, vous utilisez le gestionnaire de bibliothèque (LibMan) pour obtenir la bibliothèque de client à partir de unpkg.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg est un réseau de distribution de contenu (CDN) qui peut fournir tout ce qui est trouvé dans npm, le gestionnaire de package Node.js.unpkg is a content delivery network (CDN)) that can deliver anything found in npm, the Node.js package manager.

  • Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis sélectionnez Ajouter > Bibliothèque côté client.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Dans la boîte de dialogue Ajouter une bibliothèque côté Client, pour Fournisseur sélectionnez unpkg.In the Add Client-Side Library dialog, for Provider select unpkg.

  • Pour Bibliothèque, entrez @microsoft/signalr@3, puis sélectionnez la version la plus récente qui n’est pas en préversion.For Library, enter @microsoft/signalr@3, and select the latest version that isn't preview.

    Boîte de dialogue Ajouter une bibliothèque côté client - sélectionner la bibliothèque

  • Sélectionnez Choisir des fichiers spécifiques, développez le dossier dist/browser, puis sélectionnez signalr.js et signalr.min.js.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Définissez Emplacement cible sur wwwroot/lib/signalr/ , puis sélectionnez Installer.Set Target Location to wwwroot/lib/signalr/, and select Install.

    Boîte de dialogue Ajouter une bibliothèque côté client - sélectionner les fichiers et la destination

    LibMan crée un dossier wwwroot/lib/signalr et y copie les fichiers sélectionnés.LibMan creates a wwwroot/lib/signalr folder and copies the selected files to it.

Créer un hub SignalRCreate a SignalR hub

Un hub est une classe servant de pipeline global qui gère les communications client-serveur.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Dans le dossier de projet SignalRChat, créez un dossier Hubs.In the SignalRChat project folder, create a Hubs folder.

  • Dans le dossier Hubs, créez un fichier ChatHub.cs avec le code suivant :In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    La classe ChatHub hérite de la classe Hub SignalR.The ChatHub class inherits from the SignalR Hub class. La classe Hub gère les connexions, les groupes et la messagerie.The Hub class manages connections, groups, and messaging.

    La méthode SendMessage peut être appelée par un client connecté afin d’envoyer un message à tous les clients.The SendMessage method can be called by a connected client to send a message to all clients. Le code client JavaScript qui appelle la méthode est indiqué plus loin dans le didacticiel.JavaScript client code that calls the method is shown later in the tutorial. SignalR code est asynchrone pour fournir une évolutivité maximale. code is asynchronous to provide maximum scalability.

Configurer SignalRConfigure SignalR

Le serveur de SignalR doit être configuré pour transmettre les demandes SignalR à SignalR.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Ajoutez le code en surbrillance suivant au fichier Startup.cs.Add the following highlighted code to the Startup.cs file.

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.Configure<CookiePolicyOptions>(options =>
                {
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                    options.CheckConsentNeeded = context => true;
                    options.MinimumSameSitePolicy = SameSiteMode.None;
                });
    
    
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseCookiePolicy();
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chatHub");
                });
                app.UseMvc();
            }
        }
    }
    

    Ces modifications ajoutent des SignalR au système d’injection de dépendances ASP.NET Core et au pipeline d’intergiciel (middleware).These changes add SignalR to the ASP.NET Core dependency injection system and the middleware pipeline.

Ajouter SignalR code clientAdd SignalR client code

  • Remplacez le contenu de Pages\Index.cshtml par le code suivant :Replace the content in Pages\Index.cshtml with the following code:

    @page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                User..........<input type="text" id="userInput" />
                <br />
                Message...<input type="text" id="messageInput" />
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Le code précédent :The preceding code:

    • Crée des zones de texte pour le nom et le texte du message, ainsi qu’un bouton Envoyer.Creates text boxes for name and message text, and a submit button.
    • Crée une liste avec id="messagesList" pour l’affichage des messages reçus à partir du concentrateur SignalR.Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • Contient des références de script à SignalR et au code d’application de conversation. js que vous créez à l’étape suivante.Includes script references to SignalR and the chat.js application code that you create in the next step.
  • Dans le dossier wwwroot/js, créez un fichier chat.js avec le code suivant :In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function(){
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Le code précédent :The preceding code:

    • Crée et lance une connexion.Creates and starts a connection.
    • Ajoute au bouton Envoyer un gestionnaire qui envoie des messages au hub.Adds to the submit button a handler that sends messages to the hub.
    • Ajoute à l’objet de connexion un gestionnaire qui reçoit des messages à partir du hub et les ajoute à la liste.Adds to the connection object a handler that receives messages from the hub and adds them to the list.

Exécuter l'applicationRun the app

  • Appuyez sur Ctrl+F5 pour exécuter l’application sans débogage.Press CTRL+F5 to run the app without debugging.
  • 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.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Choisissez un des navigateurs, entrez un nom et un message, puis sélectionnez le bouton Envoyer le message.Choose either browser, enter a name and message, and select the Send Message button.

    Le nom et le message sont affichés sur les deux pages instantanément.The name and message are displayed on both pages instantly.

    [! Opérationnel. Exemple d’application non-LOC (Signalr)]

Conseil

Si l’application ne fonctionne pas, ouvrez vos outils de développement (F12) de navigateur et accédez à la console.If the app doesn't work, open your browser developer tools (F12) and go to the console. Vous pouvez observer des erreurs liées à votre code HTML et JavaScript.You might see errors related to your HTML and JavaScript code. Par exemple, supposez que vous placez signalr.js dans un dossier autre que celui stipulé.For example, suppose you put signalr.js in a different folder than directed. Dans ce cas, la référence à ce fichier ne fonctionnera pas et vous verrez une erreur 404 dans la console.In that case the reference to that file won't work and you'll see a 404 error in the console.
Erreur de fichier SignalR.js introuvablesignalr.js not found error

Ressources supplémentairesAdditional resources