Comment établir une connexion à l’aide d’un StreamWebSocket (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 flux de données à l’aide de StreamWebSocket dans une application Windows Runtime.

La classe StreamWebSocket fournit une abstraction basée sur les flux du protocole WebSocket basé sur les messages. Cela est utile dans les scénarios dans lesquels des fichiers volumineux (comme des photos ou des films) doivent être transférés entre un client et un serveur. Le serveur doit prendre en charge le protocole WebSocket. 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 (comme avec MessageWebSocket).

La classe StreamWebSocket prend uniquement en charge les messages binaires. Pour les messages UTF-8, MessageWebSocket doit être utilisé.

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.

Instructions

1. Créer un objet StreamWebSocket pour envoyer et recevoir des données

Le code de cette section crée un objet StreamWebSocket, se connecte à un serveur WebSocket, envoie des données à celui-ci, puis attend une réponse.

Nous vérifions d’abord que l’URI du serveur à utiliser est valide. Ensuite, nous nous connectons au serveur WebSocket à l’aide de l’URI et nous attendons de recevoir la réponse du serveur.

L’adresse d’URI d’entrée est tout d’abord vérifiée pour s’assurer que l’utilisateur a transmis une adresse URI valide. Cette étape n’est pas nécessaire si l’application connaît déjà l’URI du serveur WebSocket.

Une exception est levée quand une chaîne d’URI non valide est transmise au constructeur pour l’objet Windows.Foundation.Uri.

En JavaScript, il n’existe aucune méthode pour essayer d’analyser une chaîne en URI. Pour intercepter cette exception dans ce cas, utilisez un bloc try/catch autour du code où l’URI est construit.

L’exemple vérifie également que le schéma HTTP dans l’URI est WS ou WSS, puisqu’il s’agit des seuls schémas pris en charge par un StreamWebSocket.

Si l’entrée utilisateur a fourni un URI valide, l’application se connecte au serveur WebSocket, et peut alors envoyer et recevoir des données.

Des exceptions liées à des erreurs réseau (perte de connectivité, échec de connexion et échec de serveur HTTP, par exemple) peuvent se produire à tout moment. Ces erreurs donnent lieu à la levée d’exceptions. Si votre application ne gère pas une exception, le runtime peut arrêter entièrement votre application. Vous devez écrire du code capable de gérer les exceptions au moment où vous appelez la plupart des méthodes réseau asynchrones. Parfois, quand une exception se produit, vous pouvez essayer de résoudre le problème en rappelant une méthode réseau. Dans d’autres cas, votre application doit pouvoir poursuivre sans connectivité réseau en utilisant les données préalablement mises en cache. Pour plus d’informations sur la gestion des exceptions réseau, voir Gestion des exceptions dans les applications réseau.

Remarque Vous pouvez afficher des messages à l’attention de l’utilisateur ou écrire dans un journal certains événements (par exemple, l’établissement d’une connexion ou le déclenchement d’une erreur). L’exemple appelle une fonction displayStatus que vous devez implémenter pour votre application.

Remarque Les fonctions writeOutgoing() et readIncoming() permettant d’effectuer les opérations d’écriture et de lecture seront définies au cours d’étapes ultérieures.

Ouvrez le dossier js. Ouvrez le fichier .js que vous utilisez et ajoutez le code suivant.


// Define some variables we will use
var streamWebSocket;
var dataWriter;
var dataReader;
// The data to send
var data = "Hello World";
var countOfDataSent;
var countOfDataReceived;

function start() {
   if (streamWebSocket) {
      // The WebSocket is already running. Go ahead and immediately return,  
      // or display a message that indicates that it is running.
      return;
   }

   var webSocket = new Windows.Networking.Sockets.StreamWebSocket();
   webSocket.onclosed = onClosed;

   // WebSocket server to test connections
   // If the scheme is wss:, then the server will
   // echo back what it receives
   var uriString = "wss://echo.websocket.org";

   // We might get the uriString from the user so
   // we need to check that we have a valid URI
   var serverUri;
   try {
      serverUri = new Windows.Foundation.Uri(uriString);
      }
   catch (Exception) {
      displayStatus("Invalid URI, please re-enter a valid URI.");
      return;
   }

   if (serverUri.schemeName != "ws" && serverUri.schemeName != "wss") {
      displayStatus("Only 'ws' and 'wss' schemes supported. Please re-enter URI");
      return;
   }

   // Asynchronous networking methods can throw execptions
   webSocket.connectAsync(uri).done(function () {
      diaplayStatus("Connected");

      streamWebSocket = webSocket;
      dataWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
      dataReader = new Windows.Storage.Streams.DataReader(webSocket.inputStream);
      // When buffering, return as soon as any data is available.
      dataReader.inputStreamOptions = Windows.Storage.Streams.InputStreamOptions.partial;
      countOfDataSent = 0;
      countOfDataReceived = 0;

      // Continuously send data to the server
      writeOutgoing();

      // Continuously listen for a response
      readIncoming();

   }, function (error) {
      var errorStatus = Windows.Networking.Sockets.WebSocketError.getStatus(error.number);
      if (errorStatus === Windows.Web.WebErrorStatus.cannotConnect ||
         errorStatus === Windows.Web.WebErrorStatus.notFound ||
         errorStatus === Windows.Web.WebErrorStatus.requestTimeout) {
         displayStatus("Cannot connect to the server");
      } else {
         displayStatus("Failed to connect: " + getError(error));
      }
   });
}

2. Envoyer des données sortantes

Le code de cette section permet à votre objet WebSocket d’envoyer des données à un serveur.

Remarque La fonction writeError() sera définie au cours d’une étape ultérieure.

Pour définir la fonction writeOutgoing(), ajoutez le code suivant dans votre fichier .js.

function writeOutgoing() {
   try {
      var size = dataWriter.measureString(data);
      countOfDataSent += size;

      dataWriter.writeString(data);
      dataWriter.storeAsync().done(function () {
         // Add a 1 second delay so the user can see what's going on.
         setTimeout(writeOutgoing, 1000);
      }, writeError);
   }
   catch (error) {
      displayStatus("Sync write error: " + getError(error));
   }
}

3. Lire des données entrantes

Le code de cette section permet à votre objet WebSocket de lire des données à partir d’un serveur.

Remarque La fonction readError() sera définie au cours d’une étape ultérieure.

Pour définir la fonction readIncoming(), ajoutez le code suivant dans votre fichier .js.


function readIncoming(args) {
   // Buffer as much data as you require for your protocol.
   dataReader.loadAsync(100).done(function (sizeBytesRead) {
      countOfDataReceived += sizeBytesRead;

      var incomingBytes = new Array(sizeBytesRead);
      dataReader.readBytes(incomingBytes);

      // Do something with the data.
      // Alternatively you can use DataReader to read out individual booleans,
      // ints, strings, etc.

      // Start another read.
      readIncoming();
   }, readError);
}

4. Ajouter le code de gestion des erreurs

Vous devez écrire du code capable de gérer les exceptions au moment où vous appelez la plupart des méthodes réseau asynchrones. Votre gestionnaire d’exceptions peut récupérer des informations plus détaillées sur la cause de l’exception dans le but d’analyser l’échec et de prendre des décisions appropriées. Pour plus d’informations, voir Comment gérer les exceptions dans les applications réseau.

Ajoutez à votre fichier .js le code permettant de définir les fonctions writeError() et readError() qui consignent, respectivement, les erreurs d’écriture et de lecture (ou qui effectuent d’autres actions). L’implémentation spécifique que vous utilisez peut varier.
```
function writeError(error) {
   // Add your code to handle write errors.
}

function readError(error) {
   // Add your code to handle read errors.
}
```

5. Enregistrer le rappel pour l’événement StreamWebSocket.Closed

Lorsque l’événement StreamWebSocket.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 (streamWebSocket) {
      streamWebSocket.close();
   }
   streamWebSocket = 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 StreamWebSocket.

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