Real-Time Web con WebSockets

Romel Pérez
bucaramangajs
Published in
3 min readFeb 16, 2017

En el mundo actual donde cada vez más estamos conectados, los sistemas de comunicación en tiempo real cobran más importancia. Aplicaciones de mensajería instantánea, herramientas de colaboración en la edición de gráficos, y hasta videojuegos online en realidad virtual, son algunos de los ejemplos de este tipo de sistemas. He aquí donde investigamos cómo podemos crear y hacer parte de esta revolución.

Una de las alternativas que tenemos en plataformas web es WebSocket. Esta es una tecnología que nos permite crear sistemas bidireccionales de comunicación instantánea y simultánea entre clientes y servidores. Una característica de HTML5 que permite mejor conectividad en la web.

HTML5 Connectivity.

WebSocket

El consumo de contenido en Internet ha incrementado tremendamente en los últimos años y con la demanda surgen herramientas para crear y generar contenidos y experiencias más enriquecidas. Sin embargo, para sistemas de comunicación instantánea no ha sido fácil implementar soluciones sencillas.

Afortunadamente, WebSocket ha sido estandarizado y con JavaScript como el lenguaje de la web, es muy fácil iniciar un proyecto de este tipo. Éste lo soporta nativamente en los navegadores modernos, haciendo posible alcanzar una mayor audiencia.

Soporte de WebSocket en navegadores modernos, mostrados por uso relativo. Extraido de http://caniuse.com/#feat=websockets

Anteriormente se ha optado por soluciones tales como Comet, long-polling o basadas en AJAX, las cuales no fueron diseñadas para los sistemas de hoy. Sin embargo, ahora disponemos de muchas soluciones basadas en WebSocket que nos permiten desarrollar este tipo de sistemas sin tanto problema.

Cómo funciona

La comunicación a través de plataformas web está basada en HTTP, la cual permite requerir información desde un cliente, usualmente un navegador, a un servidor, por ejemplo en Node.js. El problema surge cuando queremos hacer el proceso inverso. WebSocket resuelve el problema permitiendo que la información se transmita a través de mensajes en los dos sentidos en una misma conexión.

WebSockets, una presentación visual. Extraida de https://www.pubnub.com/websockets/

Esto nos trae muchas ventajas, como la reducción de carga a través de la red y principalmente una arquitectura que nos permite diseñar nuestros proyectos de una manera más sencilla, minimizando los problemas que nos podemos encontrar. Ahora bien, suele ser muy conveniente utilizar abstracciones que trabajan encima de WebSocket al desarrollar nuestras aplicaciones, ya que ellas nos proveen de utilidades ya pensadas para resolver los problemas más comunes a ocurrir.

Engines

Entre el repertorio de herramientas que podemos encontrar para crear sistemas real-time, especialmente usando Node.js, encontramos el engine socket.io.

Socket.io Engine.

Socket.io nos facilita la tarea de crear y manejar aplicaciones por grupos de sockets y controlar los procesos de conexiones, seguridad y eventos con una API bastante intuitiva.

Ejemplo de implementación

Para iniciar en este interesante tema de tecnologías, podemos crear un simple chat. En la documentación de socket.io nos encontramos con un Guía: Aplicación Chat con Socket.io. La idea es entender los conceptos de arquitectura de una aplicación en tiempo real con algo que todos en algún momento hemos utilizado.

Tutorial de Chat de Socket.io

También puedes encontrar un ejemplo de implementación de un chat en el repositorio en GitHub BucaramangaJS/chat usando socket.io.

Ejemplo de Chat en Socket.io

Espero que te haya sido de ayuda para empezar con estas nuevas tecnologías. No dejes de estar pendiente de BucaramangaJS para nuevos eventos y no dudes en participar!

--

--

Romel Pérez
bucaramangajs

Software engineering autodidact. Enthusiast, JavaScript dev, Sci-Fi and nature fan. Making the world a better place through lines of code https://romelperez.com