Eventos Server-Sent de HTML

Los eventos Server-Sent permiten que la página web obtenga actualizaciones del servidor.

Eventos Server-Sent - Mensajería de un solo sentido

Los eventos Server-Sent son eventos en los que la página web obtiene actualizaciones automáticamente del servidor.

Anteriormente también se podía lograr esto, siempre y cuando el sitio web tuviera que preguntar si había actualizaciones disponibles. A través de eventos Server-Sent, las actualizaciones pueden llegar automáticamente.

Por ejemplo: actualizaciones de Facebook/Twitter, actualizaciones de precios de acciones, nuevos artículos, resultados de eventos, etc.

Compatibilidad del navegador

Los números en la tabla indican el primer navegador que admite eventos server-sent de manera completa.

API
SSE 6.0 No admite 6.0 5.0 11.5

Recibir notificaciones de eventos Server-Sent

El objeto EventSource se utiliza para recibir notificaciones de eventos enviados por el servidor:

Ejemplo

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Prueba por tu cuenta

Ejemplo de explicación:

  • Crear un nuevo objeto EventSource y especificar la URL de la página que envía actualizaciones (en este ejemplo, "demo_sse.php")
  • Cada vez que se recibe una actualización, se produce el evento onmessage
  • Cuando ocurre el evento onmessage, se empuja los datos recibidos al elemento con id "result"

Detectar compatibilidad con eventos Server-Sent

En el ejemplo de TIY, escribimos un código adicional para detectar la compatibilidad del navegador con eventos de envío de servidor:

if(typeof(EventSource) !== "undefined") {
    // Sí! Admite eventos de envío de servidor!
    // Algunos códigos.....
} else {
    // Lo siento! No se admite eventos de envío de servidor!
}

Ejemplo de código del lado del servidor

Para que el ejemplo anterior funcione, necesitas un servidor que pueda enviar actualizaciones de datos (por ejemplo, PHP o ASP).

La sintaxis del flujo de eventos del lado del servidor es muy simple. Establezca el encabezado "Content-Type" en "text/event-stream". Ahora, puede comenzar a enviar el flujo de eventos.

Código en PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Código en ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Explicación del código:

  • Establecer el encabezado "Content-Type" en "text/event-stream"
  • No almacenar la página en caché
  • Especificar la fecha a enviar (siempre comienza con "data: ")
  • Enviar datos de actualización de página web

Objeto EventSource

En el ejemplo anterior, utilizamos el evento onmessage para obtener el mensaje. Sin embargo, también se pueden utilizar otros eventos:

Evento Descripción
onopen Cuando se abre la conexión al servidor
onmessage Cuando se recibe un mensaje
onerror Cuando ocurre un error