En Javascript existen los Eventos Enviados por el Servidor (SSE por sus siglas en ingles: Server-Sent Events). Son eventos unidireccionales, es decir, el servidor los emite, el cliente los recibe y decide qué hacer con esos datos, pero el servidor no recibe nada de vuelta desde el cliente (para comunicaciones bidireccionales puedes usar WebSockets).
El uso de SSE es muy simple.
En el cliente
En primer lugar, olvídate de Ajax... estamos pasando a otro universo.
Desde el cliente, necesitas crear un objeto EventSource
, pasando como parámetro el archivo de servidor que va a generar actividad allí:
var evtSource = new EventSource("ssedemo.php");
Y luego añadir un listener para saber cuándo hay mensajes:
evtSource.onmessage = function(e) {
/*
Aquí lo que vayas a hacer con e
que será lo que el servidor haya emitido
y eso puede ser un json, texto, lo que sea
*/
}
También puedes escuchar eventos, usando addEventListener()
. Esto te permitirá por ejemplo hacer cosas distintas según el nombre del evento ocurrido en el servidor (ver el apartado eventos nombrados en la documentación):
//En el servidor habrás debido poner: echo "event: ping\n";
evtSource.addEventListener("ping", function(e) {
var obj = JSON.parse(e.data);
//Usar obj
}, false);
En el servidor
Un archivo que genere actividad, en el ejemplo lo hemos llamado ssedemo.php
y asumimos que está en la misma carpeta que el archivo donde está el código del cliente. Que quede claro: debes usar dos archivos distintos, no mezclar todo en el mismo archivo.
La forma en que esa actividad se genere no viene al caso aquí. Puede ser lanzada por un cron, por un disparador de eventos de la bd o lo que sea. Lo cierto es que cuando algo cambie en ese archivo, el cliente lo va a recibir.
Tomando el mismo ejemplo de la documentación, el código quedaría así:
Ejemplo
A. En el archivo del cliente
Vamos a tener un elemento ul
con su id, y le iremos agregando un li
en cada evento. Lo pararemos al llegar a diez eventos.
<ul id="eventList"></ul>
<script>
var eventList=document.getElementById('eventList');
var evtSource = new EventSource("ssedemo.php");
var evtCount=0;
evtSource.onmessage = function(e) {
evtCount++;
var newElement = document.createElement("li");
newElement.textContent = `message: ${evtCount} ${e.data}`;
if (evtCount==10){
evtSource.close();
newElement.textContent = `close: ${evtCount} ${e.data}`;
}
eventList.appendChild(newElement);
}
</script>
B. En el archivo del servidor (ssedemo.php
)
Es el mismo código del ejemplo de la documentación. Genera mensajes cada X tiempo. Nótese el encabezado: Content-Type: text/event-stream
. Puedes hacer un uso más avanzado, como emitir eventos nombrados, etc (consultar la documentación al respecto).
date_default_timezone_set("America/New_York");
header("Content-Type: text/event-stream\n\n");
$counter = rand(1, 10);
while (1) {
// Every second, sent a "ping" event.
echo "event: ping\n";
$curDate = date(DATE_ISO8601);
echo 'data: {"time": "' . $curDate . '"}';
echo "\n\n";
// Send a simple message at random intervals.
$counter--;
if (!$counter) {
echo 'data: This is a message at time ' . $curDate . "\n\n";
$counter = rand(1, 10);
}
ob_flush();
flush();
sleep(1);
}
En el archivo del cliente (A) deberás ver los li
que se irán agregando al elemento ul
, algo así:
message: 1 This is a message at time 2022-11-25T19:31:30-0500
message: 2 This is a message at time 2022-11-25T19:31:40-0500
message: 3 This is a message at time 2022-11-25T19:31:48-0500
message: 4 This is a message at time 2022-11-25T19:31:54-0500
message: 5 This is a message at time 2022-11-25T19:32:01-0500
message: 6 This is a message at time 2022-11-25T19:32:04-0500
message: 7 This is a message at time 2022-11-25T19:32:08-0500
message: 8 This is a message at time 2022-11-25T19:32:11-0500
message: 9 This is a message at time 2022-11-25T19:32:20-0500
close: 10 This is a message at time 2022-11-25T19:32:27-0500