小编典典

显示长时间运行的PHP脚本的进度

ajax

我有一个PHP脚本,可能至少需要10秒钟才能运行。我想为用户显示进度。

在执行类中,我有一个$progress随进度(在1-100中)更新的属性和一个方法get_progress()(其目的应该很明显)。

问题是,如何更新<progress>前端的元素以供用户查看?

我认为AJAX是解决方案,但我只是无法解决。我无法到达同一对象实例。


阅读 491

收藏
2020-07-26

共1个答案

小编典典

如果您的任务是上载庞大的数据集或在服务器上处理它,则在将进度更新到服务器时,您应考虑采用某种作业架构,在该架构中启动作业并使用在服务器上运行的其他脚本执行该作业。服务器(例如缩放/处理图像等)。在这种情况下,您一次只能做一件事,因此形成了一个任务管道,其中有一个输入和一个最终的处理后的输出。

在流水线的每个步骤中,任务状态都会在数据库中更新,然后可以通过当前存在的任何服务器推送机制将其发送给用户。运行用于处理上载和更新的单个脚本会给您的服务器带来负担,并且还会限制您(如果浏览器关闭,发生其他错误怎么办)。将过程分为步骤时,您可以从成功完成的点开始继续执行失败的任务。

有很多方法可以做到这一点。但是整个流程看起来像这样

在此处输入图片说明

以下方法是我为个人项目所做的工作,此脚本非常适合将数千个高分辨率图像上传和处理到我的服务器,然后将其缩小到多个版本并上传到Amazon
s3,同时识别其中的对象。(我的原始代码在python中)

第1步 :

启动运输或任务

首先上传您的内容,然后通过简单的POST请求立即返回该交易的交易ID或uuid。如果您要在任务中执行多个文件或执行多项操作,则可能还需要在此步骤中处理该逻辑

第2步:

完成工作并返回进度。

一旦确定了事务处理的方式,就可以使用任何服务器端推送技术来发送更新数据包。我会选择WebSocket或服务器已发送事件,只要适用于回溯到不受支持的浏览器上的长时间轮询。一个简单的SSE方法如下所示。

function TrackProgress(upload_id){

    var progress = document.getElementById(upload_id);
    var source = new EventSource('/status/task/' + upload_id );

    source.onmessage = function (event) {
        var data = getData(event); // your custom method to get data, i am just using json here
        progress.setAttribute('value', data.filesDone );
        progress.setAttribute('max', data.filesTotal );
        progress.setAttribute('min', 0);
    };
}

request.post("/me/photos",{
    files: files
}).then(function(data){
     return data.upload_id;
}).then(TrackProgress);

在服务器端,您将需要创建一些东西来跟踪任务,带有job_id的简单Jobs体系结构和发送到db的进度就足够了。我将把作业调度和路由留给您,但是之后,概念代码(对于满足以上代码的最简单的SSE)如下。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
/* Other code to take care of how do you find how many files are left 
   this is really not required */
function sendStatusViaSSE($task_id){
    $status = getStatus($task_id);
    $json_payload = array('filesDone' => $status.files_done,
                          'filesTotal' => $status.files_total);
    echo 'data: ' . json_encode( $json_payload ) . '\n\n';
    ob_flush();
    flush();

    // End of the game
    if( $status.done ){
        die();
    }

}

while( True ){
     sendStatusViaSSE( $request.$task_id );
     sleep(4);
}

?>

可以在http://html5doctor.com/server-sent-events/找到有关SSE的好教程。

上面是一个概念上的解释,还有其他方法可以实现此目的,但这是解决我这个问题的解决方案。

2020-07-26