介绍
SSE（Server-Sent Events）是 HTML5 提供的一种用于在浏览器和服务器之间传递实时数据的机制。相比于 WebSocket，SSE 更加简单，易于实现，并且可以充分利用现有的 HTTP 技术栈。
本文将介绍 SSE 的工作原理和实现方式，并提供示例代码，帮助读者深入理解该技术的本质和用法。
工作原理
SSE 的工作原理和常规的 HTTP 请求和响应类似，但是它使用了一些特殊的 “Content-Type” 和 “event” 字段来传递实时数据。
下面是一个典型的 SSE 请求的示例：
GET /events HTTP/1.1 Host: example.com Accept: text/event-stream
该请求中，客户端请求了一个名为 “/events” 的资源，并指定了 “text/event-stream” 作为 “Accept” 头的值。这是告诉服务器，响应的内容应该符合 SSE 的格式。
服务器可以像处理普通的 HTTP 请求一样处理该请求，但是在发送响应时需要注意以下几点：
- 响应的 “Content-Type” 必须是 “text/event-stream”；
- 响应头必须包含 “Cache-Control: no-cache”；
- 每个响应行（以 “\n” 结尾）表示一个事件（event），每个事件可以包含多个字段（field）。
下面是一个典型的 SSE 响应的示例：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ------ ------- --- - ----- ------ ------ ------ ------- --- - ----- --- --- ---- ---
该响应包含了两个事件（event）。每个事件分别包含了三个字段（field）：一个 “event” 字段，一个 “id” 字段，和一个 “data” 字段。
“event” 字段表示事件的类型，比如 “message”、 “error” 等等。如果不指定，就默认为 “message”。
“id” 字段表示事件的 ID，用于在断开连接后重新连接时指定从哪个事件开始接收数据。
“data” 字段表示事件的数据，可以是任何长度的字符串。
下面是一个 JS 示例代码，用于接收 SSE 数据：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log('Received: ' + event.data);
};在这个代码中，我们通过创建了一个 EventSource 对象，并指定了 SSE 的 URL。当 SSE 有新数据到达时，事件处理函数就会被调用。
实现方式
SSE 的实现方式可以是同步的，也可以是异步的。对于同步方式，可以使用传统的 HTTP 服务器框架（比如 PHP、Ruby on Rails 等）来实现。对于异步方式，则需要使用 Node.js 等支持非阻塞 I/O 的服务器框架来实现。
下面是一个使用 PHP 实现 SSE 的示例代码：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
----- ------ -
---- ------ - - ------ - -------
-----------
--------
---------
-在这个代码中，我们通过不停地输出事件数据来模拟 SSE 的实现。同时，由于 SSE 是一种长连接，因此我们需要手动控制缓冲并使输出数据尽快发送到客户端。
结论
SSE 是一种非常实用的技术，它可以让开发者用很少的代码实现实时数据传输的功能。同时，SSE 也是一个相对简单的协议，不需要像 WebSocket 那样复杂，因此非常适合用于开发小型的实时应用，如聊天室、通知系统等。
本文介绍了 SSE 的工作原理和实现方式，并给出了示例代码。希望本文可以帮助读者更好地理解 SSE，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c3c1666ef9cf37faf437c