0Pricing
React Academy · Lección

Comparación entre SSE, WebSockets y polling

Comparar SSE (push unidireccional), WebSockets (bidireccionales) y polling según su adecuación al caso de uso y su complejidad

Comparación entre SSE, WebSockets y polling es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

WebSockets: conexión persistente bidireccional

WebSockets establece una conexión TCP persistente entre el cliente y el servidor. Ambos lados pueden enviar mensajes en cualquier momento, por lo que WebSockets es ideal para comunicaciones interactivas en tiempo real: aplicaciones de chat, edición colaborativa de documentos, juegos multijugador y cursores en directo. La conexión permanece abierta hasta que cualquiera de las partes la cierra explícitamente.

Server-Sent Events: push unidireccional

SSE (Server-Sent Events) utiliza una conexión HTTP normal en la que el servidor transmite datos al cliente como una serie de eventos. La conexión es unidireccional: solo el servidor envía datos. El cliente no puede enviar mensajes de vuelta a través de la conexión SSE; para ello realiza solicitudes HTTP independientes. SSE se implementa mediante la API EventSource del navegador.

Polling corto: el más sencillo y derrochador

El polling corto significa que el cliente envía una solicitud HTTP a intervalos fijos (por ejemplo, cada 5 segundos): «¿Hay alguna actualización?». El servidor responde inmediatamente con los datos actuales. Es la implementación más sencilla, pero también la que más recursos desperdicia: el cliente realiza muchas solicitudes cuando no hay nada nuevo. Solo es adecuado para datos que cambian muy lentamente.

Polling largo: el servidor mantiene la respuesta

El polling largo mejora el polling corto: el cliente realiza una solicitud y el servidor mantiene abierta la conexión hasta que hay nuevos datos disponibles. Cuando llegan datos nuevos, el servidor responde y el cliente realiza inmediatamente otra solicitud. Esto reduce las respuestas innecesarias, pero sigue teniendo más sobrecarga que SSE porque cada respuesta requiere establecer una nueva conexión TCP.

Ventajas de SSE

SSE ofrece varias ventajas prácticas frente a WebSockets para enviar actualizaciones del servidor al cliente: funciona sobre HTTP normal (sin actualización de protocolo), por lo que atraviesa proxies corporativos y balanceadores de carga sin una configuración especial. EventSource incorpora la reconexión automática. El protocolo basado en texto es fácil de depurar en la pestaña de red del navegador.

Limitaciones de SSE

SSE tiene limitaciones reales: solo admite texto (los datos binarios deben codificarse en base64), es unidireccional (el cliente no puede enviar datos de vuelta) y HTTP/1.1 limita a 6 el número de conexiones EventSource simultáneas por dominio (HTTP/2 las multiplexa en una sola conexión y elimina este límite). Para la comunicación bidireccional, SSE requiere llamadas REST complementarias.

Casos de uso de SSE

SSE es ideal para: paneles en directo que muestran métricas en tiempo real, fuentes de notificaciones que envían nuevas alertas, barras de progreso de procesos del servidor de larga duración, fuentes de redes sociales en directo, indicadores de cotizaciones bursátiles y interfaces de chat en las que los mensajes solo fluyen del servidor al cliente (los mensajes se envían por separado mediante POST). Todos son escenarios en los que el servidor inicia las actualizaciones.

Casos de uso de WebSocket

WebSockets son necesarios cuando se necesita una comunicación bidireccional de baja latencia: chats en tiempo real en los que los mensajes circulan en ambas direcciones por una sola conexión, edición colaborativa (al estilo de Google Docs), juegos multijugador en los que las acciones del cliente y las actualizaciones del servidor se producen rápidamente, subastas en directo y plataformas de negociación. La bidireccionalidad justifica la complejidad.

HTTP/2 y SSE

HTTP/2 mejora considerablemente la viabilidad de SSE. La multiplexación de conexiones hace que todas las transmisiones SSE de un dominio compartan una sola conexión TCP, eliminando el límite de conexiones por dominio. Si el servidor admite HTTP/2, SSE resulta aún más práctico para paneles con varias transmisiones de datos simultáneas.

Elección de la tecnología adecuada

Marco de decisión: si necesita comunicación bidireccional de baja latencia → WebSockets. Si el servidor envía actualizaciones y el cliente solo lee → SSE. Si necesita actualizaciones ocasionales y la simplicidad es importante → polling. Si la API del servidor ya existe y no puede añadir SSE → polling. Comience con la solución más sencilla que cumpla sus requisitos de latencia.

Comparación de la sobrecarga de los protocolos

El entramado de WebSocket añade entre 2 y 14 bytes por mensaje después del handshake inicial. SSE añade las cabeceras HTTP una vez por conexión y, después, texto delimitado por saltos de línea. El polling corto incluye las cabeceras completas de solicitud y respuesta HTTP en cada consulta. Para datos de alta frecuencia, WebSockets ofrece la menor sobrecarga. Para envíos del servidor poco frecuentes, SSE es más sencillo y su sobrecarga resulta aceptable.

Direccionalidad de SSE frente a WebSocket

¿Cuál es la diferencia direccional fundamental entre SSE y WebSockets?

Resumen de la lección: comparación de tecnologías en tiempo real

WebSockets: conexión TCP persistente y bidireccional (chats, juegos y edición colaborativa). SSE: push HTTP unidireccional del servidor al cliente mediante la API EventSource (notificaciones, paneles y fuentes). Polling corto: solicitudes a intervalos fijos (más sencillo y derrochador). Polling largo: el servidor mantiene la respuesta hasta que hay datos disponibles (menos solicitudes, mayor latencia). Ventajas de SSE: funciona a través de proxies y ofrece reconexión automática. Limitaciones de SSE: solo texto, unidireccional y con límites de conexiones en HTTP/1.1.

Preguntas frecuentes

¿La lección «Comparación entre SSE, WebSockets y polling» es gratis?

Sí — el texto completo de «Comparación entre SSE, WebSockets y polling» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Comparación entre SSE, WebSockets y polling»?

Comparar SSE (push unidireccional), WebSockets (bidireccionales) y polling según su adecuación al caso de uso y su complejidad Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Comparación entre SSE, WebSockets y polling»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Comparación entre SSE, WebSockets y polling
  2. Consumir streams SSE en React con EventSource
  3. Patrón de long polling y lógica de reconexión
  4. Creación de un feed de notificaciones en tiempo real
← Volver a React Academy