Didacticiel : Auto-hébergement de SignalRTutorial: SignalR Self-Host

de Patrick Fletcherby Patrick Fletcher

Warning

Cette documentation ne concerne pas la dernière version de Signalr.This documentation isn't for the latest version of SignalR. Jetez un coup d’œil à ASP.net Core signalr.Take a look at ASP.NET Core SignalR.

Ce didacticiel montre comment créer un serveur auto-hébergé Signalr 2 et comment s’y connecter avec un client JavaScript.This tutorial shows how to create a self-hosted SignalR 2 server, and how to connect to it with a JavaScript client.

Versions logicielles utilisées dans le didacticielSoftware versions used in the tutorial

Utilisation de Visual Studio 2012 avec ce didacticielUsing Visual Studio 2012 with this tutorial

Pour utiliser Visual Studio 2012 dans ce didacticiel, procédez comme suit :To use Visual Studio 2012 with this tutorial, do the following:

  • Mettez à jour votre Gestionnaire de package avec la dernière version.Update your Package Manager to the latest version.
  • Installez le Web Platform Installer.Install the Web Platform Installer.
  • Dans le Web Platform Installer, recherchez et installez ASP.NET et Web Tools 2013,1 pour Visual Studio 2012.In the Web Platform Installer, search for and install ASP.NET and Web Tools 2013.1 for Visual Studio 2012. Cela permet d’installer les modèles Visual Studio pour les classes Signalr telles que Hub.This will install Visual Studio templates for SignalR classes such as Hub.
  • Certains modèles (par exemple, la classe de démarrage OWIN) ne sont pas disponibles. pour ceux-ci, utilisez plutôt un fichier de classe.Some templates (such as OWIN Startup Class) will not be available; for these, use a Class file instead.

Questions et commentairesQuestions and comments

N’hésitez pas à nous faire part de vos commentaires sur la façon dont vous aimez ce didacticiel et sur ce que nous pourrions améliorer dans les commentaires en bas de la page.Please leave feedback on how you liked this tutorial and what we could improve in the comments at the bottom of the page. Si vous avez des questions qui ne sont pas directement liées au didacticiel, vous pouvez les poster sur le forum ASP.net signalr ou StackOverflow.com.If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

Vue d’ensembleOverview

Un serveur Signalr est généralement hébergé dans une application ASP.NET dans IIS, mais il peut également être auto-hébergé (comme dans une application console ou un service Windows) à l’aide de la bibliothèque auto-hôte.A SignalR server is usually hosted in an ASP.NET application in IIS, but it can also be self-hosted (such as in a console application or Windows service) using the self-host library. Cette bibliothèque, comme la totalité de Signalr 2, repose sur OWIN (Open Web interface pour .net).This library, like all of SignalR 2, is built on OWIN (Open Web Interface for .NET). OWIN définit une abstraction entre les serveurs Web .NET et les applications Web.OWIN defines an abstraction between .NET web servers and web applications. OWIN découple l’application Web du serveur, ce qui fait de OWIN idéal pour l’auto-hébergement d’une application Web dans votre propre processus, en dehors d’IIS.OWIN decouples the web application from the server, which makes OWIN ideal for self-hosting a web application in your own process, outside of IIS.

Les raisons pour lesquelles l’hébergement n’est pas dans IIS sont les suivantes :Reasons for not hosting in IIS include:

  • Environnements où IIS n’est pas disponible ou souhaitable, par exemple une batterie de serveurs existante sans IIS.Environments where IIS is not available or desirable, such as an existing server farm without IIS.
  • La surcharge de performances d’IIS doit être évitée.The performance overhead of IIS needs to be avoided.
  • La fonctionnalité signalr doit être ajoutée à une application existante qui s’exécute dans un service Windows, un rôle de travail Azure ou tout autre processus.SignalR functionality is to be added to an existing application that runs in a Windows Service, Azure worker role, or other process.

Si une solution est développée comme auto-hébergée pour des raisons de performances, il est recommandé de tester également l’application hébergée dans IIS pour déterminer l’avantage en matière de performances.If a solution is being developed as self-host for performance reasons, it's recommended to also test the application hosted in IIS to determine the performance benefit.

Ce didacticiel contient les sections suivantes :This tutorial contains the following sections:

Création du serveurCreating the server

