1

Indagando por la web, me encontré con un articulo, donde muestra un ejemplo de como mostrar el tiempo de un post, similar a facebook.

El código funciona perfectamente, al ejecutarlo.

 <?php  
 date_default_timezone_set('America/New_York');  
 echo facebook_time_ago('2016-03-11 04:58:00');  
 function facebook_time_ago($timestamp)  
 {  
      $time_ago = strtotime($timestamp);  
      $current_time = time();  
      $time_difference = $current_time - $time_ago;  
      $seconds = $time_difference;  
      $minutes      = round($seconds / 60 );           // value 60 is seconds  
      $hours           = round($seconds / 3600);           //value 3600 is 60 minutes * 60 sec  
      $days          = round($seconds / 86400);          //86400 = 24 * 60 * 60;  
      $weeks          = round($seconds / 604800);          // 7*24*60*60;  
      $months          = round($seconds / 2629440);     //((365+365+365+365+366)/5/12)*24*60*60  
      $years          = round($seconds / 31553280);     //(365+365+365+365+366)/5 * 24 * 60 * 60  
      if($seconds <= 60)  
      {  
     return "Just Now";  
   }  
      else if($minutes <=60)  
      {  
     if($minutes==1)  
           {  
       return "one minute ago";  
     }  
     else  
           {  
       return "$minutes minutes ago";  
     }  
   }  
      else if($hours <=24)  
      {  
     if($hours==1)  
           {  
       return "an hour ago";  
     }  
           else  
           {  
       return "$hours hrs ago";  
     }  
   }  
      else if($days <= 7)  
      {  
     if($days==1)  
           {  
       return "yesterday";  
     }  
           else  
           {  
       return "$days days ago";  
     }  
   }  
      else if($weeks <= 4.3) //4.3 == 52/12  
      {  
     if($weeks==1)  
           {  
       return "a week ago";  
     }  
           else  
           {  
       return "$weeks weeks ago";  
     }  
   }  
       else if($months <=12)  
      {  
     if($months==1)  
           {  
       return "a month ago";  
     }  
           else  
           {  
       return "$months months ago";  
     }  
   }  
      else  
      {  
     if($years==1)  
           {  
       return "one year ago";  
     }  
           else  
           {  
       return "$years years ago";  
     }  
   }  
 }  
 ?>

Se muestra correctamente el tiempo

<li><a href="#"><i class="fa fa-clock-o"></i>'.facebook_time_ago($data_time).'</a></li>

El problema está en que tengo que actualizar la página para ver el tiempo transcurrido del post.

¿Cómo puedo mostrar el tiempo real del mismo sin tener que actualizar la página, así como lo emplea stackoveflow o facebook?

4
  • Podrías utilizar Ajax para ir refrescando cada cierto tiempo. el 5 jul. 2018 a las 11:14
  • No uses PHP y/o AJAX para esto, usa JavaScript todo del lado del cliente. Si conviertes esta función a JavaScript (algo relativamente sencillo), podrás llamarla cada X tiempo y que se actualice el valor del tiempo sin recargar la página. De hecho, a no ser que lo hayan cambiado, así es como lo hacía Facebook: un data-elemento con la fecha en formato yyyy-mm-dd hh:mm:ss y un script JS para calcular la fecha cada cierto tiempo.
    – Alvaro Montoro
    el 5 jul. 2018 a las 11:58
  • Obvio que lo mejor es usar javascript para esto, si sabes el tiempo inicial cada x tiempo puedes ir calculando ese mismo tiempo. el 5 jul. 2018 a las 12:14
  • @So12 deberías tener todas tus fechas en UTC (o una zona horario precisa) para evitar problemas
    – Alvaro Montoro
    el 5 jul. 2018 a las 12:55

2 respuestas 2

1

Como te ponía en un comentario, no uses PHP para eso, usa JavaScript para poder actualizar los valores desde el lado del cliente sin necesidad de recargar la página o hacer llamadas al servidor con AJAX.

