Javascript 服务器发送了PHP未正确显示数据的事件

我正在尝试使用ajax发布创建最简单的聊天应用程序，并尝试使用SSE推送数据。我只是偶然发现了SSE并尝试了一下。现在的问题是

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

为什么当我选择整个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>

当我更改

$（“#box”）.html（event.data）时，在
index.html
上到
$（“#框”）.append（event.data）然后它一次又一次地显示所有行相同的内容。基本上是附加的

这里发生的事情是，当我保存

$（“#box”）.html（event.data）时，它只显示最后一行

当我在
server.php
上写入
echo“数据：“.$chat.”
“
”时，它不会推送任何内容

我想要的是获得对服务器的控制，并在更新表时仅将最后一行数据附加到当前数据。我想知道一种正确的
回显
数据的方法，因为当出现像
divs这样复杂的事情时，正如我所理解的，这一切都会变得困难。如蒙帮助，不胜感激


发送一位数据后，server.php进程结束。这意味着插座关闭。浏览器会看到套接字已断开，并在3秒钟后重新连接。这就是为什么它看起来像是每3秒推送一次数据。相反，您需要将server.php更改为具有无限循环，其中包含睡眠，并轮询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);

这意味着每一条新数据都会覆盖上一条数据；由于所有数据行有效地同时到达，所以您在屏幕上看到的只是最后到达的数据行

如果希望所有行都显示在屏幕上，请考虑使用
标记和jQuery的
append（）
。在我的书（PLUG:Data Push Apps with HTML5 SSE-O'Reilly）中，我经常附加一个
标记，作为一种快速而肮脏的方式来查看所有到达的数据。
是event.Data，甚至是文本，或者只是一个对象
html
需要字符串，而
append
可以处理更多类型。
$("#box").html(event.data);