Introduction à SignalRIntroduction to SignalR

Consultez Introduction à ASP.NET Core SignalR pour une version mise à jour de ce didacticiel qui utilise la dernière version de Visual Studio.See Introduction to ASP.NET Core SignalR for an updated version of this tutorial that uses the latest version of Visual Studio. Utilise le nouveau didacticiel ASP.NET Core, qui offre de nombreuses améliorations au fil de ce didacticiel.The new tutorial uses ASP.NET Core, which provides many improvements over this tutorial.

par Patrick Fletcherby Patrick Fletcher

Cet article décrit les nouveautés de SignalR et certaines solutions qu’il a été conçu pour créer.This article describes what SignalR is, and some of the solutions it was designed to create.

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.

Nouveautés SignalRWhat is SignalR?

ASP.NET SignalR est une bibliothèque pour les développeurs ASP.NET qui simplifie le processus d’ajout de fonctionnalités web en temps réel aux applications.ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. Les fonctionnalités web en temps réel sont la possibilité de push de code serveur contenu aux clients connectés instantanément dès que possible, plutôt que le serveur attende qu’un client demander de nouvelles données.Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

SignalR peut être utilisé pour ajouter une forme quelconque de fonctionnalités web « en temps réel » à votre application ASP.NET.SignalR can be used to add any sort of "real-time" web functionality to your ASP.NET application. Tandis que la conversation est souvent utilisée comme un exemple, vous pouvez effectuer beaucoup plus.While chat is often used as an example, you can do a whole lot more. Chaque fois qu’un utilisateur actualise une page web pour voir les nouvelles données ou la page implémente interrogation longue pour récupérer les nouvelles données, il constitue un candidat pour l’utilisation de SignalR.Any time a user refreshes a web page to see new data, or the page implements long polling to retrieve new data, it is a candidate for using SignalR. Exemples de tableaux de bord et la surveillance des applications, des applications de collaboration (par exemple, l’Édition simultanée de documents), travail mises à jour de progression et les formulaires en temps réel.Examples include dashboards and monitoring applications, collaborative applications (such as simultaneous editing of documents), job progress updates, and real-time forms.

SignalR permet également de complètement nouveaux types d’applications web qui nécessitent des mises à jour de la fréquence élevée à partir du serveur, par exemple, les jeux en temps réel.SignalR also enables completely new types of web applications that require high frequency updates from the server, for example, real-time gaming.

SignalR fournit une API simple pour créer des appels de procédure distante du serveur-client (RPC) qui appellent des fonctions JavaScript dans le client (et autres plateformes client) à partir du code .NET côté serveur.SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers (and other client platforms) from server-side .NET code. SignalR inclut également des API pour la gestion des connexions (par exemple, vous connecter et déconnecter les événements) et le regroupement de connexions.SignalR also includes API for connection management (for instance, connect and disconnect events), and grouping connections.

Appeler des méthodes avec SignalR

SignalR gère automatiquement la gestion des connexions et vous permet de messages de diffusion à tous les clients connectés simultanément, comme une salle de conversation.SignalR handles connection management automatically, and lets you broadcast messages to all connected clients simultaneously, like a chat room. Vous pouvez également envoyer des messages à des clients spécifiques.You can also send messages to specific clients. La connexion entre le client et le serveur est persistante, contrairement à une connexion HTTP classique, qui est rétablie pour chaque communication.The connection between the client and server is persistent, unlike a classic HTTP connection, which is re-established for each communication.

SignalR prend en charge la fonctionnalité « server push », dans lequel le code serveur peut faire appel au code client dans le navigateur en utilisant les appels de procédure distante (RPC), plutôt que le modèle de requête-réponse courantes sur le web dès aujourd'hui.SignalR supports "server push" functionality, in which server code can call out to client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model common on the web today.

Les applications SignalR peuvent monter en charge à des milliers de clients à l’aide de Service Bus, SQL Server ou Redis.SignalR applications can scale out to thousands of clients using Service Bus, SQL Server or Redis.

