Introducción a tiempo real

Compara WebSocket y SSE con criterios técnicos claros para implementar actualizaciones en tiempo real sin sobrecoste innecesario.

Tiempo real no significa siempre WebSocket.

SSE simplifica flujos unidireccionales; WebSocket sirve para bidireccionalidad.

La reconexión y el manejo de estado son parte del problema, no extras.

Meta: seleccionar canal correcto según caso de uso y carga.

  • La dirección del flujo define la tecnología.
  • SSE: servidor -> cliente, simple y eficiente para notificaciones.
  • WebSocket: bidireccional, ?til para chat o colaboración.
  • SSE reconecta automáticamente en muchos escenarios.
  • WebSocket exige estrategia de reconexión manual más explícita.

WebSocket vs SSE: criterio de elección

La dirección del flujo define la tecnología.

  • SSE: servidor -> cliente, simple y eficiente para notificaciones.
  • WebSocket: bidireccional, ?til para chat o colaboración.
  • SSE reconecta automáticamente en muchos escenarios.
  • WebSocket exige estrategia de reconexión manual más explícita.

Gestionar estado de conexión

Sin estados claros, tu UI miente al usuario.

Errores frecuentes en tiempo real

Muchos fallos son de arquitectura, no de socket.

  • No implementar heartbeat o timeout.
  • No limitar frecuencia de mensajes.
  • No diferenciar eventos por tipo y versión.
  • Reintentos infinitos sin backoff.

Transferencia a productos reales

Paneles de operaciones, chats y trading requieren este diseño.

Define contrato de eventos, versionado y estrategia de reconexión antes de escribir interfaz.

JavaScript
41

Introducción a tiempo real

Compara WebSocket y SSE con criterios técnicos claros para implementar actualizaciones en tiempo real sin sobrecoste innecesario.

Código del tema: WebSocket | EventSource | reconnection

📘 Teoría

WebSocket vs SSE: criterio de elección

La dirección del flujo define la tecnología.

  • SSE: servidor -> cliente, simple y eficiente para notificaciones.
  • WebSocket: bidireccional, ?til para chat o colaboración.
  • SSE reconecta automáticamente en muchos escenarios.
  • WebSocket exige estrategia de reconexión manual más explícita.

Gestionar estado de conexión

Sin estados claros, tu UI miente al usuario.

Estados mínimos del cliente
const state = { connected: false, retries: 0 };

function onOpen() { state.connected = true; state.retries = 0; }
function onClose() { state.connected = false; state.retries += 1; }

Errores frecuentes en tiempo real

Muchos fallos son de arquitectura, no de socket.

  • No implementar heartbeat o timeout.
  • No limitar frecuencia de mensajes.
  • No diferenciar eventos por tipo y versión.
  • Reintentos infinitos sin backoff.

Transferencia a productos reales

Paneles de operaciones, chats y trading requieren este diseño.

Define contrato de eventos, versionado y estrategia de reconexión antes de escribir interfaz.

🧪 Aprende probando

Ejemplo Ejemplo guiado: cliente SSE básico Escucha eventos de servidor y actualiza estado local.

🏁 Retos

Reto Reto: reconexión con backoff Implementa reintento progresivo para conexión WebSocket.

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .