什么是 SSE
SSE（Server-Sent Events，服务器发送事件）是一种用于实现服务器向客户端推送数据的技术。它通过建立一条持久化的 TCP 连接来实现数据的实时传输，是一种轻量的、实时的、高效的推送技术。
SSE 是 HTML5 标准中的一部分，因此它在现代浏览器中有广泛的支持。它的优势在于可以使用简单的 JavaScript 代码实现实时推送，而不需要使用像 WebSockets 这样比较重量级的技术。
SSE 的特性
1. 实时性
SSE 可以实现服务器向客户端实时推送数据，因此适合用于实时更新内容的场景，比如聊天室、实时统计数据等。
2. 简单接入
SSE 的接入非常简单，只需要使用 JavaScript 发起一次 HTTP 连接就可以了。与常规的 Ajax 请求不同，SSE 会建立一条持久化连接，在连接保持期间服务器可以多次向客户端发送数据。
3. 可靠性
SSE 基于 HTTP 协议，也就是说它可以在大多数网络环境下工作，不需要通过复杂的网络设置或插件来实现推送功能。
4. 自适应性
SSE 并不需要客户端或服务器改变其行为或使用特定的库或框架来实现，因此可以很容易地与已有的代码集成。
SSE 的用法
1. 服务器端的实现
SSE 的服务器端实现比较简单，只需要在 HTTP 头部添加一个 Content-Type 字段，并且使用一个特殊的事件流格式来向客户端发送数据。在 PHP 中，可以通过以下代码实现：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
----- ------ -
-- ---------
----- - -----------
-- -----------------
-- ------ -- --- -
---- ------ ----- ------
-- -------- --- -----------------
-----------
--------
-
-- --------------
---------
-2. 客户端的实现
SSE 的客户端实现也很简单，只需要通过 JavaScript 构建一个 EventSource 对象，并为其添加一个 onmessage 事件处理函数，当接收到服务器发送过来的消息时，这个函数就会被调用。在 JavaScript 中，可以通过以下代码实现：
var source = new EventSource('/sse.php');
source.onmessage = function (event) {
// 处理服务器发送过来的数据
var data = JSON.parse(event.data);
console.log(data);
};在实际的代码中，为了防止连接失效，还需要为 EventSource 对象添加一个 onerror 事件处理函数，这个函数会在连接出错时被调用，从而重新建立连接，以确保连接的稳定性。
示例代码
下面是一个简单的 SSE 示例代码，演示如何使用 SSE 实现一个实时统计客户端在线人数的功能。
服务器端代码
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
----- ------ -
-- ---------
------ - ------------
-- ------------
---- ------ ------------
-- -- --- ------------------
-----------
--------
-- -------------
---------
-客户端代码
-- -------------------- ---- -------
--- ------ - --- ------------------------
---------------- - -------- ------- -
-- --------
--- ----- - ---------------------
------------------------------------------------- - ------
--
-------------- - -------- -- -
-- -------------
------------------- -- -
------ - --- ------------------------
-- ------
--总结
SSE 是一种轻量的、实时的、高效的推送技术，在实现实时更新内容的场景中具有优势。通过 SSE，我们可以在不需要复杂的网络设置或插件的情况下，实现服务器向客户端实时推送数据的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4d828b5eee0b525cace60