javascript - PHP 的服务器发送事件无法正确显示数据

Question

我正在尝试使用 ajax 发布创建最简单的聊天应用程序，并尝试使用 SSE 推送数据。我刚刚遇到 SSE 并尝试了它。现在的问题是

1. 我如何控制服务器何时推送数据，因为它每 3 秒推送一次数据。

2. 为什么当我选择整个 MySQL 行时只在我的浏览器中显示最后一行但推送所有内容(在网络选项卡中选中)

这是我的代码:

index.html

<script>

var source = new EventSource("server.php");

source.addEventListener("message", function(event){

$("#box").html(event.data);

});

</script>

<script type="text/javascript">
    
function chat_pressed(){

    var chat = $('#chat_text').val();

    var data = {action : "send_chat", chat : chat};

    $.ajax({
        type : "POST",
        url : "chat.php",
        data : data,
        success : function(r){
            $('#chat_text').val("");
        }

    })


}

</script>

<input type="text" id="chat_text" />
<input type="button" onClick="chat_pressed();"  value="POST"/>
<br /><hr />
<div id="box"></div>

服务器.php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

include("connect.php");


$sql = $db->prepare("SELECT * FROM chat");
$sql->execute();

while($row = $sql->fetch(PDO::FETCH_ASSOC)){
    $chat = $row['chat'];
echo "data: $chat \n\n";
}

ob_flush();
flush();

//sleep(2);

1. 关于 index.html当我改变 $("#box").html(event.data);至 $("#box").append(event.data);然后它一遍又一遍地显示所有行相同的东西。基本上是追加。

这里发生的事情是当我保留 $("#box").html(event.data); 时它只显示最后一行

1. 开启时server.php我写 echo "data:".$chat."<br />" ，那么它就不会插入任何东西。

   我想要的是控制服务器推送的东西，并在表更新时仅将最后一行数据附加到当前数据。我想知道 echoing 的正确方法数据是从什么时候开始出现复杂的事情，比如divs正如我所理解的那样，一切都会变得困难。如有任何帮助，我们将不胜感激..

Answer 1

您的 server.php 进程在发送一位数据后结束。这意味着套接字关闭。浏览器看到套接字已经死了，并在 3 秒后重新连接。这就是它看起来每 3 秒推送一次数据的原因。相反，您需要将 server.php 更改为有一个无限循环，其中有一个 sleep ，并轮询 mysql:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

include("connect.php");

$previousID = 0;

while(true){
    $sql = $db->prepare("SELECT * FROM chat WHERE id > ?");
    $sql->execute( array($previousId) );
    while($row = $sql->fetch(PDO::FETCH_ASSOC)){
        $chat = $row['chat'];
        echo "data: $chat \n\n";
        //TODO: update $previousID here
    }

    ob_flush();
    flush();

    sleep(10);  //Poll every 10 seconds
}

这段(未经测试的)代码还展示了如何每次只发送新数据。您需要让它更健壮一些——例如，如果收到 0 行，您可能想要发送一个心跳来告诉客户端上次轮询时间。

对于你的第二个问题，你发送的每条数据都会调用你的消息处理程序，然后你可以:

$("#box").html(event.data);

这意味着每条新数据都会覆盖之前的数据；由于所有数据行实际上同时到达，您在屏幕上看到的只是最后到达的数据行。

考虑使用 <li>标签和 jQuery 的 append() , 如果您希望所有行都显示在屏幕上。在我的书(PLUG:使用 HTML5 SSE 的数据推送应用程序 - O'Reilly)中，我经常附加到 <pre>标记，作为一种查看所有到达数据的快捷方式。