¡Qué onda, dev! Si estás empezando a construir aplicaciones interactivas en el navegador, seguro te has topado con la necesidad de enviar o recibir datos en tiempo real. Ya no basta con recargar la página para ver si hay un nuevo mensaje; hoy todo sucede al instante.

Para lograr esto en JavaScript, dos tecnologías muy populares son WebSocket y WebRTC. Aunque ambas suenan similares y sirven para comunicación en tiempo real, funcionan de maneras completamente distintas y resuelven problemas diferentes.

En este artículo te explicamos de forma sencilla cómo funciona cada una y cuál deberías elegir para tu proyecto.

¿Por qué necesitamos comunicación en tiempo real?

En la web tradicional (usando HTTP), el navegador (cliente) siempre hace una petición y el servidor responde. Si el servidor tiene información nueva, no puede enviártela hasta que tú se la pidas.

Las tecnologías de tiempo real rompen este esquema creando un canal de comunicación abierto permanentemente.

1. WebSocket: El puente servidor-cliente

WebSocket es un protocolo que establece una conexión dúplex (bidireccional) y permanente entre el navegador del usuario y tu servidor central.

  • ¿Cómo funciona? El navegador le dice al servidor: “Oye, abramos una línea directa”. Una vez abierta, tanto el servidor como el cliente pueden enviarse mensajes en cualquier momento con muy baja latencia.
  • Caso de uso ideal: Tableros de control en vivo, chats donde el servidor almacena mensajes, juegos multijugador centralizados, notificaciones en tiempo real o precios de criptomonedas.

2. WebRTC: Conexión directa usuario a usuario (P2P)

WebRTC (Web Real-Time Communication) es un conjunto de tecnologías que permite transmitir audio, video y datos directamente entre dos o más navegadores, sin que los datos pasen por el servidor (salvo para la fase de conexión inicial llamada signaling).

  • ¿Cómo funciona? Los navegadores se conectan punto a punto (Peer-to-Peer o P2P). Tu servidor solo ayuda a que los usuarios “se encuentren”; una vez conectados, la información viaja directamente de un dispositivo a otro.
  • Caso de uso ideal: Videollamadas (tipo Zoom o Meet), llamadas de voz, o transferencia directa de archivos pesados entre usuarios.

La regla de oro para elegir

Para no complicarte la vida, recuerda esta regla básica:

  1. ¿Los datos van entre el usuario y tu servidor? Usa WebSocket.
  2. ¿Los datos (audio, video o archivos) van directamente de un usuario a otro usuario? Usa WebRTC.

Ejemplo práctico: Creando un cliente WebSocket en JavaScript

Conectar a un servidor WebSocket desde el navegador es súper sencillo usando JavaScript nativo:

// 1. Crear la conexión con el servidor WebSocket
const socket = new WebSocket('wss://echo.websocket.org');

// 2. Escuchar cuando la conexión se abre
socket.addEventListener('open', (event) => {
  console.log('¡Conectados al servidor WebSocket!');
  // Enviamos un mensaje de prueba al servidor
  socket.send('¡Hola desde 8devmx!');
});

// 3. Escuchar los mensajes que nos envía el servidor
socket.addEventListener('message', (event) => {
  console.log('Mensaje recibido del servidor:', event.data);
});

// 4. Manejar posibles errores
socket.addEventListener('error', (error) => {
  console.error('Error en la conexión WebSocket:', error);
});

Errores comunes al empezar

  • Intentar hacer videollamadas solo con WebSockets: Aunque puedes transmitir audio/video por WebSocket, no está optimizado para flujos multimedia pesados. Para eso existe WebRTC.
  • Creer que WebRTC no necesita servidor: WebRTC necesita un servidor de signaling (que a menudo se construye con WebSockets) para intercambiar direcciones IP antes de conectar a los usuarios.
  • No gestionar las reconexiones en WebSocket: Si el usuario pierde internet temporalmente, la conexión se cierra. Es importante implementar una lógica que intente reconectarse automáticamente.

Buenas prácticas

  • Usa el protocolo seguro wss:// en lugar de ws:// para encriptar la información transmitida en WebSockets.
  • Cierra las conexiones (socket.close()) cuando el usuario cambie de página o ya no necesite la recepción de datos en vivo para liberar memoria.
  • Si apenas estás aprendiendo, apóyate en librerías como Socket.io (para WebSockets) o PeerJS (para WebRTC), ya que facilitan mucho el trabajo inicial.

Reto para ti

Intenta copiar el código del ejemplo en la consola de desarrollador de tu navegador (F12) y observa cómo se conecta al servidor de prueba y recibe una respuesta inmediata. ¡Experimenta enviando diferentes mensajes!

Fuente original

Este artículo se inspiró en los conceptos clave analizados en: WebSocket vs WebRTC: Which One Does Your App Need? por Shaw Alakkad.