SignalR est open source, accessibles via GitHub.SignalR is open-source, accessible through GitHub.

SignalR et WebSocketSignalR and WebSocket

SignalR utilise le nouveau transport WebSocket lorsqu’elles sont disponibles et revient aux transports plus anciens lorsque cela est nécessaire.SignalR uses the new WebSocket transport where available and falls back to older transports where necessary. Bien que vous pourriez certainement rédiger votre application à l’aide de WebSocket directement, à l’aide de moyens de SignalR un grand nombre de fonctionnalités supplémentaires, que vous devez implémenter est déjà fait pour vous.While you could certainly write your app using WebSocket directly, using SignalR means that a lot of the extra functionality you would need to implement is already done for you. Plus important encore, cela signifie que vous pouvez coder votre application pour tirer parti de WebSocket sans avoir à vous soucier de la création d’un chemin d’accès de code distinct pour les clients plus anciens.Most importantly, this means that you can code your app to take advantage of WebSocket without having to worry about creating a separate code path for older clients. SignalR vous protège également d’avoir à vous soucier des mises à jour de WebSocket, étant donné que SignalR est mis à jour pour prendre en charge les modifications dans le transport sous-jacent, fournissant une interface cohérente entre les versions de WebSocket à votre application.SignalR also shields you from having to worry about updates to WebSocket, since SignalR is updated to support changes in the underlying transport, providing your application a consistent interface across versions of WebSocket.

Transports et les solutions de secoursTransports and fallbacks

SignalR est une abstraction par rapport à des transports qui sont nécessaires pour effectuer un travail en temps réel entre client et serveur.SignalR is an abstraction over some of the transports that are required to do real-time work between client and server. Une connexion SignalR démarre en tant que HTTP et est ensuite promue pour une connexion WebSocket s’il est disponible.A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if it is available. WebSocket est le transport idéal pour SignalR, dans la mesure où il rend l’utilisation la plus efficace de mémoire du serveur, a la plus faible latence et présente les caractéristiques plus sous-jacent (par exemple, la communication en duplex intégral entre client et serveur), mais il a également les plus strictes configuration requise : WebSocket demande au serveur d’être à l’aide de Windows Server 2012 ou Windows 8 et .NET Framework 4.5.WebSocket is the ideal transport for SignalR, since it makes the most efficient use of server memory, has the lowest latency, and has the most underlying features (such as full duplex communication between client and server), but it also has the most stringent requirements: WebSocket requires the server to be using Windows Server 2012 or Windows 8, and .NET Framework 4.5. Si ces conditions ne sont pas remplies, SignalR va tenter d’utiliser les autres transports pour ses connexions.If these requirements are not met, SignalR will attempt to use other transports to make its connections.

Transports de HTML 5HTML 5 transports

Ces transports dépendent de la prise en charge de HTML 5.These transports depend on support for HTML 5. Si le navigateur client ne prend pas en charge la norme HTML 5, transports antérieures seront utilisés.If the client browser does not support the HTML 5 standard, older transports will be used.

  • WebSocket (si le le serveur et le navigateur indiquent qu’ils peuvent prendre en charge de Websocket).WebSocket (if the both the server and browser indicate they can support Websocket). WebSocket est le seul transport qui établit une connexion permanente, bidirectionnelle true entre client et serveur.WebSocket is the only transport that establishes a true persistent, two-way connection between client and server. Toutefois, WebSocket a également les exigences les plus strictes ; Il est entièrement pris en charge uniquement dans les dernières versions de Microsoft Internet Explorer, Google Chrome et Mozilla Firefox et a uniquement une implémentation partielle dans d’autres navigateurs tels que Opera et Safari.However, WebSocket also has the most stringent requirements; it is fully supported only in the latest versions of Microsoft Internet Explorer, Google Chrome, and Mozilla Firefox, and only has a partial implementation in other browsers such as Opera and Safari.
  • Événements de serveur envoyé, également connu en tant que source d’événement (si le navigateur prend en charge serveur envoyé événements, qui est en fait tous les navigateurs à l’exception d’Internet Explorer.)Server Sent Events, also known as EventSource (if the browser supports Server Sent Events, which is basically all browsers except Internet Explorer.)

