2

Como están? estoy intentando refrescar un DIV que tiene datos traídos de una BD. Pero lo que pude hacer es únicamente refrescarlo por un tiempo, me gustaría solicitar ayuda (soy bastante nuevo) para refrescarlo cuando tenga un nuevo evento la BD. Si me pueden aconsejar como hacerlo. Este es mi código:

    <section id="caja">
    <div id="caja-central">
        <div>
            <?php include('.\Querys\userQuery.php') ?>
        </div>
    </div>
</section>

$(document).ready(function() {
var pageRefresh = 2000; //2 s
setInterval(function() {
refresh();
}, pageRefresh);
});

function refresh() {
$('#caja').load(location.href + " #caja");
}
14
  • 2
    Lo primero que debe quedar claro es el tipo de evento que necesitas. ¿Es unidireccional? Es decir, sólo el cliente escuchará cambios en el servidor, y no mandará de vuelta nada al servidor? En ese caso, necesitas un SSE (server-sent event). Si debe ser bidireccional, requerirás algo tipo WebSockets.
    – A. Cedano
    Commented el 25 nov. 2022 a las 13:28
  • claro es unidireccional Commented el 25 nov. 2022 a las 13:53
  • pregunta, soy novato con js y jquery... sera que podre pedir algun ejemplo de como hacerlo? Commented el 25 nov. 2022 a las 14:07
  • 2
    Aquí tienes un ejemplo completo que incluye el código que debes poner en tu archivo Javascript, así como el código que debes poner en el archivo PHP. Inténtalo y si hay algún problema nos dices.
    – A. Cedano
    Commented el 25 nov. 2022 a las 14:24
  • @A.Cedano Pues no conocía eso del SSE, y desde que lo has dicho que lo he estado probando y me daba un retardo de casi un minuto en las respuestas el ejemplo de esa web, pero al final lo he podido solucionar (era por culpa del php-fpm y encontré la solución en este enlace) y ahora funciona en tiempo real :-) Yo no me queria meter aun en websockets y te agradezco tu aporte pues me va a ir de fábula, es mucho más sencillo de usar, gracias.
    – masterguru
    Commented el 25 nov. 2022 a las 16:49

1 respuesta 1

2

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.