HTML Sse API

---

Server-Sent Event (SSE) permiten que una página web reciba actualizaciones de un servidor.

---

Server Sent Events mensaje unidireccional

Un server-side event es cuando una página web recibe automáticamente actualizaciones de un servidor.

Esto ya era posible antes, pero la página web tenía que preguntar si había actualizaciones disponibles o no. Con server-side event, las actualizaciones llegan automáticamente.

Ejemplo: actualizaciones de Facebook, Twitter, actualizaciones de stock de precios, resultados deportivos, etc.

---

Compatibilidad con el navegador

El número en la siguiente tabla, especifica la primera versión del navegador que fue completamente compatible con server-side event:

---

Recibir notificaciones

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

Ejemplo explicado:

• Crea un nuevo objeto EventSource y especifica la URL de la página que envía las actualizaciones (ejemplo “demo_sse.php”)

• Cada vez que se recibe una actualización, ocurre el evento onmessage

• Cuando ocurre el evento onmessage, coloca los datos recibidos en el elemento con el id="result"

---

Revisa la compatibilidad

En el ejemplo anterior, había algunas líneas adicionales de código para comprobar la compatibilidad del navegador con server-side event:

Ejemplo:

if(typeof(EventSource) !== "undefined") {
  // Si! Compatible con Server-sent events!
  // Algo de código...
} else {
  // Lo siento! No es compatible con server-sent events..
}

---

Código de ejemplo

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-type:" a "text/event-stream". Ahora puedes comenzar a enviar flujos de eventos.

Ejemplo 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();
?>

Ejemplo ASP(VB)

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

Código explicado:

• Establezca el encabezado Content-type: a text/event-stream

• Especifique que la página no debe almacenarse en cache

• Salida de datos a enviar (siempre comience con data:)

• Vaciar los datos de salida de nuevo a la página web

---

El objetov EventSource

En los ejemplos anteriores, usamos el evento onmessage para obtener mensajes. Pero existen otros eventos disponibles:

---

Resumen

Server-Sent Event (SSE) permite que una página web reciba actualizaciones de un servidor sin necesidad de preguntar si hay actualizaciones disponibles. El objeto EventSource se utiliza para recibir notificaciones de eventos enviados por el servidor. También se presenta un ejemplo de código en PHP y ASP para enviar flujos de eventos. El objeto EventSource tiene otros eventos disponibles, como onopen, onmessage y onerror.

---

Traducido con 💚 desde W3Schools.com