Cómo conectar con un StreamWebSocket (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

En este tema se muestra cómo enviar y recibir secuencias de datos mediante StreamWebSocket en una aplicación de Windows en tiempo de ejecución.

La clase StreamWebSocket proporciona una abstracción basada en secuencia del protocolo WebSocket basado en mensajes. Esto es útil en escenarios en los que se deben transferir archivos grandes (como fotos o películas) entre un cliente y un servidor. El servidor debe ser compatible con el protocolo WebSocket. Al utilizar StreamWebSocket, se permite la lectura de secciones de un mensaje con cada operación de lectura, en lugar de requerir que se lea todo el mensaje en una sola operación (como sucede con MessageWebSocket).

La clase StreamWebSocket solo admite mensajes binarios. Para mensajes en UTF-8, se debe utilizar MessageWebSocket.

Requisitos previos

Los siguientes ejemplos usan JavaScript y se basan en la muestra de WebSocket. Si necesitas ayuda para crear una aplicación de Windows en tiempo de ejecución con JavaScript, consulta Crear la primera aplicación de Windows en tiempo de ejecución con JavaScript. De forma adicional, en este tema se usan promesas de JavaScript para completar las operaciones asincrónicas. Si quieres obtener más información acerca de este patrón de programación, consulta el tema sobre programación asincrónica en JavaScript con compromisos.

Para asegurarte de que la aplicación de Windows en tiempo de ejecución está lista para la red, debes establecer las funcionalidades necesarias en el archivo Package.appxmanifest del proyecto. Si la aplicación debe conectarse a servicios remotos de Internet como cliente, se necesitará la funcionalidad Internet (cliente). Si la aplicación debe conectarse a servicios remotos de una red doméstica o del trabajo como cliente, se necesitará la funcionalidad Redes domésticas o de trabajo.

Nota En Windows Phone, solo hay una funcionalidad de red —Internet (cliente y servidor)— que habilita todo el acceso a la red para la aplicación.

Para obtener más información, consulta Cómo establecer las funcionalidades de red.

Instrucciones

1. Crear un objeto StreamWebSocket para enviar y recibir datos

El código de esta sección crea un nuevo StreamWebSocket, se conecta a un servidor WebSocket, envía datos al servidor y busca una respuesta.

Primero comprobamos que el URI del servidor que se va a utilizar sea válido. Luego conectamos al servidor WebSocket con el URI y esperamos la respuesta del servidor.

Primero comprobamos la dirección URI de entrada para asegurarnos de que el usuario ha pasado una dirección URI válida. Este paso no es necesario si la aplicación ya conoce el URI del servidor WebSocket.

Se inicia una excepción cuando se pasa una cadena no válida para el identificador uniforme de recursos (URI) al constructor del objeto Windows.Foundation.Uri.

En JavaScript, no hay ningún método para probar y analizar una cadena en un URI. Para capturar esta excepción en ese caso, usa un bloque try/catch en el código donde se crea el URI.

En esta muestra también se comprueba que el esquema HTTP del URI sea WS o WSS, ya que son los únicos esquemas admitidos por un StreamWebSocket.

Si el usuario ha introducido un URI válido, la aplicación se conecta al servidor WebSocket y puede enviar y recibir datos.

Las excepciones a causa de errores en la red (pérdida de la conectividad, errores de conexión y errores del servidor HTTP, por ejemplo) pueden producirse en cualquier momento. Estos errores hacen que se arrojen excepciones. Si tu aplicación no las controla, las excepciones pueden ocasionar que el tiempo de ejecución finalice la aplicación. Debes escribir código para controlar las excepciones cuando llamas a la mayoría de los métodos de red asincrónicos. Algunas veces, cuando se produce una excepción, se puede reintentar un método de red para intentar solucionar el problema. Otras veces, la aplicación podría necesitar un plan para continuar sin conectividad de red usando los datos almacenados anteriormente en caché. Para obtener más información sobre cómo controlar las excepciones de red, consulta Controlar excepciones en aplicaciones de red.

Nota Es posible que quieras mostrar mensajes al usuario o escribir en el registro que se han producido ciertos eventos (por ejemplo, cuando se establece una conexión o cuando ocurre un error). En la muestra se llama a una función displayStatus que tienes que implementar para tu aplicación.

Nota Las funciones writeOutgoing() y readIncoming() que realizarán las operaciones de escritura y lectura se definirán en pasos posteriores.

Abre la carpeta js. Abre el archivo .js que estás usando y agrega el siguiente código.


// 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. Enviar datos salientes

El código de esta sección le permite al objeto WebSocket enviar datos a un servidor.

Nota La función writeError() se definirá en un paso posterior.

Agrega el código siguiente al archivo .js para definir la función writeOutgoing().

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. Leer datos entrantes

El código de esta sección le permite al objeto WebSocket leer datos desde un servidor.

Nota La función readError() se definirá en un paso posterior.

Agrega el código siguiente al archivo .js para definir la función readIncoming().


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. Agregar código de control de errores

Debes escribir código para controlar las excepciones cuando llamas a la mayoría de los métodos de red asincrónicos. Tu controlador de excepciones puede recuperar información más detallada sobre la causa de la excepción para comprender mejor el error y tomar las decisiones adecuadas. Para obtener más información, consulta Cómo controlar excepciones en aplicaciones de red.

Agrega código al archivo .js para definir las funciones writeError() y readError() para registrar los errores de escritura y lectura (o realizar otras acciones), respectivamente. La implementación específica que uses puede variar.
```
function writeError(error) {
   // Add your code to handle write errors.
}

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

5. Registrar la devolución de llamada para el evento StreamWebSocket.Closed

Cuando ocurre el evento StreamWebSocket.Closed, se llama a la devolución de llamada registrada, la cual recibe datos de WebSocketClosedEventArgs para cerrar la conexión.

Agrega el código siguiente al archivo .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;
}