En algunas ocasiones necesitamos que una página recargue sus contenidos cada cierto tiempo, para mostrar información actualizada a las personas que la visitan. Esto es a veces típico de los servicios que muestran datos en tiempo real, es decir, información que va actualizándose cada poco y que queremos mostrar siempre en el instante en el que se va produciendo.

Este artículo surge como respuesta a la duda de un visitante que, además, necesitaba que el tiempo que pasase entre cada recarga de la página fuera siempre distinto. Para ello simplemente hacemos que se recargue la página después de un número de segundos aleatorio.

Un tema que además es necesario para que todo funcione correctamente es que la página no se muestre desde la caché del navegador. Sabemos que cuando una página ya se ha solicitado previamente, se queda muchas veces en la caché de nuestros navegadores de modo que, si se vuelve a solicitar, se muestre la copia que tenemos almacenada localmente, en lugar de solicitarse y descargarse desde el servidor de Internet. En estos sistemas de recarga hay que asegurarse que los contenidos no se obtengan desde la caché, para que las actualizaciones se puedan ver correctamente con cada recarga de la página.

La recarga con Javascript

Veamos cómo hemos resuelto todas estas necesidades, en este caso mediante Javascript.

Para empezar, tenemos que obtener un numero aleatorio de segundos, para que la recarga se realice a intervalos irregulares, tal como nos solicitaban.

Para ello vamos a utilizar la siguiente función de cálculo de números aleatorios con Javascript, que hemos explicado y probado en otros ejemplos relatados en DesarrolloWeb.com.

function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
   aleat = Math.random() * numPosibilidades
   aleat = Math.floor(aleat)
   return parseInt(inferior) + aleat
}

Llamaremos a la función para obtener un número aleatorio, en este caso entre 5 y 10:

num_aleatorio = aleatorio(5, 10)

Para solucionar el tema de que la página no se muestre desde la caché del navegador vamos a enviarle un parámetro por la URL, así la URL que solicitemos será siempre distinta y nuestro navegador se verá obligado a solicitar la página al servidor cada vez que se recargue.

Voy a generar un string para enviarlo por parámetro a esta misma página. Como decíamos, el parámetro lo pasaremos por URL. No haremos nada con ese dato, pero como cada vez será distinto, nos asegura que el navegador siempre solicitará al servidor la página, en vez de mostrar otra vez la que tiene en caché. Utilizaremos la fecha y tiempo para generar el dato que cambie siempre.

let miFecha = new Date();
let dato_url = miFecha.getYear().toString() + miFecha.getMonth().toString() + miFecha.getDate().toString() + miFecha.getHours().toString() + miFecha.getMinutes().toString() + miFecha.getSeconds().toString();

En la variable dato_url guardamos el año, seguido del mes, dia, horas, minutos y segundos. Como todos los datos de fecha, se tienen que extraer desde un objeto date, que creamos con la sentencia new Date(). Luego a este objeto le invocamos diversos métodos para obtener los datos que necesitamos. Los datos se nos devuelven en tipo entero y para concatenarlos como si fueran string, necesitamos aplicarles el método toString(), que tienen todos los objetos de Javascript para convertirlos en cadenas.

Ya sólo queda realizar la recarga propiamente dicha. Para ello tenemos que aplicar un retardo, que conseguiremos con la función setTimeout(), que recibe como primer parámetro la instrucción que se quiere ejecutar y como segundo parámetro, el tiempo en milisegundos que se quiere esperar.

setTimeout( function() {
    window.location = 'pagina.html?parametro=" + dato_url;
    }, num_aleatorio * 1000);

Si nos fijamos, hemos utilizado window.location para asignar una nueva URL al navegador. Luego hemos utilizado la variable dato_url para pasarla como parámetro. Además, para marcar el retardo entre recargas hemos utilizado la variable num_aleatorio, multiplicada por 1000 para pasar a milisegundos.

Recarga con un número de segundos que no sea aleatorio

Por si a alguien le molesta que el número de segundos sea aleatorio, simplemente tendría que quitar la variable num_aleatorio y poner cualquier valor en segundos. Por supuesto, la función que calcula aleatorios y su invocación tampoco serían necesarias.

setTimeout("window.location='pagina.html?parametro=" + dato_url + "'", 3 * 1000);

El código completo de una página que realiza este efecto de recarga se puede ver a continuación.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recargar constantemente cada cierto tiempo</title>
</head>
<body>
  
  <h1>Recargando la página constantemente</h1>
  <script>document.write('Página recargada en este instante: ' + new Date().toString())</script>

  <script>
    let segundos_recarga = 3;
    let miFecha = new Date();
    let dato_url = miFecha.getYear().toString() + miFecha.getMonth().toString() + miFecha.getDate().toString() + miFecha.getHours().toString() + miFecha.getMinutes().toString() + miFecha.getSeconds().toString();
    setTimeout( function() {
      window.location = `recarga-constante.html?parametro=${dato_url}`;
    }, segundos_recarga * 1000);
  </script>
</body>
</html>