HTML5: Web Sockets

Juan Mellado, 26 Enero, 2011 - 14:37

El objetivo de los Web Sockets es permitir que las aplicaciones web cliente puedan abrir desde JavaScript conexiones de red bidireccionales con cualquier servidor de forma arbitraria mediante un determinado protocolo de red. El W3C se encarga de definir el API para JavaScript y la IETF de elaborar el protocolo de red.

Para abrir una conexión desde JavaScript basta con instanciar un objeto de tipo WebSocket indicándole la URL del servidor con el que se quiere establecer la conexión.

var ws = new WebSocket("ws://echo.websocket.org");

De igual forma que utilizamos "http://" para establecer conexiones con el protocolo HTTP, debemos utilizar "ws://" para establecer conexiones con el protocolo websocket. El constructor admite además un parámetro adicional para que se indique un conjunto de subprotocolos, pero esto es algo que aún se está definiendo a día de hoy en el último borrador de la especificación.

Por cierto, la URL que he puesto en el código de ejemplo es válida, en ella se encuentra escuchando un sencillo servidor websocket que actúa como eco. Es decir, que reenvía al cliente lo mismo que recibe. Muy útil para hacer pruebas.

La conexión con el servidor se establece de forma asíncrona, en segundo plano, y la gestión del todo su ciclo de vida se realiza a través de callbacks que reciben eventos de la forma acostumbrada. La última especificación actual publicada define tres callbacks: "onopen", "onmessage" y "onclose". La especificación en borrador añade uno más: "onerror".

ws.onopen = function(event){
  //Conexión abierta
}

ws.onmessage = function(event){
  //Mensaje recibido en event.data;
}

ws.onclose = function(event){
  //Conexión cerrada
}

ws.onerror = function(event){
  //Error en la conexión
}

Para mandar un mensaje al servidor desde el cliente se tiene que utilizar la función "send" que admite como parámetro una cadena de texto con el mensaje a enviar.

ws.send("ping");

Para cerrar la conexión hay que llamar a la función "close".

ws.close();

Si se intenta enviar un mensaje cuando la conexión aún no está abierta se eleva un error. Y de igual forma ocurre si se intenta cerrar la conexión cuando no encuentra en el estado adecuado. Los mensajes enviados después de haber llamado al método close se descartan automáticamente.

La clase WebSocket tiene además otros cuatro atributos: "url" que es un String con la dirección a la que se encuentra conectado, "protocol" que es un String con el protocolo utilizado para la conexión, "readyState" que es un int que representa el estado de la conexión (CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3), y "bufferedAmount" que es un long con el número de bytes pendientes de enviar al servidor.

Y poco más, la verdad es que, como de costumbre, el API JavaScript para el cliente destaca por su simpleza y elegancia. Por su parte, para el servidor, ya existen algunas implementaciones del protocolo websocket. Por poner una sola, por ejemplo, la del popular Jetty para Java.

¿No encontró lo que buscaba?

Utilice el buscador para encontrar más páginas en esta web o en toda Internet.
 
Web www.inmensia.com
Roberto (no verificado), 3 Febrero, 2011 - 11:52

Tienes muy buenos artículos y muy aclaratorios. He estado siguiendo mucho el de raytracing y me ha ayudado mucho.
Saludos ;).

Pako Anguiano (no verificado), 20 Mayo, 2011 - 15:52

Gracias por el aporte, estoy intentando mandar a imprimir desde una ipad a una impresora wifi compartidad desde una pc en red, con esto me has dado un norte en mi proyecto

Matías Fabián Salomón (no verificado), 15 Julio, 2011 - 14:47

Hola, muy bueno el artículo sobre los WebSockets en HTML5. Lo que faltaría, para completar, es un artículo sobre la parte de servidor. Yo hice una prueba y en chrome anda perfecto, pero no tengo ni idea de por dónde arrancar para hacer el servidor ws.

Lo que yo estoy haciendo es una aplicación que muestra unas mediciones en tiempo real, actualmente lo resuelvo con llamdas vía AJAX cada 500ms, actualizo los divs y anda. Pero me gustaría más usar WebSockets, que justamente están creados para eso. Si podés poner algo sobre cómo armar el servidor (osea, el código del ws que le tendría que meter al Jetty), incluso si existe la posibilidad de usar el mismo Apache estaría muy agradecido. Aunque ya estoy agradecido con lo que pusiste.

Saludos, matías.-