Transports CometComet transports

Les transports suivants sont basés sur le Comet modèle d’application web, dans laquelle un navigateur ou un autre client maintient une demande HTTP maintenus à long, le serveur peut utiliser pour transmettre des données au client sans le client en particulier il demande.The following transports are based on the Comet web application model, in which a browser or other client maintains a long-held HTTP request, which the server can use to push data to the client without the client specifically requesting it.

  • Forever Frame (pour Internet Explorer uniquement).Forever Frame (for Internet Explorer only). Forever Frame crée un IFrame masqué qui effectue une demande à un point de terminaison sur le serveur qui ne se termine pas.Forever Frame creates a hidden IFrame which makes a request to an endpoint on the server that does not complete. Le serveur envoie ensuite en permanence script au client qui est exécuté immédiatement, fournissant une connexion en temps réel à sens unique à partir du serveur au client.The server then continually sends script to the client which is immediately executed, providing a one-way realtime connection from server to client. La connexion client au serveur utilise une connexion distincte à partir du serveur pour la connexion du client, et comme une requête HTTP standard, une nouvelle connexion est créée pour chaque élément de données qui doivent être envoyé.The connection from client to server uses a separate connection from the server to client connection, and like a standard HTTP request, a new connection is created for each piece of data that needs to be sent.
  • AJAX interrogation longue.Ajax long polling. Interrogation longue ne crée pas une connexion permanente, mais au lieu de cela interroge le serveur avec une demande reste ouverte jusqu'à ce que le serveur répond, le moment où la connexion se ferme, et une nouvelle connexion est immédiatement demandée.Long polling does not create a persistent connection, but instead polls the server with a request that stays open until the server responds, at which point the connection closes, and a new connection is requested immediately. Cela risque d’entraîner un temps de latence tandis que réinitialise la connexion.This may introduce some latency while the connection resets.

Pour plus d’informations sur les transports sont pris en charge les configurations, consultez plateformes prises en charge.For more information on what transports are supported under which configurations, see Supported Platforms.

Processus de sélection de transportTransport selection process

La liste suivante présente les étapes que SignalR utilise pour déterminer le transport à utiliser.The following list shows the steps that SignalR uses to decide which transport to use.

  1. Si le navigateur est Internet Explorer 8 ou version antérieure, l’interrogation longue est utilisée.If the browser is Internet Explorer 8 or earlier, Long Polling is used.

  2. Si JSONP est configuré (autrement dit, le jsonp paramètre est défini sur true au démarrage de la connexion), l’interrogation longue est utilisé.If JSONP is configured (that is, the jsonp parameter is set to true when the connection is started), Long Polling is used.

  3. Si une connexion entre domaines est apportée (autrement dit, si le point de terminaison SignalR n’est pas dans le même domaine que la page d’hébergement), WebSocket est utilisé si les critères suivants sont satisfaits :If a cross-domain connection is being made (that is, if the SignalR endpoint is not in the same domain as the hosting page), then WebSocket will be used if the following criteria are met:

    • Le client prend en charge CORS (Cross-Origin Resource Sharing).The client supports CORS (Cross-Origin Resource Sharing). Pour plus d’informations sur lequel les clients prennent en charge CORS, consultez CORS au caniuse.com.For details on which clients support CORS, see CORS at caniuse.com.

    • Le client prend en charge de WebSocketThe client supports WebSocket

    • Le serveur prend en charge de WebSocketThe server supports WebSocket

      Si un des critères suivants ne sont pas remplie, l’interrogation longue servira.If any of these criteria are not met, Long Polling will be used. Pour plus d’informations sur les connexions entre domaines, consultez comment établir une connexion entre domaines.For more information on cross-domain connections, see How to establish a cross-domain connection.

  4. Si JSONP n’est pas configuré et que la connexion n’est pas inter-domaines, WebSocket est utilisé si le client et le serveur la prend en charge.If JSONP is not configured and the connection is not cross-domain, WebSocket will be used if both the client and server support it.

  5. Si le client ou le serveur ne prennent pas en charge WebSocket, les événements envoyés du serveur est utilisé s’il est disponible.If either the client or server do not support WebSocket, Server Sent Events is used if it is available.

  6. Si les événements envoyés du serveur n’est pas disponible, Forever Frame est tentée.If Server Sent Events is not available, Forever Frame is attempted.

  7. Si Forever Frame échoue, l’interrogation longue est utilisé.If Forever Frame fails, Long Polling is used.

