Introducción a los WebSocket

Introducción a WebSocket

Los WebSocket fueron introducidos recientemente con la llegada de HTML5 y es sin duda una de las mejoras más esperadas. Los WebSockets nos permite trabajar de forma bidireccional entre el navegador y el servidor, permitiendo enviar y recibir mensajes de forma simultánea (Full Duplex) y manteniendo siempre una conexión activa con el servidor mediante Sockets TCP.

A pesar de que la WebSocket fue agregado como una nueva característica de HTML5, la verdad es que es inútil sin una implementación de WebSocket del lado del servidor y es aquí donde entra los lenguajes de programación.

 

Cómo funcionan los WebSockets

Como ya mencionamos anteriormente, los WebSocket trabajan mediante conexiones TCP con el servidor, por lo que permite mantener una conexión activa y bidireccional entre el Servidor y el Navegador. Para que una conexión WebSocket se dé, debemos de tener dos partes, un WebSocket Server y un WebSocket Cliente, El Server es aquel que acepta las conexiones y que representa el BackEnd y el cliente en este caso sería el navegador. En este contexto, el cliente es el que establece inicialmente la conexión con el servidor. Una vez establecida la conexión, tanto el servidor como el cliente se podrá enviar mensajes simultáneamente. Veamos la siguiente imagen:

WebSocket

En la imagen podemos apreciar que el Navegador (WebSocket Client) establece una conexión con el Server (WebSocket Server), el servidor acepta la conexión y a continuación inicia un intercambio de mensajes entre el Servidor y el Navegador. Cabe mencionar que los WebSocket mantiene su conexión activa durante todo el tiempo que tengamos abierta la pestaña del navegador, pero tanto el cliente como el servidor pueden cerrar la conexión en cualquier momento.

 

Usos de los WebSockets

Los WebSocket son necesarios cuando debe de existir una comunicación constante entre el Servidor y el Cliente. Anteriormente a los WebSocket, el navegador tenía que consultar constantemente al servidor por nueva información, lo que lo hacía algo tedioso y representaba un problema de performance grave, ya que cuantos más usuarios teníamos conectados a nuestra página, más consultas se realizaban constantemente y en la mayoría de ellas no había datos nuevos que mostrar.

WebSocket

En la imagen podemos apreciar como el navegador realiza varias consultas al navegador para obtener las actualizaciones del servidor, sin embargo, en la mayoría de las consultas no se obtienen nuevas actualizaciones (en verde), si no que hasta pasadas varias actualizaciones se obtiene nuevos datos del servidor (amarillo). Por lo que podemos ver que todas las fechas verdes son consultas innecesarias que van a degradar el performance del servidor y probablemente también el de la base de datos. Lo peor de esto es que, a mayor número de usuarios conectados a la página mayor se acentúa el problema como podemos ver en la siguiente imagen.

WebSocket

En escenarios donde tenemos que obtener datos del servidor de forma constante siempre será mejor utilizar un WebSocket, para que de esta manera sea el mismo Servidor quien nos notifique de inmediato en cuando existan nuevos datos. De esta forma el servidor evita tener que procesar una serie de peticiones innecesarias. Veamos cómo quedaría el escenario anterior con WebSockets:

WebSocket

En esta nueva imagen ya podemos apreciar mucho mejor como es que los WebSocket mantiene la comunicación y de esta forma saber cuándo debemos utilizar los WebSockets. Lo primero que vemos en la imagen es que un navegador le envía información al Servidor, luego, el Servidor notifica los nuevos cambios a otros dos clientes, finalmente existe otros dos navegadores que están conectados, pero no son notificados por que la nueva información no es de su interés.

 

WebSocket y JavaScript

 

Aunque los WebSocket son una de las mejorar agregadas en HTML5, la realidad es que absolutamente todo lo referente a WebSocket del lado del cliente, se tiene que programar con JavaScript, y es desde aquí donde tendremos que establecer la conexión y gestionar el envío y recepción de mensajes.  A continuación, te dejo un guía rápido de cómo utilizar WebSocket con JavaScript:

 

Estableciendo conexión con el servidor:

Esta línea nos permite establecer la conexión inicial con el servidor, como parámetro se debe de establecer la URL sobre la cual escucha el Servidor.

 

Enviando datos al servidor:

La línea anterior se utiliza para enviar un mensaje al servidor, se puede enviar cualquier tipo de información, lo más normal es el envío de datos en formato Json.

 

Recibiendo datos del servidor:

Para recibir mensajes del servidor es necesario definir la función onmessage, la cual será ejecutada cuando se reciba nueva información del Servidor. En el ejemplo imprimo el contenido de event.data, el cual representa el mensaje recibido del Servidor.

 

Cerrando la conexión:

Para cerrar la conexión con el Servidor solo es necesario ejecutar la función closed.

 

Eventos

Función ejecutada tras ocurrir un error.

Función ejecutada cuando se cierra la conexión con el servidor.

Función ejecutada cuando se abre la conexión con el servidor.

 

Web Socket con Java

Te recomiendo que le des una revisada a este otro artículo en donde hablo de cómo implementar WebSocket con Java

 

Conclusiones

 

Como podemos apreciar, los WebSocket cambian totalmente el paradigma de la forma en que trabajábamos anteriormente con el servidor y un que pueda parecer un poco complejo, la realidad es que es mucho más fácil de utilizar de lo que parece, además que existe una serie de librerías para cada lenguaje que nos ayudan con el trabajo.

Artículos relacionados

Introducción a WebWorkers   Los WebWorkers son una de las nuevas características de JavaScript que permite crear aplicaciones multiprocesos. Desde su inicio JavaScript ...
HTML5, antecedentes y novedades La historia de HTML ha sido larga, ya que desde su nacimiento al principio de los 90, ha evolucionado muchísimo, pasando de ser tan solo un simple s...
IDE vs Editor de texto Una de las grandes preguntas que todo desarrollador se hace al iniciar su vida profesional es, ¿qué es mejor un IDE o un editor de texto?, o simplemen...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

2 comentarios en “Introducción a los WebSocket

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *