Eventos Server-Sent de HTML

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

Eventos Server-Sent - Mensajería de Un Solo Dirección

Los eventos Server-Sent son eventos que permiten que una página web obtenga actualizaciones automáticamente del servidor.

También se podía hacer esto antes, siempre y cuando el sitio web tuviera que preguntar si había actualizaciones disponibles. Con 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 completamente los eventos server-sent.

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 personal

Ejemplo de explicación:

  • Crear un nuevo objeto EventSource y especificar la URL de la página que envía las 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 la transmisión de eventos del servidor:

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

Ejemplo de código del lado del servidor

Para que el ejemplo anterior funcione, necesita un servidor capaz de 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"
  • Especificar que no se cachee la página
  • 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 mensajes. Sin embargo, también se pueden utilizar otros eventos:

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