¿Para qué se introdujeron los eventos server-sent en HTML5?

Para implementar un canal de comunicación unidireccional entre el servidor y el cliente. El servidor puede enviar datos al cliente en cualquier momento después de establecer la conexión.

Características y ventajas clave:

• Eficiencia: Se utiliza una conexión HTTP normal, minimizando los costos en comparación con el sondeo.
• Simplicidad: La API de eventos enviados por el servidor (SSE) es más sencilla de usar que WebSockets para comunicación unidireccional.
• Reconexión automática: El navegador intenta reconectarse automáticamente si la conexión se interrumpe.
• Soporte de tipos de datos: Se admite el envío de datos de texto en formato text/event-stream.
• Compatibilidad con navegadores: Ampliamente soportado por navegadores modernos.

Aplicaciones:

• Actualización en tiempo real de feeds de noticias.
• Notificaciones de eventos (por ejemplo, nuevos mensajes).
• Monitoreo de datos en tiempo real (por ejemplo, cotizaciones bursátiles).
• Progreso de tareas prolongadas.

Esta es una alternativa al sondeo tradicional, donde el cliente solicita periódicamente al servidor si hay actualizaciones. A diferencia de WebSockets, SSE es unidireccional, lo que simplifica su uso cuando los datos solo se transmiten del servidor al cliente.

Ejemplo en el lado del cliente (JavaScript):

const eventSource = new EventSource('/events'); // URL para recibir eventos del servidor

eventSource.onmessage = function(event) {
  // Procesamiento de los datos recibidos
  console.log('Mensaje recibido:', event.data);
};

eventSource.onerror = function(error) {
  // Manejo de errores de conexión
  console.error('Error en Server-Sent Events:', error);
};

eventSource.addEventListener('customEvent', function(event) {
  // Procesamiento de evento personalizado de tipo 'customEvent'
  console.log('Evento personalizado recibido:', event.data);
});

Ejemplo del formato de datos en el lado del servidor:

event: customEvent
data: {"message": "¡Hola!"}

data: Mensaje de texto simple

id: 123 // Identificador del evento, usado para reconexión automática

retry: 5000 // Retardo antes de la próxima reconexión en milisegundos