Cómo conectar con un MessageWebSocket (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 explica cómo enviar y recibir mensajes de datos completos mediante MessageWebSocket en una aplicación de Windows en tiempo de ejecución.

La clase MessageWebSocket proporciona una abstracción basada en mensajes del protocolo WebSocket. Al usar MessageWebSocket, todo el mensaje de WebSocket se lee o escribe en una única operación. StreamWebSocket, por el contrario, permite que se lean fragmentos de un mensaje en cada operación de lectura, en vez de tener que leer el mensaje entero en una sola operación.

MessageWebSocket se suele usar en escenarios en los que los mensajes no son muy grandes. Se admiten archivos binarios y UTF-8. En el caso de los mensajes UTF-8, se debe usar MessageWebSocket, ya que StreamWebSocket admite únicamente mensajes binarios.

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 más información, consulta Cómo establecer las funcionalidades de red.

Usar un MessageWebSocket para enviar datos

El código de esta sección crea un nuevo MessageWebSocket, se conecta a un servidor WebSocket y envía datos al servidor. Una vez que se ha establecido una conexión correctamente, la aplicación espera a que el evento MessageWebSocket.MessageReceived se invocare e indique que se recibieron los datos.

Nota Es posible que quieras mostrar mensajes al usuario o registrar que ocurrieron ciertos eventos (por ejemplo, cuando se establece una conexión o cuando ocurre un error).

Abre la carpeta js. Abre el archivo .js y agrega el siguiente código.

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);          
   }
}

Registrar la devolución de llamada para el evento MessageWebSocket.MessageReceived

Cuando ocurre el evento MessageWebSocket.MessageReceived, se llama a la devolución de llamada registrada, la cual recibe datos de MessageWebSocketMessageReceivedEventArgs.

Agrega el código siguiente al archivo .js.

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

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

Cuando ocurre el evento MessageWebSocket.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 (messageWebSocket) {
      messageWebSocket.close();
   }
   messageWebSocket = null;
}