header(‘Content-Type: text/event-stream‘)；是干什么的？底层原理是什么？

2024-12-19 07:07:22 php 1641

header('Content-Type: text/event-stream'); 用于设置 HTTP 头信息，使浏览器知道接收到的是一个服务器发送事件 (Server-Sent Events, SSE) 流。SSE 是一种允许服务器推送实时更新到客户端的技术，通常用于需要实时数据更新的应用，如实时通知、股票行情、聊天应用等。

详细解释：

1. SSE 简介：

SSE 是 HTML5 提供的一种技术，它允许服务器向浏览器推送更新数据，而无需客户端轮询服务器。这意味着客户端不必反复请求服务器，而是通过一个持久的 HTTP 连接，服务器可以持续地发送数据。

2. 基本工作原理：

客户端： 浏览器通过 EventSource 对象与服务器建立连接。代码示例如下：

javascript
const eventSource = new EventSource('url-to-sse-endpoint');
eventSource.onmessage = function(event) {
    console.log(event.data);
};

服务器： 服务器设置 Content-Type: text/event-stream 头，并发送特定格式的数据流。数据流格式如下：
```
text
data: message1\n\n
data: message2\n\n
```
每个消息以 data: 开头，以两个换行符结尾。

3. 详细实现步骤：

服务器端：

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

$counter = rand(1, 10);
while (true) {
    // 检查连接是否仍然打开
    if (connection_aborted()) break;

    // 发送一个数据块
    echo "data: This is message {$counter}\n\n";

    // 刷新输出缓冲区
    ob_flush();
    flush();

    // 随机计数器递增
    $counter++;

    // 延迟3秒
    sleep(3);
}

以上代码示例中，服务器不断发送带有递增计数器的消息，每3秒发送一次。header('Cache-Control: no-cache'); 确保浏览器不缓存响应。

4. 连接管理：

连接保持： SSE 连接是持久的，一旦建立，服务器和客户端会保持连接，直到连接被显式关闭或出现错误。
自动重连： 如果连接断开，EventSource 对象会自动尝试重新连接。

5. 优点和缺点：

优点：
- 简单易用，不需要复杂的协议或库。
- 浏览器原生支持（如 Chrome、Firefox、Safari）。
- 基于 HTTP，容易穿越防火墙和代理。
缺点：
- 只支持单向通信（服务器到客户端），如果需要双向通信，可能需要 WebSocket。
- 可能不支持老旧的浏览器或不完全支持（如 IE）。

总结：

header('Content-Type: text/event-stream'); 是实现 SSE 的关键，它通知浏览器接受的是实时数据流。SSE 是一种简单而有效的实时数据传输技术，适用于各种需要实时更新的应用场景。