php - HTML5 服务器发送事件如何工作？

Question

我想了解 HTML5 服务器端事件如何工作？在下面的代码中为什么不打印 Hello ？但是，如果我删除 php 中服务器端时间线的注释，它会工作并继续显示服务器端时间吗？

HTML5

<div id="result"></div>

        <script>

    if(typeof(EventSource)!=="undefined")
      {
      var source=new EventSource("php/demo_sse.php");
      source.onmessage=function(event)
        {
        document.getElementById("result").innerHTML+=event.data + "<br>";
        };
      }
    else
      {
      document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
      }
     </script>

PHP

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

$time = date('r');
echo "Hello";
//echo "data: The server time is: {$time}\n\n";
flush();
?>

Answer 1

有一个细节你必须注意，这就是

事件流格式

从源发送事件流需要构建一个纯文本响应，并使用紧随 SSE 的 text/event-stream 内容类型提供服务(服务器发送的事件)格式。在其基本形式中，响应应包含“data:”行，后跟您的消息，后跟两个 \n 字符来结束流:

data: My message\n\n

多行数据

如果您的消息较长，您可以使用多个“data:”行将其分解。以“data:”开头的两个或多个连续行将被视为一条数据，这意味着只会触发一个消息事件。

每行应以单个 \n 结尾(最后一行除外，它应以两个结尾)。传递给消息处理程序的结果是由换行符连接的单个字符串。例如:

data: first line\n
data: second line\n\n

将在e.data中生成第一行\n第二行。

然后可以使用 e.data.split('\n').join('') 来重建不含 \n 个字符的消息。

理论说了这么多，回到你的问题，直接写:

echo "Hello"."\n\n";

编辑:

控制重新连接超时

浏览器在每次连接关闭后大约 3 秒尝试重新连接到源。您可以通过添加以 retry: 开头的行来更改该超时，后跟尝试重新连接之前要等待的毫秒数。

以下示例尝试在 10 秒后重新连接:

retry: 10000\n
data: hello world\n\n

取消事件流

通常，当连接关闭时，浏览器会自动重新连接到事件源，但可以从客户端或服务器取消该行为。

要从客户端取消流，只需调用:

source.close();

要从服务器取消流，请使用非 text/event-stream Content-Type 进行响应，或返回 200 OK 以外的 HTTP 状态(例如 >404 未找到)。

这两种方法都会阻止浏览器重新建立连接。

官方文档是here安全的话是 here .