Desbloqueando o poder do Nodejs Websocket: guia completo

Liberando el poder de Nodejs Websocket: guía completa

30 de mayo de 2024 Roberto Magalhães

Libere el poder de la comunicación en tiempo real con los websockets de NodeJS. Descubra cómo esta tecnología puede revolucionar su proceso de desarrollo.

¿Alguna vez se ha encontrado en una situación en la que necesitaba crear una aplicación en tiempo real? Aún así, encontró que los modelos tradicionales de comunicación cliente-servidor eran demasiado lentos e ineficientes. En caso afirmativo, WebSockets es la solución que estás buscando. WebSockets es un potente protocolo que permite una comunicación bidireccional de baja latencia entre el cliente y el servidor. Según la encuesta para desarrolladores Stack Overflow 2022 , en la categoría de tecnología y marco web, Node.js obtuvo un 47,12%. Esto significa que es la tecnología web más popular.

Por lo tanto, a menudo surge una pregunta: ¿cómo se utilizan WebSockets en Node.js? Investiguemos con más detalle un servidor de aplicaciones WebSocket fundamental. En este artículo, cubriremos los conceptos básicos de WebSockets, cómo configurarlos usando Node.js, cómo crear un cliente WebSocket con JavaScript y más. Al final de este artículo, comprenderá bien el uso de WebSockets con Node.js para crear aplicaciones en tiempo real.

¿Qué son los WebSockets?

WebSocket es un protocolo de Internet que proporciona canales de comunicación full-duplex (bidireccionales) a través de una única conexión TCP entre un navegador web u otra aplicación cliente y un servidor web. Fue diseñado para implementarse en navegadores y servidores web, pero puede ser utilizado por. cualquier aplicación cliente o servidor. El protocolo WebSocket permite la interacción entre un cliente y un servidor con menos gastos generales que las alternativas semidúplex, como el sondeo HTTP, que requieren viajes de ida y vuelta adicionales del cliente para mantener activas las conexiones. Por el contrario, los WebSockets permanecen abiertos hasta que un lado los cierra explícitamente o debido a errores o tiempos de espera de red en ambos lados.

WebSockets hace que sea mucho más fácil para los desarrolladores crear aplicaciones interactivas enriquecidas porque ya no tienen que preocuparse por crear ciclos de solicitud/respuesta de larga duración. En cambio, simplemente envían mensajes a través del socket cuando es necesario sin hacer que los usuarios esperen actualizaciones de la página, etc., lo que resulta en una mejor capacidad de respuesta y una mejor experiencia de usuario en general.

Además, como todos los datos transmitidos a través de este canal están cifrados (mediante TLS), los problemas de seguridad asociados con las solicitudes HTTP tradicionales se reducen drásticamente, lo que las hace ideales para operaciones sensibles donde la privacidad es más importante, como transacciones bancarias, etc.

WebSockets también elimina la necesidad de escribir código personalizado cada vez que es necesario propagar una actualización entre varios clientes conectados a través de la misma sesión. En cambio, los cambios realizados en un extremo se propagan automáticamente a los demás, ¡ahorrando valiosos recursos de desarrollo!

Implementando WebSockets usando Node.js

Para implementar WebSockets en Node.js, existen algunos requisitos previos que debe cumplir. También es importante que siga las mejores prácticas de seguridad al crear una aplicación Node.js. Entonces, cuando se trata de garantizar la seguridad de sus aplicaciones Node.js, las mejores prácticas de seguridad de Node.js pueden ayudarlo a proteger sus datos y sus usuarios.

Requisitos previos

Estos son los requisitos previos para crear una aplicación WebSocket:

Node.js: debe tener la última versión de Node.js instalada y lista en su máquina. Si no tiene Node'js, puede descargar e instalar la última versión desde el sitio web oficial de Node.js. .
Biblioteca WebSocket: deberá instalar una biblioteca WebSocket como ws para manejar las conexiones de socket para su aplicación.

Implementación

Ahora que tenemos todo configurado, estamos listos para comenzar a crear nuestra aplicación WebSocket.

Paso 1: Inicialice el proyecto para ejecutar Websocket Nodejs

Primero, cree un nuevo proyecto Node.js en el directorio que elija. Luego instale la biblioteca ws usando el administrador de paquetes de nodo (npm):

 mkdir nodejs-websockets
 cd nodejs-websockets
 inicio npm -y

Paso 2: instalar las dependencias requeridas

A continuación, necesitamos instalar la biblioteca ws, que nos permitirá mostrar el lado del cliente mediante una página HTML. Para instalar la biblioteca, abra su terminal y escriba el siguiente comando npm:

 npm instala ws express

