Question

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

我已阅读了许多SSE示例，教程，进行了广泛的谷歌搜索，我想我对如何发送＆＃34;消息＆＃34;从服务器返回但我无法找到如何通过jQuery实际触发 tasker.php 的示例，以便在用户实际按下按钮时将更新发回。目前，我的.ajax()调用是由jQuery .on('click')事件触发的。

我在学习通过SSE发回更新以及如何触发执行 tasker.php 之间迷茫和迷茫（在某些情况下向其发送参数，例如{ {1}}让我这样做。

任何帮助清除这一点将不胜感激。

更新＃2： Found this example但是一旦JavaScript加载就会被触发;我希望在单击按钮时触发执行。

更新＃1：添加示例代码（请原谅格式化，我是从移动应用程序发布的）这是我现在如何实现它的摘要：

.ajax()

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-escaping !!
4："data:"前缀，"\n\n"是SSE协议。
5：PHP的习惯用法，以确保它立即发送。
6：SSE后端是一个无限循环：当浏览器关闭套接字时，整个PHP进程被Apache杀死。使用进度表，一旦我们知道没有更多的进度你想让它死掉，但这必须来自客户端（如果服务器断开连接，浏览器会认为套接字已经死亡并且将会尝试重新连接）。这就是为什么这条线被注释掉了。请参阅客户端代码中的#6。

作为最后一点，您可以坚持使用Ajax，并听取readyState 3（也称为彗星技术）。（这就是你如何使它在IE11和更早版本的浏览器上运行;也是能够使用POST的唯一方法。）（请参阅我的书，使用HTML5 SSE的数据推送应用程序，以获取有关这些主题的更多信息。）

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

1 个答案: