Javascript PHP中持久函数的进度条

Javascript PHP中持久函数的进度条,javascript,php,server-sent-events,Javascript,Php,Server Sent Events,我正在寻找任何合理的方式来展示服务器上一些持久功能的进展,这些功能是从web浏览器用PHP实现的 最近,我发现使用服务器端事件,效果非常好,但前提是我在很短的时间内生成大量的小消息。如果我尝试使用相同的工作解决方案来减少持续时间更长的步骤,浏览器几乎不会更新 模拟丢失持久操作的PHP函数: $big_number = 10000; while ($i < $big_number) { usleep(200); sendMsg(++$i, "", $i/$big_number

我正在寻找任何合理的方式来展示服务器上一些持久功能的进展,这些功能是从web浏览器用PHP实现的

最近,我发现使用服务器端事件,效果非常好,但前提是我在很短的时间内生成大量的小消息。如果我尝试使用相同的工作解决方案来减少持续时间更长的步骤,浏览器几乎不会更新

模拟丢失持久操作的PHP函数:

$big_number = 10000;
while ($i < $big_number) {
    usleep(200);
    sendMsg(++$i, "", $i/$big_number*100);
}
几乎可以立即更新进度条,感觉很好,但是更改值(而不是10000个快速操作,只进行几次长操作)会破坏一切,进度条会在从0%到100%的中断后立即变为

$big_number = 100;                       // <- changed from 10000 to 100 
while ($i < $big_number) {
    usleep(20000);                       // <- changed from 200 to 20000
    sendMsg(++$i, "", $i/$big_number*100);
}
你认为问题出在哪里,因为这些数字是我唯一改变的,它完全破坏了应用程序

编辑:简化的JavaScript更新进度条:

source = new EventSource(php_file);

source.addEventListener("message", function(e) {
    var result = JSON.parse(e.data);

    document.getElementById("myprogress").style.width = result.progress+"%";

    if(result.message == "TERMINATE") {
        source.close();
        document.getElementById("myprogressbar").style.display = "none";
    }
}, false);
编辑2: 问题可能出在服务器端的缓冲中(虽然我没有使用缓存、flush和ob_flush),但上面提到的两种情况之间的交互仍然很奇怪(仍然没有解决)

包含服务器时间的JavaScript日志(在usleep(20000)版本中):


请显示更新进度条的Javascript。您可以尝试使用PHP内置Web服务器吗?也就是说,通过终端,移动到站点的根文件夹并执行
php-S localhost:8000
。然后,执行页面,例如,只是为了澄清我之前的评论:我测试了上面提到的代码,根据PHP处理程序(mod_PHP、fpm、PHP内置)得到了不同的行为@FrancescoAbeni不幸的是,这是一个网络主机,我无法访问控制台。我怀疑问题在于服务器端的输出缓冲。请显示更新进度条的Javascript。您可以尝试使用PHP内置网络服务器吗?也就是说,通过终端,移动到站点的根文件夹并执行
php-S localhost:8000
。然后,执行页面,例如,只是为了澄清我之前的评论:我测试了上面提到的代码,根据PHP处理程序(mod_PHP,fpm,PHP内置),我得到了不同的行为。@FrancescoAbeni不幸的是,这是在一个网络主机上,我无法访问控制台。我怀疑问题在于服务器端的输出缓冲。
20:53:09 start
20:53:19 first message
20:53:20 last message
source = new EventSource(php_file);

source.addEventListener("message", function(e) {
    var result = JSON.parse(e.data);

    document.getElementById("myprogress").style.width = result.progress+"%";

    if(result.message == "TERMINATE") {
        source.close();
        document.getElementById("myprogressbar").style.display = "none";
    }
}, false);
23:19:34 start
23:19:45 firstMessage (server time 23:19:35)    
23:19:45 lasttMessage (server time 23:19:44)