Así es como se ve su archivo package.json:

 {
 "nombre": "websockets-nodejs",
 "versión": "1.0.0",
 "descripción": "",
 "principal": "index.js",
 "guiones": {
  "prueba": "echo \"Error: no se ha especificado ninguna prueba\" && salida 1"
 },
 "palabras clave": ,
 "autor": "",
 "licencia": "ISC",
 "dependencias": {
  "expreso": "^4.18.2",
  "ws": "^8.13.0"
 }
 }

Nota: Este tutorial se basa en la versión 8.13.0 de ws y la versión 4.18.2 del paquete express. Por lo tanto, su implementación puede diferir según la última versión durante la instalación.

Paso 3: cree un servidor WebSocket

Ahora que tenemos todo configurado, creemos el servidor WebSocket para nuestra aplicación. Primero, cree un nuevo archivo en la carpeta de su proyecto y asígnele el nombre server.js. Luego agregue el siguiente código del lado del servidor:

 const expresar = requerir('expresar')

 servidor web constante = expreso
 .use((solicitud, res) =>
  res.sendFile('/ws-client.html', {raíz: __dirname})
 )
 .listen(3000, => console.log(`Escuchando en ${3000}`))

 const { WebSocketServer } = requerir('ws')
 const calcetineserver = nuevo WebSocketServer({ puerto: 2048 })

 calcetineserver.on('conexión', ws => {
  console.log('¡Nuevo cliente conectado!')

  ws.send('conexión establecida')

  ws.on('close', => console.log('¡El cliente se ha desconectado!'))

  ws.on('mensaje', datos => {
    calcetineserver.clientes.forEach(cliente => {
    console.log(`mensaje de distribución: ${data}`)
    cliente.enviar(`${datos}`)
    })
  })

  ws.onerror = función {
    console.log('error de websocket')
  }
 }
 )

Esto creará un nuevo servidor WebSocket en el puerto 2048 que escuchará nuevas conexiones. Por lo tanto, cuando un nuevo cliente se conecta, envía mensajes o se desconecta, el servidor registrará un mensaje en la consola.

Paso 4: cree un cliente WebSocket

Para que el servidor esté disponible a través del navegador, debe crear una página HTML llamada ws-client.html.

 <!DOCTYPE html>
 <html lang="es">
 <cabeza>
  <meta juego de caracteres="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0" />
  <title>Aplicación de chat WebSocket</title>

  <link href = "https://cdn.jsdelivr.net/npm/ counter protected) /dist/css/bootstrap.min.css" Rel = "Stylesheet" Integrity = "Sha384-GlhTQ8IRABDZLL6O3 7cmda6J6GD "Crossorigin =" Anónimo ">
  <estilo>
   cuerpo{
    relleno: 4rem;
    alineación de texto: centro;
   }
  </estilo> 
</cabeza>
 <cuerpo>
 <h1>Aplicación de chat WebSocket</h1><br /><br /><br />

 <formulario>
 <input type="text" placeholder="Ingrese el mensaje aquí" name="message"><br /><br />
 <tipo de entrada="enviar" valor="Enviar"><br /><br />
 </formulario>

 <div></div>
 </cuerpo>
 </html>

Agregue el siguiente código al elemento script del archivo HTML para crear un cliente WebSocket:

 const webSocket = nuevo WebSocket('ws://localhost:2048/');

 webSocket.onmessage = (evento) => {
 consola.log(evento)
 document.getElementById('mensajes').innerHTML +=
  'Mensaje del servidor: ' + event.data + "<br />";
 };

 webSocket.addEventListener("abierto", => {
 console.log("El cliente ahora está conectado");
 });

 función enviarMensaje(evento) {
 var inputMessage = document.getElementById('mensaje')
 webSocket.send(inputMessage.valor)
 inputMessage.valor = ""
 evento.preventDefault;
 }
 
document.getElementById('formulario de entrada').addEventListener('enviar', sendMessage);

Al utilizar el puerto 2048 para conectarse al servidor, este código establece un nuevo cliente WebSocket. Enviamos un mensaje al servidor tan pronto como se establece la conexión y registramos un mensaje en la consola. También vigilamos los mensajes del servidor y los registramos en la consola. Cuando el cliente se desconecta, finalmente esperamos a que el evento de terminación registre un mensaje.

El archivo HTML final debería verse así:

 <!DOCTYPE html>
 <html lang="es">
 <cabeza>
  <meta juego de caracteres="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0" />
  <title>Aplicación de chat WebSocket</title>
 