La idea sería poner la fecha del post en un data-atributo (con un formato fácil de leer con Javascript como por ejemplo YYYY-MM-DD HH:mm:SS" y cada cierto tiempo actualizar el valor. Así es como lo hacía antes Facebook (y parece que aún lo sigue haciendo) y también parece que Stack Overflow usa un sistema parecido.

Podrías adaptar la función que ya tienes en PHP y transformarla a JavaScript, depués llamarla cada 30 segundos (por ejemplo) para que se actualice el valor del tiempo. Algo como esto:

Nota: es importante que todas las fechas estén en una misma franja horaria. En este caso, he usado UTC (hora zulu, por eso las horas tienen una Z al final). De ese modo no vas a tener problemas de diferentes horas en el cliente.

En JavaScript puedes trabajar fácilmente con horas en UTC añadiendo UTC después del get. Por ejemplo, Date.getHours() va a devolver la hora local del cliente, mientras que Date.getUTCHours() va a devolver la hora del cliente pero en UTC (con la diferencia horaria ya calculada). En PHP puedes usar gmdate o date_default_timezone_set (que ya usabas) para asegurarte de que tus horas van a estar en UTC.

// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 610000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2600000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else if (seconds < 32000000) {
    return "hace " + (Math.ceil(seconds / 2592000)) + " meses";
  } else if (seconds < 95000000) {
    return "hace " + (Math.ceil(seconds / 31536000)) + " años";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + dpost.getFullYear();
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 15 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 15000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 13:30:00Z"></div>
<div data-timepost="2018-07-05 13:15:00Z"></div>
<div data-timepost="2018-07-05 13:00:00Z"></div>
<div data-timepost="2018-07-05 12:30:00Z"></div>
<div data-timepost="2018-07-04 07:00:00Z"></div>
<div data-timepost="2018-06-25 12:00:00Z"></div>
<div data-timepost="2018-03-25 12:00:00Z"></div>
<div data-timepost="2017-04-25 12:00:00Z"></div>
<div data-timepost="2012-06-25 12:00:00Z"></div>

6
  • Si uso JavaScript, tomara en cuenta el tiempo que tiene su ordenador o me equivoco y si este tiene la fecha mal o la hora, como se manejaría el tiempo al ser de lado del cliente?
    – So12
    el 5 jul. 2018 a las 12:55
  • @So12 Tienes al menos dos opciones: operar siempre en horas UTC (o una franja horaria conocida), y otra sería tener siempre las fechas con la hora del servidor y pasar la hora del servidor como variable a JavaScript (que se utilizará como el dnow en el código de arriba).
    – Alvaro Montoro
    el 5 jul. 2018 a las 12:57
  • @So12 si te fijas, en el date-timepost he puesto la hora con una Z al final, eso es para indicar que la fecha va a estar en hora zulu o UTC.
    – Alvaro Montoro
    el 5 jul. 2018 a las 13:01
  • @So12 he añadido una nota sobre cómo se tratan las horas en UTC, y cómo puedes usar funciones específicas para UTC en JavaScript y PHP. Espero que te sirva.
    – Alvaro Montoro
    el 5 jul. 2018 a las 13:13
  • gracias por las recomendaciones, una pregunta la función en javascript que has publicado también esta en años, es decir publicación hace 2 años por ejemplo.
    – So12
    el 5 jul. 2018 a las 13:25
1

Dado que el código está en PHP, lo más sencillo sería usar Ajax.

En otras palabras, en cierto intervalo de tiempo haces una petición al servidor para que te devuelva los tiempos, y cuando lleguen, lo muestras.

Para los intervalos puedes usar setInterval, y definir cada cuanto tiempo debería realizarse una petición al servidor para actualizar los tiempos.

La llamada Ajax (Javascript asíncrono) hará una petición GET o POST al script PHP que le indiques. Digamos que tu script se llama tiempo.php, pues haces una petición GET asíncrona a este que te devolverá el tiempo en texto plano, por ejemplo.

// Ejemplo Tomado de W3Schools
function loadDoc() {
  console.log("Haciendo petición");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     // Si la respuesta del servidor es correcta, se cambia el texto
     document.getElementById("tiempo").innerHTML = this.responseText;
    }
    else
    {
      // Si no es correcta, lanzamos error.
      alert("Error " + this.status);
    }
  };
  xhttp.open("GET", "tiempo.php", true);
  xhttp.send(); // Puedes añadir parámetros a send()
}

window.setInterval(loadDoc,2000);
<li><a href="#" ><i class="fa fa-clock-o"></i><span id='tiempo'>***Tiempo***</span></a></li>

La respuesta echo del servidor será la que puedas mostrar en el objeto HTML de listado.

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.