¿Qué son los WebSockets?

Dentro del ecosistema total que se están convirtiendo los navegadores, las comunicaciones cliente-servidor son uno de los puntos más importantes en cualquier aplicación web. La comunicación de datos entre el servidor y el cliente debe ser lo más rápida y suave posible. Este tipo de comunicación se remonta a los inicios de Internet, pero si vemos los métodos tradicionales encontraremos que eran muy limitados y no las mejores soluciones especialmente a través del protocolo Html, a pesar de que se estaba convirtiendo en un estándar.

Por tanto, cuando se habla de todo lo que rodea a Html5, nos referimos a la búsqueda de soluciones para los problemas anteriores y corregir las limitaciones de Html. Aquí es donde encontramos los WebSockets. Pero antes de profundizar en que son, es mejor conocer los demás métodos de comunicación.

Método petición-respuesta:El cliente hace una petición al servidor y por tanto, recibe una respuesta. Este proceso es conducido por alguna interacción, por ejemplo: pulsar el botón de recargar para actualizar la página web, con lo cual se actualizaba la página entera. Sin embargo, con la aparición de Ajax se permitía actualizar algunas partes de la página y no la página entera.

Hay situaciones en que se pide que los datos sean actualizados por así decirlo automáticamente y no por fuerza del usuario, como por ejemplo: los resultados de un partido de fútbol. Esto es lo que se conoce como Polling. Donde los cambios de datos son buscados en intervalos de tiempo, y se va a mantener buscando en el servidor estos cambios independientemente de si los datos han cambiado o no, esto provoca llamadas innecesarias al servidor, abriendo una conexión y luego cerrándola otra vez. A su vez aparece una variante llamada Long-Polling, en la que el servidor recibe una petición del cliente si no hay cambios en los datos solicitados en lugar de devolver una respuesta vacía, guarda la petición y espera a que haya algún cambio en los datos para enviarlos al cliente o después de un período de tiempo determinado. En ese momento el cliente vuelve a realizar otra petición que se mantendrá de nuevo abierta hasta que haya cambios. Ya depende de la cantidad de datos que nosotros utilizamos un método u otro. Pero aún así mantiene muchas peticiones lo que va a repercutir en el tiempo y en la latencia de los datos.

Por tanto, los problemas con estos métodos nos llevan a una solución los WebSockets, estos solventa uno de los mayores problemas de la comunicación con el servidor proveyendo un puente de comunicación bidireccional Full duplex, provee tanto al servidor como al cliente con la habilidad de enviar datos en cualquier momento, lo que no es posible con los antiguos métodos. Esto no solo mejora el rendimiento sino que mejora la latencia de datos, crea una conexión ligera que puede mantenerse abierta durante un largo periodo de tiempo sin sacrificar el rendimiento. Esto nos da un control completo para abrir o cerrar la conexión en cualquier momento.

Los WebSockets forman parte del estándar Html5, de modo que no necesitamos preocuparnos por añadir plugins extras para hacerlo funcionar. La API WebSockets es completamente soportada e implementada por JavaScript y por tanto prácticamente todos los navegadores modernos soportan los WebSockets.

Estos deben ser implementados tanto en la parte del cliente como en la del servidor. En el lado del cliente la API es una parte de Html5 pero en el lado del servidor necesitamos utilizar una librería que implemente WebSockets. En la actualidad casi todos los servidores soportan la librería API WebSockets y además node.js también soporta la implementación de estos, utilizando algunos paquetes.

Los WebSockets comunican usando la capa TCP la conexión se establece sobre Http y es básicamente un mecanismo Handshake entre el cliente y el servidor, pero después del este la conexión es actualizada a TCP. Este funcionaría de la siguiente forma:

1. Se realiza la llamada http, que es iniciada desde el lado del cliente. La cabecera de esta llamada http sería algo similar a esto:

• Host: Es el nombre del servidor al que estamos llamando.
• Upgrade: indica que es una llamada de actualización. En este caso websocket.
• Connection: define que es una llamada de actualización.
• Sec-Websocket-Key: es una clave generada aleatoriamente, que posteriormente es usada para autentificar la respuesta. Es la clave del Handshake.
• Sec-Websocket-Origin: es otro parámetro, pero en este caso opcional, que muestra donde sea generado la petición. En el lado del servidor es usado para comprobar la autentificación de la petición.
2. Una vez que el servidor comprueba la autentificación va a enviar una respuesta que se ve, así:

• Sec-Websocker-Accept: hay una clave que es comprobada y autentificada con la key enviada para ver que las respuestas están viendo al cliente de origen correcto.
3. Una vez que es abierta la conexión el cliente y el servidor pueden enviar los datos de uno a otro, estos datos son enviados en forma de pequeños paquetes usando el protocolo TCP, así que estas llamadas no son http, por tanto no son visibles directamente dentro de la herramienta de desarrolladores en el navegador por ejemplo.

Quien quiera profundizar en este interesante mundillo, es altamente recomendable visitar la siguiente web, WebSocket.org