<link href = "https://cdn.jsdelivr.net/npm/ contador protegido) /dist/css/bootstrap.min.css" Rel = "Hoja de estilo" Integridad = "Sha384-GlhTQ8IRABDZLL6O3 7cmda6J6GD "Crossorigin =" Anónimo ">
 <estilo>
 cuerpo{
 relleno: 4rem;
 alineación de texto: centro;
 }
 </estilo>
 </cabeza>
 <cuerpo>
 <h1>Aplicación de chat WebSocket</h1><br /><br /><br />

 <formulario>
 <input type="text" placeholder="Ingrese el mensaje aquí" name="message"><br /><br />
 <tipo de entrada="enviar" valor="Enviar"><br /><br />
 </formulario>

 <div></div>
 <guión>
 const webSocket = nuevo WebSocket('ws://localhost:2048/');

 webSocket.onmessage = (evento) => {
 consola.log(evento)
 document.getElementById('mensajes').innerHTML +=
 'Mensaje del servidor: ' + event.data + "<br />";
 };
 
webSocket.addEventListener("abierto", => {
 console.log("El cliente ahora está conectado");
 });

 función enviarMensaje(evento) {
 var inputMessage = document.getElementById('mensaje')
 webSocket.send(inputMessage.valor)
 inputMessage.valor = ""
 evento.preventDefault;
 }

 document.getElementById('formulario de entrada').addEventListener('enviar', sendMessage);
 </script>
 </cuerpo>
 </html>

Su página HTML se vería así.

Paso 5: inicie el servidor y ejecute el cliente

Finalmente, inicie el servidor ejecutando el siguiente comando en su terminal:

 servidor de nodo.js

Deberías ver el siguiente resultado en tu terminal:

Esto indica que el servidor ahora se está ejecutando.

Ahora, ve a tu navegador y abre

El resultado muestra que el cliente se ha conectado correctamente al servidor.

Puede ver que la aplicación cliente está conectada al servidor. Ahora puedes abrir varias instancias de la aplicación e intentar enviar y recibir mensajes. Como puede ver, recibe un mensaje de respuesta en tiempo real del servidor en la página web, justo debajo del botón de enviar.

Alternativas a la biblioteca ws

Si bien la biblioteca ws es una opción popular para trabajar con WebSockets en Node.js, se pueden utilizar otras bibliotecas y marcos para lograr resultados similares. Veamos algunas de estas alternativas y compárelas con la biblioteca ws.

Enchufe.io

Trabajar con conexiones WebSocket en Node.js es simplificado e intuitivo gracias al conocido módulo WebSocket Soquete.io . Los desarrolladores pueden crear aplicaciones que se ejecuten en una variedad de dispositivos, ya que esto permite mecanismos alternativos para navegadores que no admiten WebSockets.

La capacidad de diseñar aplicaciones complicadas con múltiples canales de comunicación gracias al soporte de Socket.io para espacios de nombres y salas es uno de sus beneficios clave. Es una excelente opción para aplicaciones en tiempo real porque tiene un método integrado para manejar desconexiones y reconexiones de clientes.

Pero en comparación con la biblioteca ws, Socket.io tiene una base de código más grande y más dependencias, lo que puede hacerlo más lento y utilizar más recursos. Además, el código es difícil de leer y mantener debido a la gran dependencia de las devoluciones de llamadas.

calcetínjs

Para los navegadores que no admiten WebSockets, SockJS, otra biblioteca de WebSocket, ofrece una opción alternativa. Además, admite una variedad de transportes, como el sondeo, que pueden resultar ventajosos al interactuar con navegadores y dispositivos más antiguos.

SockJS admite implementaciones del lado del servidor en muchos lenguajes, incluidos Java, Python y Ruby, lo cual es uno de sus principales beneficios. Debido a esto, es una excelente opción para desarrollar aplicaciones multiplataforma.

Sin embargo, SockJS es menos conocido y utilizado que la biblioteca ws y Socket.io, lo que hace más difícil encontrar asistencia e información en línea. Además, ofrece menos funciones y puede que no sea adecuado para aplicaciones sofisticadas.

uWebSockets.js

Un marco WebSocket liviano llamado uWebSockets.js proporciona una interfaz de alto rendimiento para administrar conexiones WebSocket en Node.js. Es una buena opción para aplicaciones de transmisión de datos de alta velocidad, ya que utiliza un núcleo C++ de bajo nivel para proporcionar un rendimiento rápido y baja latencia.