Surveillance des transportsMonitoring transports

Vous pouvez déterminer que le transport à l’aide de votre application en activant la journalisation sur votre hub et en ouvrant la fenêtre de console dans votre navigateur.You can determine what transport your application is using by enabling logging on your hub, and opening the console window in your browser.

Pour activer la journalisation des événements de votre concentrateur dans un navigateur, ajoutez la commande suivante à votre application cliente :To enable logging for your hub's events in a browser, add the following command to your client application:

$.connection.hub.logging = true;

  • Dans Internet Explorer, ouvrez les outils de développement en appuyant sur F12 et cliquez sur l’onglet de la Console.In Internet Explorer, open the developer tools by pressing F12, and click the Console tab.

    Console dans Microsoft Internet Explorer

  • Dans Chrome, ouvrez la console en appuyant sur Ctrl + Maj + J.In Chrome, open the console by pressing Ctrl+Shift+J.

    Console Google Chrome

Ouverture de la console et la journalisation est activée, vous serez en mesure de voir quel protocole de transport est utilisé par SignalR.With the console open and logging enabled, you'll be able to see which transport is being used by SignalR.

Dans Internet Explorer affichant le transport WebSocket de la console

Spécification d’un transportSpecifying a transport

Négocier un transport prend une certaine quantité de temps et de client/serveur ressources.Negotiating a transport takes a certain amount of time and client/server resources. Si les fonctionnalités de client sont connues, puis un transport peut être spécifié lors de la connexion client est démarrée.If the client capabilities are known, then a transport can be specified when the client connection is started. L’extrait de code suivant illustre le démarrage d’une connexion en utilisant le transport d’interrogation longue Ajax, que vous utiliseriez s’il était connu que le client ne prenaient pas en charge un autre protocole :The following code snippet demonstrates starting a connection using the Ajax Long Polling transport, as would be used if it was known that the client did not support any other protocol:

connection.start({ transport: 'longPolling' });

Vous pouvez spécifier un ordre de secours si vous souhaitez un client pour essayer les transports spécifiques dans l’ordre.You can specify a fallback order if you want a client to try specific transports in order. L’extrait de code suivant montre durant la tentative de WebSocket et cas d’échec, directement à l’interrogation longue.The following code snippet demonstrates trying WebSocket, and failing that, going directly to Long Polling.

connection.start({ transport: ['webSockets','longPolling'] });

Les constantes de chaîne pour la spécification des transports sont définis comme suit :The string constants for specifying transports are defined as follows:

  • webSockets
  • foreverFrame
  • serverSentEvents
  • longPolling

Connexions et les HubsConnections and Hubs

L’API SignalR contient deux modèles pour la communication entre les clients et serveurs : les concentrateurs et les connexions persistantes.The SignalR API contains two models for communicating between clients and servers: Persistent Connections and Hubs.

Une connexion représente un simple point de terminaison pour l’envoi de messages unique-recipient, groupées ou de diffusion.A Connection represents a simple endpoint for sending single-recipient, grouped, or broadcast messages. Permet des API de connexion persistante (représenté par la classe PersistentConnection dans le code .NET) au développeur un accès direct au protocole de communication de bas niveau qui expose de SignalR.The Persistent Connection API (represented in .NET code by the PersistentConnection class) gives the developer direct access to the low-level communication protocol that SignalR exposes. À l’aide du modèle de communication de connexions seront familière aux développeurs qui ont utilisé les API basées sur les connexions telles que Windows Communication Foundation.Using the Connections communication model will be familiar to developers who have used connection-based APIs such as Windows Communication Foundation.

