Tutoriel : Bien démarrer avec ASP.NET Core SignalRTutorial: Get started with ASP.NET Core SignalR

Ce tutoriel explique les principes fondamentaux 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.
  • Ajouter la bibliothèque de client SignalR.Add the SignalR client library.
  • Créer un hub SignalR.Create a SignalR hub.
  • Configurer le projet pour utiliser 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:

Exemple d’application SignalR

Affichez ou téléchargez un exemple de code (procédure de téléchargement).View or download sample code (how to download).

PrérequisPrerequisites

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 de client SignalRAdd the SignalR client library

La bibliothèque de serveur SignalR est incluse dans le métapackage 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 @aspnet/signalr@1, puis sélectionnez la version la plus récente qui n’est pas en préversion.For Library, enter @aspnet/signalr@1, 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 la classe SignalR Hub.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. Le code SignalR est asynchrone afin de fournir une scalabilité maximale.SignalR code is asynchronous to provide maximum scalability.

Configurer SignalRConfigure SignalR

Vous devez configurer le serveur SignalR pour que celui-ci transmette les requêtes 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 SignalR au système d’injection de dépendances ASP.NET Core et au pipeline de middleware.These changes add SignalR to the ASP.NET Core dependency injection system and the middleware pipeline.

Ajouter le code client SignalRAdd 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 afficher les messages reçus en provenance du hub SignalR.Creates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • Inclut des références de script à SignalR et le code d’application chat.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 instantanément dans les deux pages.The name and message are displayed on both pages instantly.

    Exemple d’application 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

Étapes suivantesNext steps

Dans ce didacticiel, vous avez appris à :In this tutorial, you learned how to:

  • Créer un projet application web.Create a web app project.
  • Ajouter la bibliothèque de client SignalR.Add the SignalR client library.
  • Créer un hub SignalR.Create a SignalR hub.
  • Configurer le projet pour utiliser SignalR.Configure the project to use SignalR.
  • Ajouter le code qui utilise le hub pour envoyer des messages de n’importe quel client à tous les clients connectés.Add code that uses the hub to send messages from any client to all connected clients.

Pour en savoir plus sur SignalR, consultez :To learn more about SignalR, see the introduction: