2

Quiero descargarme un zip con archivos pdf generado en un foreach desde un backend en php (con slim). Está acción tarda bastante y quería devolver al frontend un valor dentro del bucle diciendo por donde se encuentra. El frontend llama al backend con http.

El tema es que no encuentro la manera de que mediante el subscribe obtenga los datos en tiempo real del estado del bucle antes de generar el zip.

No se si lo estoy planteando bien..

Gracias.

2
  • ¿Qué has probado por ahora? Sólo comentarte que 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. La alternativa es usar el evento progress de un XHR. Si te vale, te puedo redactar una respuesta sobre cómo hacerlo, si quieres hacerlo usando HttpClient entonces puedo sugerirte alternativas. Commented el 4 sept. 2019 a las 11:16
  • He probado varias cosas, pero siempre me centraba en el script de php, pensando que era eso. Probare con XHR. Muchas Gracias Commented el 5 sept. 2019 a las 12:10

1 respuesta 1

2

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.

6
  • Probare esto. Se asemeja bastante a lo que quiero. Muchas Gracias. Commented el 5 sept. 2019 a las 12:10
  • Prueba y me comentas cualquier duda que te surja. Si compartes el código que agrega archivos PDF al ZIP podría indicarte dónde introducir los echo/flush en el lado del PHP. Commented el 5 sept. 2019 a las 12:15
  • 1
    Esto es lo que necesitaba. He tenido que añadir en espera.php echo str_pad('',4096)."\n"; para rellenar el buffer y que me imprimiese los echos de manera secuencial. No se si es la manera más optima de hacerlo pero es la que me sirve. Muchas Gracias! Commented el 5 sept. 2019 a las 13:10
  • En principio con el ob_end_flush() y el flush() tras cada echo debería bastar. Commented el 5 sept. 2019 a las 14:00
  • Hola! Por curiosidad, me comentastes que había alternativas para hacerlo con httpclient. Me puedes indicar como sería? Commented el 6 sept. 2019 a las 10:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.