0

Estoy algo bloqueado en esto y me gustaría recibir una ayuda. Tengo una tabla MySQL con la siguiente información:

created users points
2018-08-01 13:00:00 anna 85.00
2018-08-01 11:23:00 alfred 35.00
2018-08-01 17:04:00 georgy 125.00
2018-08-01 19:30:00 linda 42.00
2018-08-01 08:35:00 alex 76.00
2018-08-01 10:29:00 john 94.00
2018-08-01 15:27:00 hugo 75.30

Quiero obtener la diferencia en minutos entre la fecha actual y la columna start_session para cada fila en una tabla HTML, así que mi código es el siguiente:

<table class="table">
<tr><td><b>Minutes</b></td><td><b>User - Points</b></td></tr>
<?php
  $sql = "SELECT * FROM users";
  $res = mysql_query($sql);

  $date = date(Y-m-d H:i:s);

  if(mysql_num_rows($res)>0){
    while($row = mysql_fetch_array($res){
    $start_session = $row['created'];

      $start_date = new DateTime($start_session);
      $since_start = $start_date->diff(new DateTime($date));
      $minutes = $since_start->days * 24 * 60;
      $minutes += $since_start->h * 60;
      $minutes += $since_start->i;
 ?>
 <tr>
  <td>
      <?php echo $minutes." min"; ?>
  </td>
  <td>
      <?php echo $row['users']." - ".$row['points']." points"; ?>
  </td>
 </tr>
<?php
  }
 }
?>         
</table>

Hasta aquí está funcionando bien, pero necesito actualizar la página para actualizar a su vez la cantidad de minutos transcurridos y yo deseo que esto sea en tiempo real, se que AJAX puede ser una opción junto con SetInterval pero sólo quiero actualizar la columna de los minutos y no volver a escribir toda la tabla con la información. ¿Cómo lo puedo resolver?

Agradeceré su respuesta.

10
  • Creo que lo mas fácil y sencillo que puedes hacer, es convertir las dos fechas a timestamp y restar la diferencia, después que tengas los segundos los divides entre 60, para obtener los minutos de diferencia que hay entre las dos fechas. seria asi, convertir timestamp -> obtener diferencia -> convertir segundos a minutos Commented el 2 ago. 2018 a las 16:23
  • @DarckBlezzer Gracias por tu respuesta, pero lo que necesito es que se actualice esa cantidad en tiempo real y no tener que estar actualizando la página
    – NekoLopez
    Commented el 2 ago. 2018 a las 16:25
  • En ajax no existe tiempo real, puedes usar setInterval para actualizar cada momento recomiendo cada minuto, hay otras alternativas como, por ejemplo, supongamos que cada vez que entra el cliente, se obtiene la fecha inicial y con un javascript cada segundo ir sacando la diferencia de tiempo, apartir de la fecha inicial, el php solo debe retornar los datos iniciales, pero javascript debe hacer las operaciones, esto también para que no te consuma recursos del servidor y usar los recursos del cliente(navegador) Commented el 2 ago. 2018 a las 16:29
  • Haciendo lo anterior si se agrega un nuevo usuario, no se podría mostrar, a menos que tengas otro setInterval para actualizar cada minuto, así tendría algo sencillo. también puedes usar websocket, para que cuando un cliente se registre, se actualice esa vista de todos los clientes conectados. Commented el 2 ago. 2018 a las 16:31
  • @DarckBlezzer Gracias por tu respuesta pero eso no es lo que quiero, sólo quiero que mientras pasen las horas esos minutos se actualicen automáticamente y no tenga que actualizar la página
    – NekoLopez
    Commented el 2 ago. 2018 a las 17:48

1 respuesta 1

1

podes marcar el TD con la fecha de creación en formato timeStamp y luego hacer los cáculos necesarios cada N segundos con un intervalo javascript.

<table class="table">
<tr><td><b>Minutes</b></td><td><b>User - Points</b></td></tr>
<?php

  $sql = "SELECT * FROM users";
  $res = mysql_query($sql);

  $date = date("Y-m-d H:i:s");
  if(mysql_num_rows($res)>0){
    while(mysql_fetch_array($res){
      $start_session = $row['start_session'];

      $start_date = new DateTime($start_session);
      $since_start = $start_date->diff(new DateTime($date));
      $minutes = $since_start->days * 24 * 60;
      $minutes += $since_start->h * 60;
      $minutes += $since_start->i;

 ?>
 <tr>
  <td class="minutos" data-creation="<?php echo $start_date->getTimestamp();?>">
      <?php echo $minutes." min"; ?>
  </td>
  <td>
      <?php echo $row['users']." - ".$row['points']." points"; ?>
  </td>
 </tr>
<?php
  }
 }
?>
</table>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var losTiempos = [...document.getElementsByClassName("minutos")];
  var actualizaTiempos = function() {
    losTiempos.forEach(function(element) {
      var creation = element.getAttribute('data-creation');
      var timeStamp = ~~(Date.now() / 1000);
      var timeDiff  = Math.abs(timeStamp - creation);
      var minutosDiff = Math.floor(timeDiff / 60);
      element.innerText =  minutosDiff + " mins" ;
      //console.log(creation, timeDiff, minutosDiff + " min " );
    });
  };
  var intervalID = setInterval(actualizaTiempos, 1000 * 60);
});

