php - 如何在用户按下按钮后将进度更新从 PHP 推送到页面？

Question

我在页面上有一系列按钮，当用户点击它们时，它们会通过 jQuery .ajax() 触发 PHP 脚本>。目前，我通过 success: function(data) { $('#divplaceholder').append(data); 将“进度更新”的串联字符串转储附加到状态占位符 DIV； ... 参数。我的问题是我想在执行“回应”它们时将实时进度更新打印到该占位符 DIV。

我已经阅读了许多 SSE 示例、教程，进行了大量的谷歌搜索，我想我对如何从服务器发回“消息”有了一个想法，但我一直找不到关于如何实际触发的示例 tasker.php 通过 jQuery 发送更新当用户实际按下按钮。目前我的 .ajax() 调用是由 jQuery .on('click') 事件触发的。

我在学习通过 SSE 发回更新和如何触发 tasker.php 的执行(以及在某些情况下向它发送参数，如 .ajax() 使我能够做到)。

如果您能帮助解决这个问题，我们将不胜感激。

更新#2: Found this example但是一旦 JavaScript 加载它就会被触发；我想在点击按钮时触发执行。

更新 #1:添加示例代码 (请原谅格式，我是从移动应用程序发布的) 这是我现在如何实现它的抽象:

<? php
$output ="";
/*dummy code*/
read_csv_file();
$output.= "Opened and read file<br/>"; //Step 1
parse_csv_file();
$output.= "CSV file successfully parsed"; //Step 2
delete_from_directory();
$output.= "CSV file successfully deleted"; //Step 3
insert_data_into_db();
$output.=  "successfully inserted records into Database"; //Step 4

return $output;
?>


<div id="placeholder"></div>
<button id="button">Update</button>


//jQuery...

$('#button').on('click', function(){
.ajax({
url: 'tasker.php',
dataType: 'txt',
data:  dataVariable,
success: function (data){
$('#placeholder').append(data);
});
});

//jQuery...

Answer 1

首先，在客户端:

var server = null;
$('#button').on('click', function(){
  if(server)server.close();
  server = new EventSource('tasker.php?x=123');
  server.addEventListener('message', function(e){
    process(e.data);
    if(e.data >= 100){server.close();server=null;} //6
    }, false);
  });

积分:

• 你必须使用 GET 传递参数
• 我假设有一个 process() 会获取您的进度更新，并以某种方式改变网络浏览器的显示。
• 如果再次按下该按钮，它会关闭所有先前的 SSE 连接，并启动一个新连接。
• 6:后台代码见#6

在后端，PHP伪代码:

<?php
//Process inputs here
//If using sessions close them here
$lastProgress = 0;
while(true){
  $progress = ...  //1
  if($progress == $lastProgress)continue; //2
  echo "data:$progress\n\n";  //3, 4
  @ob_flush();flush();  //5
  //if($progress >= 100)exit;  //6
  }

积分:

• 1:获取进度(例如查看日志文件、轮询数据库等)
• 2:不要浪费带宽；只发回新进展
• 3:我假设 $progress 只能是一个数字。如果有可能是文本，您需要进行错误检查或 json 转义!!
• 4: "data:"前缀，"\n\n"为SSE协议(protocol)。
• 5:确保立即发送的 PHP 习惯用法。
• 6:SSE 后端是一个无限循环:当浏览器关闭套接字时，整个 PHP 进程都会被 Apache 杀死。对于进度表，您希望它在我们知道不会再有任何进展后就死掉，但这必须来自客户端(如果 服务器 断开连接，浏览器会认为套接字死了并且会尝试重新连接)。这就是为什么这一行被注释掉的原因。请参阅客户端代码中的 #6。

最后一点，您可以坚持使用 Ajax，并听取 readyState 3(也称为 cometd 技术)。 (这就是让它在 IE11 和更早版本的浏览器上工作的方式；也是能够使用 POST 的唯一方法。)(有关这些主题的更多信息，请参阅我的书《Data Push Apps With HTML5 SSE》。)