WebSocket vs. WebRTC: ¿Cuál elegir para tu aplicación en JavaScript?

Introducción

¡Qué onda, devs! Cuando empezamos a construir aplicaciones web interactivas, como un chat en vivo, un tablero colaborativo o un sistema de notificaciones instantáneas, rápidamente nos damos cuenta de que el modelo tradicional de HTTP (donde el cliente pide y el servidor responde) se queda corto.

Es aquí donde entran dos tecnologías estrella para la comunicación en tiempo real: WebSocket y WebRTC. Aunque ambas suenan parecidas y sirven para enviar datos al instante, funcionan de maneras completamente distintas. En este tutorial vamos a desglosar qué hace cada una, cuándo conviene usarlas y cómo dar tus primeros pasos con JavaScript.

¿Cómo funciona cada una?

La regla de oro para entender la diferencia es preguntarte: ¿a dónde viajan los datos?

1. WebSocket (Cliente a Servidor)

WebSocket establece un canal de comunicación bidireccional y persistente entre un usuario (cliente) y tu servidor. Una vez establecida la conexión, ambas partes pueden enviarse mensajes en cualquier momento sin la sobrecarga de encabezados HTTP tradicionales.

Ideal para: Chats grupales centralizados, tableros de resultados deportivos en vivo, feeds de finanzas o notificaciones del sistema.
Arquitectura: Cliente ↔ Servidor.

2. WebRTC (Peer-to-Peer / Punto a Punto)

WebRTC (Web Real-Time Communication) está diseñada para transferir datos, audio o video directamente entre navegadores de usuarios, sin que la información pase por tu servidor principal (salvo para la fase inicial de conexión conocida como señalización).

Ideal para: Videollamadas (tipo Zoom/Google Meet), llamadas de voz, o transferencia directa de archivos pesados entre usuarios.
Arquitectura: Cliente ↔ Cliente (P2P).

Ejemplo práctico: Creando un cliente WebSocket en JavaScript

Para empezar a experimentar, WebSocket es mucho más sencillo de implementar. Aquí tienes un ejemplo funcional utilizando la API nativa de JavaScript en el navegador:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo WebSocket - 8devmx</title>
</head>
<body>
  <h1>Probando WebSockets</h1>
  <button id="btnEnviar">Enviar saludo</button>
  <div id="log"></div>

  <script>
    // Conectamos a un servidor de eco público para pruebas
    const socket = new WebSocket('wss://echo.websocket.org');
    const logDiv = document.getElementById('log');
    const btn = document.getElementById('btnEnviar');

    // Evento cuando la conexión se abre
    socket.addEventListener('open', () => {
      logDiv.innerHTML += '<p>✅ Conectado al servidor WebSocket</p>';
    });

    // Evento cuando recibimos un mensaje del servidor
    socket.addEventListener('message', (event) => {
      logDiv.innerHTML += `<p>📩 Respuesta del servidor: ${event.data}</p>`;
    });

    // Enviar mensaje al hacer clic
    btn.addEventListener('click', () => {
      const mensaje = '¡Hola desde 8devmx!';
      socket.send(mensaje);
      logDiv.innerHTML += `<p>📤 Enviado: ${mensaje}</p>`;
    });

    // Manejo de errores
    socket.addEventListener('error', (error) => {
      console.error('Error en WebSocket:', error);
    });
  </script>
</body>
</html>

Errores comunes al empezar

Pensar que WebRTC no requiere servidor: Aunque WebRTC transmite datos de punto a punto, requiere obligatoriamente un servidor de señalización (que a menudo usa WebSockets) para que los dos usuarios se encuentren inicialmente.
No gestionar la reconexión en WebSockets: La conexión a internet de un usuario puede fallar. Si no implementas un mecanismo para reconectar automáticamente el WebSocket, la app se quedará congelada.
Usar el protocolo inseguro en producción: Recuerda usar siempre wss:// (WebSocket Secure) en lugar de ws:// cuando trabajes en entornos reales con HTTPS.

Buenas prácticas

Elige según el flujo de datos: Si tus datos van del usuario al servidor (y viceversa), usa WebSocket. Si van directamente entre dos o más usuarios (como streaming de video), usa WebRTC.
Controla el tráfico de datos: No envíes objetos enormes por WebSocket si no es necesario; envía solo los cambios de estado (diferencias).
Combínalos si es necesario: Muchas aplicaciones usan WebSockets para el chat de texto y la señalización, y WebRTC para la transmisión de audio y video.

Ejercicio práctico

Copia el código HTML de ejemplo en un archivo local llamado index.html.
Ábrelo en tu navegador y presiona el botón para enviar un mensaje.
Modifica el código para que permita al usuario escribir un mensaje personalizado en un <input> en lugar de enviar siempre el mismo texto fijo.