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

Question

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

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

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

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

Answer 1

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

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

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

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

启动运输或任务

首先上传您的内容，然后通过简单的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的好教程。

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