API SSE de HTML
Los eventos enviados por el servidor (SSE) permiten que una página web obtenga actualizaciones de un servidor.
Eventos enviados por el servidor - 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.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con 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.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
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.php")
- Cada vez que se recibe una actualización, se produce el evento onmessage
- Cuando ocurre un evento onmessage, coloque los datos recibidos en el elemento con id="result"
Compruebe el soporte de eventos enviados por el servidor
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..
}
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 "Tipo de contenido" en "texto/flujo de eventos". Ahora puede comenzar a enviar flujos 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()
%>
Código explicado:
- Establezca el encabezado "Tipo de contenido" en "texto/flujo de eventos"
- Especificar que la página no debe almacenarse en caché
- Salida de los datos para enviar ( siempre comience con "datos:")
- Vaciar 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:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |