Cómo mostrar progreso de procesamiento en un entorno Web

Inicio / Cómo hacer para... / Cómo mostrar progreso de procesamiento en un entorno Web

Cuando se requiere tratar con un proceso largo se presenta un problema. Existen varias alternativas (algunas las discutíamos acá).

Idependientemente de cuál sea la estrategia elegida, el objetivo es siempre el mismo: evitar que el visitante se aburra (o piense que la aplicación se colgó o algo parecido).

 

Algo que hasta hace un tiempo era impensable (o al menos muy poco práctico) era la posibilidad de ir mostrando progreso a medida que el procesamiento avanza.

El truco se compone de tres partes:

  1. El front end
  2. El script del lado del servidor que ejecuta el proceso
  3. El script que reporta el progreso obtenido hasta el momento

Del lado del frontend se usa Ajax (y probablemente jQuery o algún otro framework JavaScript) para disparar la acción, algo como:

<input type="button" id="trigger" />
<div id="progreso" style="visibility: hidden">
  <p id="mensaje"></p>
</div>
<script type="text/javascript">
$('#trigger').click(function(){
 $.post(
  'iniciarProceso.php',
  {
    param: value
  },
  function( data ) {
   $('#mensaje').text('Proceso iniciado...');
   $('#progreso').show();
  }
 );
})
</script>

Con esto hemos logrado que el proceso se inicie (y que al visitante se le muestre un mensaje indicador).

Para completar nuestro cometido necesitamos contar con algún mecanismo que consulte periódicamente en qué estado está el proceso (lo que se conoce como polling) y un servicio (del lado del servidor) que pueda brindar la información requerida:

Del lado del cliente será algo como:

<script type="text/javascript">
function pollServer()
{
 $.get(
  'processStatus.php',
  {
    param: value
  },
  function( data ) {
   $('#mensaje').text( 'Porcentaje de avance: ' + data.percent );
  } 
 );
}

setTimeOut( pollServer, 2000 );
</script>

Con este código se está solicitando una actualización de progreso al servidor cada 2 segundos (y mostrando el resultado al usuario).

Veamos ahora cómo debería ser el código de processStatus.php:

<?php
header('Content-Type: text/javascript');
$percent = calculateProgress(); // Probablemente esto consultara a la BD o a algun otro registro de progreso

echo json_encode($percent);
?>

La clave de este sencillo proceso es la definición del header (De modo que el cliente entienda que recibe datos en un formato compatible con el request realizado vía Ajax).

Obviamente, se pueden hacer implementaciones mucho más vistosas (Por ejemplo usando Bootstrap o mostrando imágenes en lugar de mensajes) pero la base de este mecanismo es esta.

¿En qué casos creés que te serviría usar esta técnica?

mchojrin

CEO at Leeway
Mauro es Lic. en Ciencias de la Computación.
Su carrera como docente de programación se inició en el año 1997 en la Escuela Técnica ORT.
Actualmente coordina el desarrollo de proyectos web en Leeway y los cursos dictados en la Leeway Academy

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *