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:
- El front end
- El script del lado del servidor que ejecuta el proceso
- 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?
- Cómo agregar una página de error 500 en un proyecto PHP - 31/10/2024
- ¿Cuántos contenedoresnecesita tu php? - 28/10/2024
- Cuál es el mejor framework PHP para hacer APIs REST - 25/10/2024
