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 información en tiempo real, según 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, que hemos comentado 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. Podríamos haber utilizado otras técnicas como poner en la cabecera del http la orden para que no se guarde en la caché, pero por mi experiencia, esta es la única manera que nos asegura que todos los navegadores van a recargar la página solicitándola siempre al servidor.

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.

miFecha = new Date()
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("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.

Esto es todo. Se puede ver el ejemplo en marcha en este enlace.