ES
RU
EN
ZH
FR
DE
PT
AR
HI
¿Qué son Server-Sent Events y por qué los necesita?
\n\nImagine: abrió un sitio web con tipos de cambio de divisas, y el valor del dólar cambia ante sus ojos — sin recargar la página, sin presionar botones. O está esperando el resultado del procesamiento de un archivo grande en el servidor, y de repente aparece una línea: «Listo al 70%». ¿Cómo funciona esto? Una de las formas más elegantes son los Server-Sent Events (SSE).
\n\nSSE es una tecnología que permite al servidor enviar datos al cliente de forma independiente en cualquier momento, tan pronto como estén disponibles. A diferencia de WebSocket, SSE solo funciona en una dirección — del servidor al cliente. Pero ahí radica su superpoder: es increíblemente simple, eficiente e ideal para tareas donde el cliente solo necesita recibir actualizaciones.
\n\nEn este artículo, analizaremos cómo usar Server-Sent Events en JavaScript, escribiremos código funcional y entenderemos cuándo SSE es la mejor opción, y cuándo es mejor mirar hacia WebSocket. ¿Listo? ¡Vamos allá!
\n\n¿Cómo funcionan Server-Sent Events (SSE)?
\n\nTécnicamente, SSE es simplemente una conexión HTTP que el servidor no cierra después de enviar la respuesta. En su lugar, envía datos en partes, utilizando el formato especial text/event-stream. El cliente (navegador) escucha esta conexión a través del objeto EventSource y genera eventos al recibir cada nuevo mensaje.
Así es como se ve una respuesta típica del servidor:
\n\ndata: {"message": "¡Hola!", "timestamp": 1700000000}\n\ndata: {"message": "Nueva notificación", "timestamp": 1700000001}Cada mensaje comienza con data:, seguido de un espacio y el contenido en sí. Los mensajes se separan con dos caracteres de nueva línea \\n\\n. El servidor también puede enviar identificadores (id:) y tipos de eventos (event:), pero el conjunto mínimo es data.
La parte del cliente es aún más simple:
\n\nconst eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n console.log('Datos recibidos:', e.data);\n};\n\neventSource.onerror = (e) => {\n console.error('Error de conexión', e);\n};¡Eso es todo! Sin apretones de manos complejos, sin bibliotecas — el navegador se reconecta automáticamente cuando se interrumpe, maneja la pérdida de conexión por sí mismo. Esta es la magia principal de los Server-Sent Events.
\n\nSSE vs WebSocket: ¿cuándo elegir qué?
\n\nA menudo, los principiantes piensan: «Como SSE es más simple, entonces siempre es mejor». Pero no es así. Cada tecnología tiene su propio nicho. Comparemos.
\n\n| Característica | \nSSE | \nWebSocket | \n
|---|---|---|
| Dirección de los datos | \nSolo servidor → cliente | \nBidireccional | \n
| Simplicidad de implementación | \nMuy simple (nativo del navegador) | \nMedia (se necesita biblioteca) | \n
| Reconexión automática | \nIncorporada | \nHay que implementarla manualmente | \n
| Soporte en navegadores | \nTodos los modernos (excepto IE) | \n
Blogs
Salarios de desarrolladores TypeScript en Rusia: panorama del mercado 2024
Rust en GitHub: los mejores proyectos open-source para desarrolladoresBook RecommendationsLeer también
Pruebas de integración de Kotlin con Docker: guía completa
Docker para desarrolladores PHP: guía completa de contenerización
Registro en aplicaciones PHP: mejores prácticas y herramientas
Monitoreo de aplicaciones Rust: métricas y alertas a nivel avanzado
Cómo aprobar una entrevista de PHP: las mejores preguntas de nivel avanzado
|