我有一个PHP脚本,可能至少需要10秒钟才能运行。我想为用户显示进度。
在执行类中,我有一个$progress随进度(在1-100中)更新的属性和一个方法get_progress()(其目的应该很明显)。
$progress
get_progress()
问题是,如何更新<progress>前端的元素以供用户查看?
<progress>
我认为AJAX是解决方案,但我只是无法解决。我无法到达同一对象实例。
如果您的任务是上载庞大的数据集或在服务器上处理它,则在将进度更新到服务器时,您应考虑采用某种作业架构,在该架构中启动作业并使用在服务器上运行的其他脚本执行该作业。服务器(例如缩放/处理图像等)。在这种情况下,您一次只能做一件事,因此形成了一个任务管道,其中有一个输入和一个最终的处理后的输出。
在流水线的每个步骤中,任务状态都会在数据库中更新,然后可以通过当前存在的任何服务器推送机制将其发送给用户。运行用于处理上载和更新的单个脚本会给您的服务器带来负担,并且还会限制您(如果浏览器关闭,发生其他错误怎么办)。将过程分为步骤时,您可以从成功完成的点开始继续执行失败的任务。
有很多方法可以做到这一点。但是整个流程看起来像这样
以下方法是我为个人项目所做的工作,此脚本非常适合将数千个高分辨率图像上传和处理到我的服务器,然后将其缩小到多个版本并上传到Amazon s3,同时识别其中的对象。(我的原始代码在python中)
启动运输或任务
首先上传您的内容,然后通过简单的POST请求立即返回该交易的交易ID或uuid。如果您要在任务中执行多个文件或执行多项操作,则可能还需要在此步骤中处理该逻辑
完成工作并返回进度。
一旦确定了事务处理的方式,就可以使用任何服务器端推送技术来发送更新数据包。我会选择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的好教程。
上面是一个概念上的解释,还有其他方法可以实现此目的,但这是解决我这个问题的解决方案。