Dans ce didacticiel, vous allez créer un serveur hébergé dans une application console, mais le serveur peut être hébergé dans n’importe quel processus, tel qu’un service Windows ou un rôle de travail Azure.In this tutorial, you'll create a server that's hosted in a console application, but the server can be hosted in any sort of process, such as a Windows service or Azure worker role. Pour obtenir un exemple de code pour l’hébergement d’un serveur Signalr dans un service Windows, consultez auto-hébergement signalr dans un service Windows.For sample code for hosting a SignalR server in a Windows Service, see Self-Hosting SignalR in a Windows Service.

  1. Ouvrez Visual Studio 2013 avec des privilèges d’administrateur.Open Visual Studio 2013 with administrator privileges. Sélectionnez fichier, nouveau projet.Select File, New Project. Sélectionnez Windows sous le nœud Visual C# dans le volet modèles , puis sélectionnez le modèle application console .Select Windows under the Visual C# node in the Templates pane, and select the Console Application template. Nommez le nouveau projet « SignalRSelfHost », puis cliquez sur OK.Name the new project "SignalRSelfHost" and click OK.

  2. Ouvrez la console du gestionnaire de package NuGet en sélectionnant Outils > Gestionnaire de package NuGet > console du gestionnairede package.Open the NuGet package manager console by selecting Tools > NuGet Package Manager > Package Manager Console.

  3. Dans la console du gestionnaire de package, entrez la commande suivante :In the package manager console, enter the following command:

    Install-Package Microsoft.AspNet.SignalR.SelfHost
    

    Cette commande ajoute les bibliothèques d’auto-hébergement Signalr 2 au projet.This command adds the SignalR 2 Self-Host libraries to the project.

  4. Dans la console du gestionnaire de package, entrez la commande suivante :In the package manager console, enter the following command:

    Install-Package Microsoft.Owin.Cors
    

    Cette commande ajoute la bibliothèque Microsoft. Owin. cors au projet.This command adds the Microsoft.Owin.Cors library to the project. Cette bibliothèque sera utilisée pour la prise en charge inter-domaines, qui est requise pour les applications qui hébergent Signalr et un client de page Web dans des domaines différents.This library will be used for cross-domain support, which is required for applications that host SignalR and a web page client in different domains. Étant donné que vous hébergerez le serveur Signalr et le client Web sur des ports différents, cela signifie que l’activation de la communication entre domaines doit être activée entre les composants.Since you'll be hosting the SignalR server and the web client on different ports, this means that cross-domain must be enabled for communication between these components.

  5. Remplacez le contenu de Program.cs par le code suivant.Replace the contents of Program.cs with the following code.

    using System;
    using Microsoft.AspNet.SignalR;
    using Microsoft.Owin.Hosting;
    using Owin;
    using Microsoft.Owin.Cors;
    
    namespace SignalRSelfHost
    {
        class Program
        {
            static void Main(string[] args)
            {
                // This will *ONLY* bind to localhost, if you want to bind to all addresses
                // use http://*:8080 to bind to all addresses. 
                // See http://msdn.microsoft.com/library/system.net.httplistener.aspx 
                // for more information.
                string url = "http://localhost:8080";
                using (WebApp.Start(url))
                {
                    Console.WriteLine("Server running on {0}", url);
                    Console.ReadLine();
                }
            }
        }
        class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.UseCors(CorsOptions.AllowAll);
                app.MapSignalR();
            }
        }
        public class MyHub : Hub
        {
            public void Send(string name, string message)
            {
                Clients.All.addMessage(name, message);
            }
        }
    }
    

    Le code ci-dessus comprend trois classes :The above code includes three classes:

    • , Ycompris la méthode main définissant le chemin d’accès principal d’exécution.Program, including the Main method defining the primary path of execution. Dans cette méthode, une application Web de type Startup est démarrée à l’URL spécifiée ( http://localhost:8080 ).In this method, a web application of type Startup is started at the specified URL (http://localhost:8080). Si la sécurité est requise sur le point de terminaison, vous pouvez implémenter le protocole SSL.If security is required on the endpoint, SSL can be implemented. Pour plus d’informations, consultez procédure : configurer un port avec un certificat SSL .See How to: Configure a Port with an SSL Certificate for more information.
    • Startup, la classe contenant la configuration du serveur signalr (la seule configuration utilisée par ce didacticiel est l’appel à UseCors ) et l’appel à MapSignalR , qui crée des itinéraires pour tous les objets Hub du projet.Startup, the class containing the configuration for the SignalR server (the only configuration this tutorial uses is the call to UseCors), and the call to MapSignalR, which creates routes for any Hub objects in the project.
    • Monconcentrateur, la classe de concentrateur signalr que l’application fournira aux clients.MyHub, the SignalR Hub class that the application will provide to clients. Cette classe possède une méthode unique, Envoyer, que les clients appellera pour diffuser un message à tous les autres clients connectés.This class has a single method, Send, that clients will call to broadcast a message to all other connected clients.
  6. Compilez et exécutez l'application.Compile and run the application. L’adresse que le serveur exécute doit s’afficher dans une fenêtre de console.The address that the server is running should show in a console window.

  7. Si l’exécution échoue avec l’exception System.Reflection.TargetInvocationException was unhandled , vous devrez redémarrer Visual Studio avec des privilèges d’administrateur.If execution fails with the exception System.Reflection.TargetInvocationException was unhandled, you will need to restart Visual Studio with administrator privileges.

  8. Arrêtez l’application avant de passer à la section suivante.Stop the application before proceeding to the next section.

Accès au serveur avec un client JavaScriptAccessing the server with a JavaScript client

Dans cette section, vous allez utiliser le même client JavaScript que le didacticiel prise en main.In this section, you'll use the same JavaScript client from the Getting Started tutorial. Nous allons uniquement apporter une seule modification au client, ce qui permet de définir explicitement l’URL du Hub.We'll only make one modification to the client, which is to explicitly define the hub URL. Avec une application auto-hébergée, le serveur ne doit pas nécessairement se trouver à la même adresse que l’URL de connexion (en raison des proxies inverses et des équilibreurs de charge), de sorte que l’URL doit être définie explicitement.With a self-hosted application, the server may not necessarily be at the same address as the connection URL (due to reverse proxies and load balancers), so the URL needs to be defined explicitly.

  1. Dans Explorateur de solutions, cliquez avec le bouton droit sur la solution et sélectionnez Ajouter, nouveau projet.In Solution Explorer, right-click on the solution and select Add, New Project. Sélectionnez le nœud Web , puis sélectionnez le modèle application Web ASP.net .Select the Web node, and select the ASP.NET Web Application template. Nommez le projet « JavascriptClient », puis cliquez sur OK.Name the project "JavascriptClient" and click OK.

  2. Sélectionnez le modèle vide et laissez les autres options désélectionnées.Select the Empty template, and leave the remaining options unselected. Sélectionnez créer un projet.Select Create Project.

  3. Dans la console du gestionnaire de package, sélectionnez le projet « JavascriptClient » dans la liste déroulante projet par défaut , puis exécutez la commande suivante :In the package manager console, select the "JavascriptClient" project in the Default project drop-down, and execute the following command:

    Install-Package Microsoft.AspNet.SignalR.JS
    

    Cette commande installe les bibliothèques Signalr et JQuery dont vous aurez besoin dans le client.This command installs the SignalR and JQuery libraries that you'll need in the client.

  4. Cliquez avec le bouton droit sur votre projet et sélectionnez Ajouter, nouvel élément.Right-click on your project and select Add, New Item. Sélectionnez le nœud Web , puis page html.Select the Web node, and select HTML Page. Nommez la page Default.html.Name the page Default.html.

  5. Remplacez le contenu de la nouvelle page HTML par le code suivant.Replace the contents of the new HTML page with the following code. Vérifiez que les références de script correspondent aux scripts dans le dossier scripts du projet.Verify that the script references here match the scripts in the Scripts folder of the project.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-1.6.4.min.js"></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="http://localhost:8080/signalr/hubs"></script>
        <!--Add script to update the page and send messages.-->
        <script type="text/javascript">
            $(function () {
            //Set the hubs URL for the connection
                $.connection.hub.url = "http://localhost:8080/signalr";
                
                // Declare a proxy to reference the hub.
                var chat = $.connection.myHub;
                
                // Create a function that the hub can call to broadcast messages.
                chat.client.addMessage = function (name, message) {
                    // Html encode display name and message.
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page.
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                // Set initial focus to message input box.
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub.
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment.
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>
    

    Le code suivant (mis en surbrillance dans l’exemple de code ci-dessus) est l’ajout que vous avez apporté au client utilisé dans le didacticiel obtenir des étoiles (en plus de la mise à niveau du code vers Signalr version 2 bêta).The following code (highlighted in the code sample above) is the addition that you've made to the client used in the Getting Stared tutorial (in addition to upgrading the code to SignalR version 2 beta). Cette ligne de code définit explicitement l’URL de connexion de base pour Signalr sur le serveur.This line of code explicitly sets the base connection URL for SignalR on the server.

    //Set the hubs URL for the connection
    $.connection.hub.url = "http://localhost:8080/signalr";
    
  6. Cliquez avec le bouton droit sur la solution, puis sélectionnez définir les projets de démarrage.... Sélectionnez la case d’option plusieurs projets de démarrage et définissez l' action les deux projets sur Démarrer.Right-click on the solution, and select Set Startup Projects.... Select the Multiple startup projects radio button, and set both projects' Action to Start.

  7. Cliquez avec le bouton droit sur « Default.html » et sélectionnez définir comme page de démarrage.Right-click on "Default.html" and select Set As Start Page.

  8. Exécutez l'application.Run the application. Le serveur et la page seront lancés.The server and page will launch. Vous devrez peut-être recharger la page Web (ou sélectionner Continuer dans le débogueur) si la page se charge avant le démarrage du serveur.You may need to reload the web page (or select Continue in the debugger) if the page loads before the server is started.

  9. Dans le navigateur, indiquez un nom d’utilisateur lorsque vous y êtes invité.In the browser, provide a username when prompted. Copiez l’URL de la page dans un autre onglet ou une autre fenêtre de navigateur et fournissez un nom d’utilisateur différent.Copy the page's URL into another browser tab or window and provide a different username. Vous serez en mesure d’envoyer des messages d’un volet de navigateur à l’autre, comme dans le didacticiel Prise en main.You will be able to send messages from one browser pane to the other, as in the Getting Started tutorial.