Por desgracia no puedes usar HttpClient.get()
para hacer el trabajo porque devuelve una promesa que emite un único valor como respuesta a la petición HTTP y se resuelve, nunca emite un nuevo valor o valores parciales.
La única alternativa es usar el evento progress
de un XHR
o bien hacer el PHP de una duración menor agregando uno a uno o en bloques los archivos para poder obtener un progreso parcial del trabajo.
Usando XMLHttpRequest
Al salirnos del marco de trabajo de Angular deberemos acceder al DOM del documento directamente ya que Angular no detectará los cambios en las variables de la clase en el evento de actualización del objeto XMLHttpRequest
.
Ejemplo:
Script PHP espera.php
:
<?php
/* Permitimos el acceso desde cualquier origen (OJO) */
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header('Allow: GET');
/* Si es la comprobación prevuelo finalizamos la ejecución */
($_SERVER['REQUEST_METHOD'] === 'OPTIONS') and die();
/* Finalizamos cualquier buffer que haya en el servidor web */
ob_end_flush();
/* Enviamos datos del total */
echo '15';
for ($t = 0; $t <= 15; $t++) {
/* Enviamos la actualización del progreso actual */
echo ';' . $t;
/* Forzamos el envío de datos parcial al navegador */
flush();
/* Simulamos trabajo durante 1 segundo */
sleep(1);
}
Ejemplo de app.component.ts
:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
xhr: XMLHttpRequest;
constructor() { }
ngOnInit() {
this.xhr = new XMLHttpRequest();
this.xhr.addEventListener('progress', this.onProgress, false);
this.xhr.open('GET', 'http://localhost/espera.php', true);
this.xhr.send();
}
onProgress(evento) {
/* Obtenemos la barra de progreso (no funciona la integración con Angular) */
let progreso = document.getElementById('progreso') as HTMLProgressElement;
/* Dividimos lo que entrega PHP (acumulativo) por puntos y comas */
let valores: Array<String> = evento.srcElement.responseText.split(';');
/* Cambiamos el valor de máximo (entero) por el primer elemento (total) */
progreso.max = parseInt(valores[0] as string);
if (valores.length > 1) {
/* Si recibimos más de un valor cambiamos el valor actual (entero) */
progreso.value = parseInt(valores[valores.length - 1] as string);
}
}
}
Ejemplo de app.component.html
:
<progress id="progreso" value="0" max="0"></progress>
Reduciendo el trabajo e informando del progreso
Podemos ir agregando de manera secuencial los archivos al archivo ZIP e ir informando del estado de progreso en cada lote procesado.
Para simular esto podemos usar el siguiente PHP:
<?php
/* Permitimos el acceso desde cualquier origen (OJO) */
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Methods: GET");
/* Para recibir cookies debemos indicarlo */
header("Access-Control-Allow-Credentials: true");
header("Allow: GET");
/* Si es la comprobación prevuelo finalizamos la ejecución */
($_SERVER['REQUEST_METHOD'] === "OPTIONS") and die();
session_start();
/* Informamos que lo que enviamos serán datos JSON */
header('Content-type: application/json; charset=utf-8');
/* Si es la primera ejecución o agregamos "?cero" a la URL */
if (empty($_SESSION['trabajo']) || isset($_GET['cero'])) {
$_SESSION['trabajo'] = [
'archivos' => [
'directorio/archivo1.pdf' => false,
'directorio/archivo2.pdf' => false,
'directorio/archivo3.pdf' => false,
'directorio/archivo4.pdf' => false,
'directorio/archivo5.pdf' => false,
'directorio/archivo6.pdf' => false,
'directorio/archivo7.pdf' => false,
'directorio/archivo8.pdf' => false,
'directorio/archivo9.pdf' => false,
],
];
if (isset($_GET['cero'])) {
die(json_encode([
'total' => count($_SESSION['trabajo']['archivos']),
'proceso' => 0,
]));
}
}
/* Obenemos el listado de archivos que restan por agregar al ZIP */
$restantes = array_filter(
$_SESSION['trabajo']['archivos'],
function($v) { return $v === false; }
);
/* Si hay archivos que comprimir "comprimimos" el siguiente */
if (count($restantes) > 0) {
/* Obtenemos el siguiente archivo y lo borramos de la lista */
$siguiente = key($restantes);
unset($restantes[$siguiente]);
$_SESSION['trabajo']['archivos'][$siguiente] = true;
}
/* Simulamos el trabajo durante dos segundos */
sleep(2);
/* Si el trabajo no ha sido completado devolvemos un 202 */
if (count($restantes) > 0) {
header('HTTP/1.1 202 Accepted');
}
/* Enviamos el estado del trabajo */
echo json_encode([
'total' => count($_SESSION['trabajo']['archivos']),
'proceso' => count(array_filter($_SESSION['trabajo']['archivos'])),
]);
Si el script de PHP se llama espera.php
como antes, podemos empezar de cero el trabajo usando http://localhost/espera.php?cero
.
Ahora nuestro app.component.ts
podría ser:
import { Component, OnInit } from '@angular/core';
import { HttpClient, } from '@angular/common/http';
/* Modelo del JSON recibido por el PHP */
export class Datos {
total: number;
proceso: number;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
progreso: Datos = { total: 0, proceso: 0 };
completado: Boolean = false;
constructor(private http: HttpClient) { }
ngOnInit() {
this.obtenerProgreso();
}
obtenerProgreso() {
/* Hacemos la llamada enviando cookies de sesión */
this.http
.get('http://localhost/espera.php', { withCredentials: true })
.subscribe((datos: Datos) => {
this.progreso = datos;
console.log(datos);
if (datos.total > datos.proceso) {
console.log('Reintentamos');
this.obtenerProgreso();
} else {
this.completado = true;
}
});
}
}
Y nuestro app.component.html
:
<progress id="progreso"
[value]="progreso.proceso"
[max]="progreso.total"
></progress>
<div *ngIf="completado">¡Completado!</div>
No hay que olvidar agregar al archivo app.module.ts
, en imports
, el módulo HttpClientModule
.
HttpClient.get()
para hacer el trabajo porque devuelve una promesa que emite un único valor como respuesta a la petición HTTP y se resuelve, nunca emite un nuevo valor. La alternativa es usar el eventoprogress
de unXHR
. Si te vale, te puedo redactar una respuesta sobre cómo hacerlo, si quieres hacerlo usandoHttpClient
entonces puedo sugerirte alternativas.