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

par Patrick Fletcherby Patrick Fletcher

Warning

Cette documentation n’est pas pour la dernière version de SignalR.This documentation isn't for the latest version of SignalR. Jetez un coup de œil à ASP.NET Core SignalR.Take a look at ASP.NET Core SignalR.

Télécharger le projet terminéDownload Completed Project

Ce didacticiel montre comment créer un serveur de SignalR 2 auto-hébergé 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 des logiciels utilisées dans le didacticielSoftware versions used in the tutorial

À l’aide de Visual Studio 2012 avec ce didacticielUsing Visual Studio 2012 with this tutorial

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

  • Mise à jour votre Gestionnaire de Package vers la dernière version.Update your Package Manager to the latest version.
  • Installer le Web Platform Installer.Install the Web Platform Installer.
  • Dans le programme 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 installera les modèles Visual Studio pour les classes de SignalR comme Hub.This will install Visual Studio templates for SignalR classes such as Hub.
  • Certains modèles (tels que classe de démarrage OWIN) ne sera pas disponible ; dans ce cas, utilisez un fichier de classe à la place.Some templates (such as OWIN Startup Class) will not be available; for these, use a Class file instead.

Questions et commentairesQuestions and comments

Veuillez laisser des commentaires sur la façon dont vous avez apprécié ce didacticiel et ce que nous pouvions 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 à ce didacticiel, vous pouvez les publier à le ASP.NET SignalR forum 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 de Windows) à l’aide de la bibliothèque Self-host.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 tous SignalR 2, est basée 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 de .NET et des applications web.OWIN defines an abstraction between .NET web servers and web applications. OWIN dissocie de l’application web à partir du serveur, ce qui rend OWIN idéale pour l’hébergement automatique 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.

Voici quelques raisons pour ne pas d’hébergement dans IIS :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.
  • Fonctionnalité de SignalR est à ajouter à une application existante qui s’exécute dans un Service Windows, rôle de travail Azure ou 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 en cours de développement en tant que Self-host pour des raisons de performances, il est recommandé pour le test également l’application hébergée dans IIS pour déterminer l’amélioration des 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 qui est hébergé dans une application console, mais le serveur peut être hébergé dans une forme quelconque de processus, tel qu’un service de Windows ou le 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 l’exemple de code pour l’hébergement d’un serveur de SignalR dans un Service Windows, consultez SignalR Self-Hosting 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 Visual C# nœud dans le modèles volet, puis sélectionnez le Application Console modèle.Select Windows under the Visual C# node in the Templates pane, and select the Console Application template. Nommez le nouveau projet « SignalRSelfHost » et cliquez sur OK.Name the new project "SignalRSelfHost" and click OK.

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

  3. Dans la console 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 de SignalR 2 auto-héberger au projet.This command adds the SignalR 2 Self-Host libraries to the project.

  4. Dans la console 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 est utilisée pour la prise en charge de domaines, qui est requis pour les applications qui hébergent SignalR et un client de la 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. Dans la mesure où vous hébergerez le serveur SignalR et le client web sur des ports différents, cela signifie qu’inter-domaines doit être activé pour la communication entre ces 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:

    • Programme, y compris le Main méthode 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 démarrage est démarré à 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, SSL peut être implémenté.If security is required on the endpoint, SSL can be implemented. Voir Guide pratique pour Configurer un Port avec un certificat SSL pour plus d’informations.See How to: Configure a Port with an SSL Certificate for more information.
    • Démarrage, la classe contenant la configuration pour le serveur de SignalR (la seule configuration de ce didacticiel utilise est l’appel à UseCors) et l’appel à MapSignalR, ce qui crée des itinéraires pour tous les objets Hub dans le 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 l’application fournira aux clients.MyHub, the SignalR Hub class that the application will provide to clients. Cette classe a une méthode unique, envoyer, que les clients appelleront 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 est en cours d’exécution doit 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 devez 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êter l’application avant de passer à la section suivante.Stop the application before proceeding to the next section.

L’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 à partir de la didacticiel mise en route.In this section, you'll use the same JavaScript client from the Getting Started tutorial. Nous veillerons à ce seulement une modification au client, qui consiste à 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 nécessairement peut-être pas à la même adresse en tant que l’URL de connexion (en raison des proxys inverses et les équilibreurs de charge), par conséquent, l’URL doit être défini 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 l’Explorateur de solutions, 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 Web nœud, puis sélectionnez le Application Web ASP.NET modèle.Select the Web node, and select the ASP.NET Web Application template. Nommez le projet « JavascriptClient » et cliquez sur OK.Name the project "JavascriptClient" and click OK.

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

  3. Dans la console Gestionnaire de package, sélectionnez le projet « JavascriptClient » dans le projet par défaut liste déroulante et 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 de 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. Avec le bouton droit sur votre projet, puis sélectionnez ajouter, un nouvel élément.Right-click on your project and select Add, New Item. Sélectionnez le Web nœud et sélectionner la HTML Page.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 ici correspondent les 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ées au client utilisé dans le didacticiel bien regardais (en plus de mise à niveau le 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. Avec le bouton droit sur la solution, puis sélectionnez définir les projets de démarrage... . Sélectionnez le plusieurs projets de démarrage case d’option et définissez des deux projets Action à 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. 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. Lancement la page et le serveur.The server and page will launch. Vous devrez peut-être recharger la page web (ou sélectionnez continuer dans le débogueur) si la page se charge avant que le serveur est démarré.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, fournissez un nom d’utilisateur lorsque vous y êtes invité.In the browser, provide a username when prompted. Copier l’URL de la page dans une autre fenêtre ou un onglet de navigateur et fournir 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 à partir du volet d’un navigateur à l’autre, comme dans le didacticiel de mise en route.You will be able to send messages from one browser pane to the other, as in the Getting Started tutorial.