Comment établir une connexion à l’aide d’un MessageWebSocket (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique vous explique comment envoyer et recevoir des messages entiers de données à l’aide de MessageWebSocket dans une application Windows Runtime.

La classe MessageWebSocket fournit une abstraction basée sur les messages du protocole WebSocket. Lorsque vous utilisez MessageWebSocket, la totalité du message WebSocket est lu ou écrit en une seule opération. En revanche, le StreamWebSocket permet la lecture de sections d’un message à chaque opération de lecture, au lieu d’imposer la lecture de la totalité du message en une seule opération.

Un MessageWebSocket est généralement utilisé dans des scénarios où les messages ne sont pas très volumineux. Les fichiers UTF-8 et binaires sont pris en charge. Pour les messages UTF-8, MessageWebSocket doit être utilisé. En effet, StreamWebSocket prend uniquement en charge les messages binaires.

Prérequis

Les exemples suivants utilisent JavaScript et reposent sur l’exemple WebSocket. Pour obtenir une aide générale sur la création d’une application Windows Runtime en JavaScript, voir Créer votre première application Windows Runtime en JavaScript. De plus, les promesses JavaScript sont utilisées dans cette rubrique pour mener des opérations asynchrones. Pour plus d’informations sur ce modèle de programmation, voir Programmation asynchrone en JavaScript à l’aide de promesses.

Pour vous assurer que votre application Windows Runtime est prête à être utilisée en réseau, vous devez définir les fonctionnalités réseau nécessaires dans le fichier Package.appxmanifest du projet. Si votre application doit se connecter en qualité de client à des services distants sur Internet, la fonctionnalité Internet (client) est nécessaire. Si l’application doit se connecter en qualité de client à des services distants sur un réseau domestique ou professionnel, la fonctionnalité Réseau domestique/professionnel est nécessaire.

Remarque Sur Windows Phone, une seule fonctionnalité réseau (Internet (client et serveur)) permet à l’application d’accéder à tous les réseaux.

Pour plus d’informations, voir Comment définir les fonctionnalités réseau.

Utiliser un MessageWebSocket pour envoyer des données

Le code de cette section crée un objet MessageWebSocket, se connecte à un serveur WebSocket et envoie des données à celui-ci. Une fois qu’une connexion a été correctement établie, l’application attend l’appel de l’événement MessageWebSocket.MessageReceived, qui indique que les données ont été reçues.

Remarque Vous pouvez afficher des messages à l’attention de l’utilisateur ou journaliser certains événements (par exemple l’établissement d’une connexion ou le déclenchement d’une erreur).

Ouvrez le dossier js. Ouvrez votre fichier .js et ajoutez le code suivant.

function startSend() {
   if (!messageWebSocket) {
      var webSocket = new Windows.Networking.Sockets.MessageWebSocket();
      // MessageWebSocket supports both utf8 and binary messages.
      // When utf8 is specified as the messageType, then the developer
      // promises to only send utf8-encoded data.
      webSocket.control.messageType = Windows.Networking.Sockets.SocketMessageType.utf8;
      // Set up callbacks
      webSocket.onmessagereceived = onMessageReceived;
      webSocket.onclosed = onClosed;

      var serverAddress = new Windows.Foundation.Uri(document.getElementById("serverAddress").value);

      try {
         webSocket.connectAsync(serverAddress).done(function () {
         messageWebSocket = webSocket;
         // The default DataWriter encoding is utf8.
         messageWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
         messageWriter.writeString(document.getElementById("inputField").value);
         messageWriter.storeAsync().done("", sendError);

      }, function (error) {
         // The connection failed; add your own code to log or display 
         // the error, or take a specific action.
         });
      } catch (error) {
         // An error occurred while trying to connect; add your own code to  
         // log or display the error, or take a specific action.
      }

   }
   else {
      // The connection already exists; go ahead and send the message.
      messageWriter.writeString(document.getElementById("inputField").value);
      messageWriter.storeAsync().done("", sendError);          
   }
}

Enregistrer le rappel pour l’événement MessageWebSocket.MessageReceived

Lorsque l’événement MessageWebSocket.MessageReceived se produit, le rappel enregistré est appelé et reçoit les données de MessageWebSocketMessageReceivedEventArgs.

Ajoutez le code suivant à votre fichier .js.

function onMessageReceived(args) {
   // The incoming message is already buffered.
   var dataReader = args.getDataReader();
   // Use the dataReader to read data from the received message
}

Enregistrer le rappel pour l’événement MessageWebSocket.Closed

Lorsque l’événement MessageWebSocket.Closed se produit, le rappel enregistré est appelé et reçoit les données de WebSocketClosedEventArgs pour fermer la connexion.

Ajoutez le code suivant à votre fichier .js.

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (messageWebSocket) {
      messageWebSocket.close();
   }
   messageWebSocket = null;
}

Récapitulatif et étapes suivantes

Dans ce didacticiel, nous avons vu comment se connecter à un serveur WebSocket et comment envoyer et recevoir des données à l’aide d’un objet MessageWebSocket.

Pour obtenir un exemple complet illustrant l’envoi et la réception de données avec WebSockets, voir Exemple WebSocket.