Uno de los principales beneficios de uWebSockets.js es su base de código compacta y su bajo uso de recursos, lo que puede reducir los costos del servidor y aumentar el rendimiento. Es una opción adecuada para aplicaciones en tiempo real porque tiene un sistema incorporado para manejar desconexiones y fallas.

La curva de aprendizaje de uWebSockets.js es más pronunciada que la de otras bibliotecas WebSocket, por lo que puede no ser apropiada para programadores novatos o desarrolladores con poca experiencia en programación de bajo nivel.

Pros y contras de las bibliotecas WebSocket

Cada biblioteca tiene ventajas y desventajas según los requisitos de la aplicación y la experiencia del desarrollador.

A continuación se muestran algunos pros y contras generales del uso de bibliotecas WebSocket en Node.js.

Ventajas	Contras
Las bibliotecas WebSocket proporcionan una interfaz sencilla y cómoda.	Las bibliotecas WebSocket pueden consumir más recursos que las conexiones HTTP tradicionales. Esto aumenta los costos del servidor y reduce el rendimiento.
Admiten transferencias de datos en tiempo real y comunicación bidireccional entre clientes y servidores.	Pueden ser más complicados de instalar y configurar en comparación con las conexiones HTTP tradicionales.
Pueden crear aplicaciones complejas con múltiples canales de comunicación. Por ejemplo. salas de chat, juegos multijugador y paneles en tiempo real.	Requieren que tanto el servidor como el cliente admitan el protocolo WebSocket. Esto puede limitar la compatibilidad con dispositivos y navegadores más antiguos.

Alternativas a WebSockets

Profundicemos en las alternativas a WebSockets y compárelas con WebSockets.

Encuesta larga	El sondeo largo es un método en el que el cliente envía una solicitud al servidor, que lo mantiene abierto hasta que recibe nuevos datos. Como resultado, la comunicación en tiempo real es posible sin una conexión constante. Sin embargo, las encuestas largas tienen el potencial de ser ineficaces y lentas, especialmente para aplicaciones con muchos clientes activos.
Eventos enviados por el servidor (SSE)	Una única conexión HTTP puede enviar actualizaciones en tiempo real desde el servidor al cliente utilizando el estándar SSE. En comparación con WebSockets, SSE es más fácil de usar y no requiere un protocolo separado. Sin embargo, no todos los navegadores lo admiten.
WebRTC	La comunicación en tiempo real es posible entre navegadores gracias al protocolo WebRTC. Para aplicaciones como videoconferencias o transmisión en vivo que necesitan mucho ancho de banda y baja latencia, WebRTC es la mejor opción.
MQTT	MQTT es un protocolo de mensajería ligero que se utiliza a menudo para aplicaciones de Internet de las cosas (IoT). MQTT es adecuado para dispositivos de bajo consumo y conexiones de red poco confiables, pero no cuenta con un soporte tan amplio como WebSockets.

Es fundamental considerar los requisitos específicos de su aplicación al comparar WebSockets con varias alternativas. Los WebSockets son capaces de admitir múltiples clientes activos y proporcionar comunicación bidireccional de baja latencia. Los navegadores modernos también admiten con frecuencia WebSockets, que son fáciles de crear en Node.js utilizando el paquete ws.

Por otro lado, aunque pueden ser más fáciles de construir, algunas alternativas, como Long Polling y SSE, pueden no ser tan efectivas o escalables. Aunque WebRTC implica una configuración adicional y no siempre es necesaria, es excelente para algunos casos de uso. MQTT funciona bien para aplicaciones de Internet de las cosas; sin embargo, es posible que no funcione en todos los escenarios de comunicación en tiempo real.

Conclusión

En conclusión, WebSockets es una herramienta poderosa que puede proporcionar excelentes soluciones para crear aplicaciones en tiempo real. Permiten una comunicación bidireccional y de baja latencia entre el cliente y el servidor.

Cuando se utilizan junto con Node.js, proporcionan una solución escalable y de alto rendimiento para que los desarrolladores creen aplicaciones en tiempo real con GUI ricas, interactivas y receptivas sin preocuparse por ciclos de solicitud/respuesta de larga duración. Además, WebSockets mejora la seguridad de operaciones confidenciales, como transacciones bancarias, y elimina la necesidad de código personalizado cada vez que es necesario transferir una actualización entre varios clientes.

Al desarrollar aplicaciones Node.js, es importante encontrar un equipo de desarrolladores confiable y experimentado que pueda proporcionar servicios Node.js escalables y de alta calidad. La empresa de desarrollo de Node.js debe tener experiencia previa en la creación de aplicaciones Node.js innovadoras y orientadas al rendimiento.

Si le gustó este artículo, consulte nuestras otras guías a continuación;