Un concentrateur est un pipeline plus haut niveau basé sur l’API de connexion qui permet à votre client et le serveur pour appeler des méthodes sur eux directement.A Hub is a more high-level pipeline built upon the Connection API that allows your client and server to call methods on each other directly. SignalR gère la distribution au-delà des limites de la machine comme par magie, autorisant les clients à appeler des méthodes sur le serveur en tant que facilement en tant que méthodes locales et vice versa.SignalR handles the dispatching across machine boundaries as if by magic, allowing clients to call methods on the server as easily as local methods, and vice versa. L’utilisation du modèle de communication Hubs seront familière aux développeurs qui ont utilisé les API telles que .NET Remoting d’invocation à distance.Using the Hubs communication model will be familiar to developers who have used remote invocation APIs such as .NET Remoting. À l’aide d’un Hub vous permet également de transmettre des paramètres fortement typés aux méthodes, l’activation de la liaison de modèle.Using a Hub also allows you to pass strongly typed parameters to methods, enabling model binding.

Diagramme d’architectureArchitecture diagram

Le diagramme suivant montre la relation entre les concentrateurs, des connexions persistantes et les technologies sous-jacentes utilisées pour les transports.The following diagram shows the relationship between Hubs, Persistent Connections, and the underlying technologies used for transports.

Diagramme d’Architecture SignalR montrant des API, les transports et les clients

Fonctionnement des HubsHow Hubs work

Lorsque le code côté serveur appelle une méthode sur le client, un paquet est envoyé via le transport actif qui contient le nom et les paramètres de la méthode à appeler (lorsqu’un objet est envoyé comme paramètre de méthode, il est sérialisé à l’aide de JSON).When server-side code calls a method on the client, a packet is sent across the active transport that contains the name and parameters of the method to be called (when an object is sent as a method parameter, it is serialized using JSON). Le client fait ensuite correspond le nom de méthode pour les méthodes définies dans le code côté client.The client then matches the method name to methods defined in client-side code. S’il existe une correspondance, la méthode du client s’exécutera en utilisant les données de paramètre désérialisées.If there is a match, the client method will be executed using the deserialized parameter data.

L’appel de méthode peut être surveillé à l’aide des outils tels que Fiddler.The method call can be monitored using tools like Fiddler. L’illustration suivante montre un appel de méthode envoyé à partir d’un serveur de SignalR pour un client de navigateur web dans le volet des journaux de Fiddler.The following image shows a method call sent from a SignalR server to a web browser client in the Logs pane of Fiddler. L’appel de méthode est envoyé à partir d’un hub appelé MoveShapeHub, et la méthode appelée est appelée updateShape.The method call is being sent from a hub called MoveShapeHub, and the method being invoked is called updateShape.

Affichage du journal de Fiddler montrant le trafic de SignalR

Dans cet exemple, le nom de hub est identifié avec le H paramètre ; la méthode nom est identifié avec le M paramètre et les données envoyées à la méthode est identifié par le A paramètre.In this example, the hub name is identified with the H parameter; the method name is identified with the M parameter, and the data being sent to the method is identified with the A parameter. L’application qui a généré ce message est créée dans le en temps réel haute fréquence didacticiel.The application that generated this message is created in the High-Frequency Realtime tutorial.

Choix d’un modèle de communicationChoosing a communication model

La plupart des applications doivent utiliser l’API de Hubs.Most applications should use the Hubs API. L’API de connexions peut être utilisée dans les circonstances suivantes :The Connections API could be used in the following circumstances:

  • Le format des besoins réels message envoyé à être spécifié.The format of the actual message sent needs to be specified.
  • Le développeur souhaite travailler avec un modèle de messagerie et de distribution plutôt que d’un modèle d’appel distant.The developer prefers to work with a messaging and dispatching model rather than a remote invocation model.
  • Une application existante qui utilise un modèle de messagerie est portée pour utiliser SignalR.An existing application that uses a messaging model is being ported to use SignalR.