</script>

una muestra con datos estáticos:

document.addEventListener('DOMContentLoaded', function() {
  var losTiempos = [...document.getElementsByClassName("minutos")];
  var actualizaTiempos = function() {
    losTiempos.forEach(function(element) {
      var creation = element.getAttribute('data-creation');
      var timeStamp = ~~(Date.now() / 1000);
      var timeDiff = Math.abs(timeStamp - creation);
      var minutosDiff = Math.floor(timeDiff / 60);
      element.innerText = minutosDiff + " min ";
      //console.log(creation, timeDiff, minutosDiff + " mins" );
    });
  };
  actualizaTiempos();
  var intervalID = setInterval(actualizaTiempos, 1000 * 30);
});
td {padding:5px; border-right: 1px red solid}
<table class="table">
  <tr>
    <td><b>Minutes</b></td>
    <td><b>User - Points</b></td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533139200">1948 min </td>
    <td>anna - 85.00 points</td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533133380">2045 min </td>
    <td>alfred - 35.00 points</td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533153840">1704 min </td>
    <td>georgy - 125.00 points</td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533162600">1558 min </td>
    <td>linda - 42.00 points</td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533123300">2213 min </td>
    <td>alex - 76.00 points</td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533130140">2099 min </td>
    <td>john - 94.00 points </td>
  </tr>
  <tr>
    <td class="minutos" data-creation="1533148020">1801 min </td>
    <td>hugo - 75.30 points </td>
  </tr>
</table>

4
  • Muchas gracias por tu respuesta! Funciona genial, sólo una consulta, estoy revisando tu código y me gustaría que me expliques el significado de la línea document.addEventListener('DOMContentLoaded', function() { y también el porqué poner el array con puntos suspensivos al inicio en la variable losTiempos y la variable timeStamp con este símbolo ~~(
    – NekoLopez
    Commented el 3 ago. 2018 a las 15:47
  • 1
    La primer línea es equivalente al jQuery(document).ready, los tres puntitos es el operador de propagación, que usado entre corchetes [...] transforma la lista de getElementsByClassName a un array para poder hacer un foreach. El ~~ es un doble NOT binario para convertir de float a integer, en un tiempo era más rápido que el Math.floor hoy creo que es lo mismo (habría que correr algunos tests). Commented el 3 ago. 2018 a las 17:34
  • Genial, y qué pasaría si las filas y celdas vengan de una respuesta AJAX? Lo he intentado usar en ese caso y no está funcionando, habría algo que añadir?
    – NekoLopez
    Commented el 3 ago. 2018 a las 22:46
  • mientras mantengan el formato y estructura debería tomarlo, pero sin verlo no sabría decirte Commented el 3 ago. 2018 a las 22:47

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.