Usando WebSockets con Node.js
¡El 2021 JavaScript Full-Stack Bootcamp está AHORA ABIERTO PARA INSCRIPCIONES!
Los WebSockets son una alternativa a la comunicación HTTP en Aplicaciones Web.
Ofrecen un canal de comunicación bidireccional de larga duración entre el cliente y el servidor.
Una vez establecido, el canal se mantiene abierto, ofreciendo una conexión muy rápida con baja latencia y sobrecarga.
Soporte de navegadores para WebSockets
Los WebSockets son soportados por todos los navegadores modernos.
En qué se diferencian los WebSockets de HTTP
HTTP es un protocolo muy diferente, y también una forma distinta de comunicarse.
HTTP es un protocolo de petición/respuesta: el servidor devuelve unos datos cuando el cliente los solicita.
Con WebSockets:
- el servidor puede enviar un mensaje al cliente sin que éste le pida algo explícitamente
- el cliente y el servidor pueden hablar entre sí simultáneamente
- se necesita muy poca sobrecarga de datos para enviar mensajes. Esto se traduce en una comunicación de baja latencia.
- Dependencias de npm y devDependencies
- Cómo usar Sequelize para interactuar con PostgreSQL
- Una breve historia de Node.js
- Usando WebSockets con Node.js
- Cómo obtener tanto el cuerpo parseado como el cuerpo crudo en Express
- Cómo usar promesas y await con funciones basadas en callbacks de Node.js
- Cómo instalar Node.js
- Una introducción al gestor de paquetes npm
- Interactuar con la API de Google Analytics usando Node.js
Los WebSockets son estupendos para comunicaciones en tiempo real y de larga duración.
HTTP es estupendo para el intercambio ocasional de datos e interacciones iniciadas por el cliente.
HTTP es mucho más sencillo de implementar, mientras que WebSockets requiere un poco más de sobrecarga.
Secured WebSockets
Utiliza siempre el protocolo seguro y cifrado para WebSockets, wss://
.
ws://
se refiere a la versión insegura de WebSockets (la http://
de WebSockets), y debe evitarse por razones obvias.
Crear una nueva conexión WebSockets
const url = 'wss://myserver.com/something'const connection = new WebSocket(url)
connection
es un objeto WebSocket.
Cuando la conexión se establece con éxito, se dispara el evento open
.
Escúchalo asignando una función callback a la propiedad onopen
del objeto connection
:
connection.onopen = () => { //...}
Si hay algún error, se dispara el callback de la función onerror
:
connection.onerror = error => { console.log(`WebSocket error: ${error}`)}
Enviar datos al servidor mediante WebSockets
Una vez abierta la conexión, puedes enviar datos al servidor.
Puedes hacerlo convenientemente dentro de la función de callback onopen
:
connection.onopen = () => { connection.send('hey')}
Recibir datos del servidor mediante WebSockets
Escuchar con una función callback en onmessage
, que se llama cuando se recibe el evento message
:
connection.onmessage = e => { console.log(e.data)}
Implementar un servidor de WebSockets en Node.js
ws es una popular librería de WebSockets para Node.js.
La utilizaremos para construir un servidor de WebSockets. También se puede utilizar para implementar un cliente, y utilizar WebSockets para comunicarse entre dos servicios de backend.
Instálalo fácilmente usando
yarn inityarn add ws
El código que necesitas escribir es muy poco:
const WebSocket = require('ws')const wss = new WebSocket.Server({ port: 8080 })wss.on('connection', ws => { ws.on('message', message => { console.log(`Received message => ${message}`) }) ws.send('ho!')})
Este código crea un nuevo servidor en el puerto 8080 (el puerto por defecto para WebSockets), y añade una función callback cuando se establece una conexión, enviando ho!
al cliente, y registrando los mensajes que recibe.
Ver un ejemplo en vivo en Glitch
Aquí tienes un ejemplo en vivo de un servidor de WebSockets: https://glitch.com/edit/#!/flavio-websockets-server-example
Aquí tienes un cliente WebSockets que interactúa con el servidor: https://glitch.com/edit/#!/flavio-websockets-client-example
¡El 2021 JavaScript Full-Stack Bootcamp YA ESTÁ ABIERTO PARA INSCRIPCIONES HASTA EL PRÓXIMO MARTES! No te pierdas esta oportunidad, ¡inscríbete HOY!