WebSockets - Enviar y recibir mensajes

los MessageEl evento ocurre normalmente cuando el servidor envía algunos datos. Los mensajes enviados por el servidor al cliente pueden incluir mensajes de texto sin formato, datos binarios o imágenes. Siempre que se envían datos,onmessage se activa la función.

Este evento actúa como el oído del cliente para el servidor. Siempre que el servidor envía datos, elonmessage el evento se dispara.

El siguiente fragmento de código describe la apertura de la conexión del protocolo Web Socket.

connection.onmessage = function(e){
   var server_message = e.data;
   console.log(server_message);
}

También es necesario tener en cuenta qué tipo de datos se pueden transferir con la ayuda de Web Sockets. El protocolo de socket web admite texto y datos binarios. En términos de Javascript,text se refiere como una cadena, mientras que los datos binarios se representan como ArrayBuffer.

Los sockets web solo admiten un formato binario a la vez. La declaración de datos binarios se realiza explícitamente de la siguiente manera:

socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;

Instrumentos de cuerda

Las cadenas se consideran útiles, ya que tratan con formatos legibles por humanos, como XML y JSON. Cuandoonmessage se genera el evento, el cliente debe verificar el tipo de datos y actuar en consecuencia.

El fragmento de código para determinar el tipo de datos como String se menciona a continuación:

socket.onmessage = function(event){

   if(typeOf event.data === String ) {
      console.log(“Received data string”);
   }
}

JSON (notación de objetos JavaScript)

Es un formato ligero para transferir datos legibles por humanos entre las computadoras. La estructura de JSON consta de pares clave-valor.

Ejemplo

{
   name: “James Devilson”,
   message: “Hello World!”
}

El siguiente código muestra cómo manejar un objeto JSON y extraer sus propiedades:

socket.onmessage = function(event) {
   if(typeOf event.data === String ){
      //create a JSON object
      var jsonObject = JSON.parse(event.data);
      var username = jsonObject.name;
      var message = jsonObject.message;
		
      console.log(“Received data string”);
   }
}

XML

Analizar en XML no es difícil, aunque las técnicas difieren de un navegador a otro. El mejor método es analizar utilizando una biblioteca de terceros como jQuery.

Tanto en XML como en JSON, el servidor responde como una cadena, que se analiza en el extremo del cliente.

ArrayBuffer

Consiste en datos binarios estructurados. Los bits incluidos se dan en un orden para que la posición se pueda rastrear fácilmente. Los ArrayBuffers son útiles para almacenar archivos de imagen.

Recibir datos usando ArrayBuffers es bastante simple. El operadorinstanceOf se utiliza en lugar del operador igual.

El siguiente código muestra cómo manejar y recibir un objeto ArrayBuffer:

socket.onmessage = function(event) {
   if(event.data instanceof ArrayBuffer ){
      var buffer = event.data;
      console.log(“Received arraybuffer”);
   }
}

Aplicación de demostración

El siguiente código de programa muestra cómo enviar y recibir mensajes usando Web Sockets.

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
		
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
		
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
		
         websocket.onmessage = function(evt) {
            onMessage(evt)
         };
		
         websocket.onerror = function(evt) {
            onError(evt)
         };
      }
		
      function onOpen(evt) {
         writeToScreen("CONNECTED");
         doSend("WebSocket rocks");
      }
		
      function onMessage(evt) {
         writeToScreen('<span style = "color: blue;">RESPONSE: ' +
            evt.data+'</span>'); websocket.close();
      }

      function onError(evt) {
         writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
      }
		
      function doSend(message) {
         writeToScreen("SENT: " + message); websocket.send(message);
      }
		
      function writeToScreen(message) {
         var pre = document.createElement("p"); 
         pre.style.wordWrap = "break-word"; 
         pre.innerHTML = message; output.appendChild(pre);
      }
		
      window.addEventListener("load", init, false);
		
   </script>
	
   <h2>WebSocket Test</h2>
   <div id = "output"></div> 
	
</html>

La salida se muestra a continuación.

↰ Previous page Next page ↱