HTML5 Eventos enviados por el servidor (Server-Sent Events)

Los eventos enviados por el servidor (server-sent events) de HTML5 permiten que las páginas web obtengan actualizaciones del servidor.

Eventos Server-Sent: mensajería unidireccional

Los eventos Server-Sent se refieren a que la página web obtiene automáticamente actualizaciones del servidor.

Antes también era posible hacer esto, pero la página web tenía que preguntar si había actualizaciones disponibles. Con los eventos enviados por el servidor, las actualizaciones pueden llegar automáticamente.

Ejemplos: actualizaciones de Facebook/Twitter, actualizaciones de precios de acciones, nuevas publicaciones de blog, resultados de eventos deportivos, etc.

Compatibilidad del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Todos los navegadores principales admiten eventos enviados por el servidor, excepto Internet Explorer.

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>"; };

Pruébalo »

Análisis del ejemplo:

  • Crea un nuevo objeto EventSource y luego especifica 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, ocurre el evento onmessage
  • Cuando ocurre el evento onmessage, inserta los datos recibidos en el elemento con id "result"

Detectar soporte de eventos Server-Sent

En el siguiente ejemplo, escribimos código adicional para detectar la compatibilidad del navegador con los eventos enviados por el servidor:

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

Ejemplo de código del lado del servidor

Para que el ejemplo anterior funcione, también necesita un servidor que pueda enviar actualizaciones de datos (como PHP y ASP).

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

Ejemplo

<?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 ASP (VB) (demo_sse.asp):

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

Explicación del código:

  • Establezca el encabezado "Content-Type" como "text/event-stream"
  • Especifica que la página no se almacene en caché
  • Envía la fecha de envío (siempre comienza con "data: ")
  • Envía los datos de salida a la página web

Objeto EventSource

En el ejemplo anterior, usamos el evento onmessage para obtener mensajes. Sin embargo, también se pueden usar otros eventos:

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