Tengo una página web que permite a los usuarios cargar y procesar archivos específicos. Después de que un usuario cargue algunos archivos, después de hacer clic en el botón 'Procesar', se envía una llamada ajax a un servicio de back-end. En la función beforeSend, se aplica una superposición a la pantalla y se muestra una rueda giratoria. Cuando se activa la función de éxito, se elimina la superposición y se muestra una notificación de brindis como '¡Los archivos fueron procesados!' Mi objetivo es mostrar de alguna manera un estado de progreso para cada archivo basado en puntos de control específicos en el servicio de back-end. Digamos que el servicio de back-end cuando se llama realiza las siguientes tareas: analizar el archivo, asignar a un formato específico, enviar datos a la base de datos A... y al final devuelve el estado http 200 y un JSON como
{ "status":"Success", "message": "File X was processed" }Ahora, lo que quiero es que, en lugar de solo obtener una superposición y deshabilitar toda la página hasta que se active el evento de éxito, tener una barra de progreso que se actualice para cada archivo en función del paso exacto al que llegó el backend.
Por ejemplo, para el archivo A, me gustaría ver las siguientes transiciones: 5 % de archivo de análisis, 10 % de archivo de asignación... 90 % de envío de datos a la base de datos, 100 % procesado.
¿Es esto de alguna manera alcanzable?
Hay algunos puntos que usted necesita para mirar en.
Por lo general, en el código de producción, necesitamos tener tiempos de espera. Si está realizando una llamada ajax a la API de back-end, habrá un tiempo de espera asociado con esa llamada a la API. Suponga que si el tiempo de espera es de más de 2 minutos, le enviará un error de tiempo de espera de puerta de enlace 504.
Para superar esto e implementar la funcionalidad que desea, puede tener cualquier base de datos (consideremos el servidor SQL). En su servidor SQL, cree una tabla: Process_Table With schema: Process_id (Almacenará el id/nombre del proceso) Porcentaje (Almacenará el porcentaje) En_paso (Análisis, asignación, envío a la base de datos, etc.)
Usando Javascript (o cualquier marco de su elección), use setInterval(), para hacer llamadas a la API check_process(). Para check_proceess, puede pasar el process_id y compararlo con la base de datos. Para el intervalo, puede establecerlo en 5 segundos. Para que cada 5 segundos se realice la llamada.
Puede leer la respuesta de esas llamadas API y hacer su procesamiento.
Una solicitud HTTP consta de una solicitud y una respuesta. No hay una forma directa de obtener actualizaciones de estado más allá del evento onprogress que le permitiría ver la cantidad de datos que se han transferido. Esto es útil para determinar la cantidad de datos que se han enviado al servidor, pero no tanto para determinar qué tan lejos ha llegado el servidor al trabajar con esos datos.
Puede almacenar el progreso en una base de datos y sondear un servicio web para leer el estado más reciente.
También puede hacer que el servidor envíe actualizaciones al cliente mediante Websockets para la comunicación bidireccional.
Un esquema aproximado de dicho sistema podría verse así:
También podría considerar hacer todo a través de Websockets (es decir, cargar los archivos de esa manera también). Una búsqueda rápida en Google muestra esta biblioteca para cargar archivos en un servicio Websocket alojado en Node.js.