HTML SSE API
Los eventos enviados por el servidor (Server-Sent Events - SSE) permiten que una página web obtenga actualizaciones de un servidor.
Server-Sent Events — Mensajería unidireccional
Un evento enviado por el servidor es cuando una página web recibe automáticamente actualizaciones de un servidor.
Esto también era posible antes, pero la página web tendría que preguntar si había actualizaciones disponibles. Con los eventos enviados por el servidor, las actualizaciones llegan automáticamente.
Ejemplos: actualizaciones de Facebook/Twitter, actualizaciones de precios de acciones, fuentes de noticias, resultados deportivos, etc.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que admite totalmente los eventos enviados por el servidor.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Recibir notificaciones de eventos enviadas por el servidor
El objeto EventSource se utiliza para recibir notificaciones de eventos enviadas por el servidor:
Ejemplo
var source = new EventSource("demo_sse.html");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Inténtalo tú mismo »
Ejemplo explicado:
- Cree un nuevo objeto EventSource y especifique la URL de la página que envía las actualizaciones (en este ejemplo, "demo_sse.html")
- Cada vez que se recibe una actualización, se produce el evento onmessage
- Cuando ocurre un evento de mensaje, coloque los datos recibidos en el elemento con id="result"
Verifique el soporte de eventos enviados por el servidor
En el ejemplo anterior de tryit, había algunas líneas de código adicionales para verificar la compatibilidad del navegador con eventos enviados por el servidor:
if(typeof(EventSource) !== "undefined") {
// ¡Sí! ¡Soporte de eventos enviados por el servidor!
// Algún código.....
} else {
// ¡Lo siento! No hay soporte para eventos enviados por el servidor.
}
Ejemplo de código del lado del servidor
Para que el ejemplo anterior funcione, necesita un servidor capaz de enviar actualizaciones de datos (como PHP o ASP).
La sintaxis del flujo de eventos del lado del servidor es simple. Establezca el encabezado "Content-Type" en "text/event-stream". Ahora puedes empezar a enviar transmisiones de eventos.
Código en PHP (demo_sse.html):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: La hora del servidor es: {$time}\n\n";
flush();
?>
Código en ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: La hora del servidor es: " & now())
Response.Flush()
%>
Código explicado:
- Establezca el encabezado "Content-Type" en "text/event-stream"
- Especifique que la página no debe almacenarse en caché
- Envíe los datos a enviar (Siempre comience con "data: ")
- Vaciar los datos de salida a la página web
El objeto EventSource
En los ejemplos anteriores, utilizamos el evento onmessage para recibir mensajes. Pero también hay otros eventos disponibles:
| Eventos | Descripción |
|---|---|
| onopen | Cuando se abre una conexión al servidor |
| onmessage | Cuando se recibe un mensaje |
| onerror | Cuando ocurre un error |
