Server-Sent Events (SSE) permite que una página web obtenga actualizaciones de un servidor.
Server-Sent Events (SSE)
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.
Notificaciones recibidas
El objeto EventSource se utiliza para recibir notificaciones de eventos enviadas por el servidor.
Ejm
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML =
"Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>Ejemplo explicado
- Crea un nuevo objeto EventSource y especifica la URL de la página que envía las actualizaciones (en este ejemplo, «demo_sse.php«)
- Cada vez que se recibes una actualización, se produce el evento onmessage
- Cuando ocurre un evento onmessage, coloca los datos recibidos en el elemento con id=»result».
En el ejemplo de prueba anterior, había algunas líneas adicionales de código para comprobar la compatibilidad del navegador con los eventos enviados por el servidor.
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}Para que el ejemplo anterior funcione, necesitas 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-gype» en «text/event-stream». Ahora puedes comenzar a enviar flujos de eventos.
Código en PHP (demo_sse.php).
Código para 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 para ASP (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>Código explicado
- Establece el encabezado «Content-type» en «text/event-stream»
- Especifica que la página no debe almacenarse en caché
- Salida de los datos para enviar (siempre comienza con «data:»)
- Vacía los datos de salida de nuevo a la página web
El objeto EventSource
En los ejemplos anteriores, usamos el evento onmessage para obtener mensajes. Pero otros eventos también están disponibles:
| Eventos | Descripción |
|---|---|
| onopen | Cuando una conexión al servidor es abierta |
| onmessage | Cuando un mensaje es recibido |
| onerror | Cuando ocurre un error |