介绍
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许服务器通过一个持久连接向客户端发送异步数据，适用于一些实时性要求较高的应用场景。在前端开发中，SSE 技术被广泛应用于推送数据、通知等场景。本文将介绍 SSE 中心化推送的设计与实现，包括构建 SSE 服务器，前端实现 SSE 接收及处理，以及如何使用 SSE 实现业务逻辑。
构建 SSE 服务器
在构建 SSE 服务器之前，我们需要先了解 SSE 与 WebSocket 的区别。相较于 WebSocket，SSE 具有以下优势：
- SSE 不需要客户端自己实现 Socket 接口，可以通过简单的 EventSource API 实现；
- SSE 支持跨域推送；
- SSE 使用 HTTP 协议，所以不需要额外的协议协商；
- SSE 是建立在 HTTP 长连接上，不需要额外开启 WebSocket 建立 TCP 连接；
因此，当我们需要实现推送实时数据、通知等场景时，SSE 是一种轻量、简单、易用的选择。
构建 SSE 服务器代码示例（Node.js）
我们可以使用 Node.js 来构建 SSE 服务器。这里给出一个示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
-- ------------ ----- -----------------
--------------- --------------------
-- ------
------------------------------ ----
-- ----
---------------- -----------
-- -----
------------- -------------
-- -----------
-------------------- ----
---
-- --------
-------------- -- -
---------------- - - ------------- - --------
-- ------
---
--------------------代码中，我们使用 http.createServer 创建服务器，设置响应头，使其返回 SSE 格式的数据流。其中，Content-Type 需要设置为 text/event-stream，'Access-Control-Allow-Origin' 设置为 *，即允许跨域，Cache-Control 需要设置为 no-cache，防止浏览器缓存数据，Connection 需要设置为 keep-alive，保持连接，X-Accel-Buffering 需要设置成 no，避免 Buffering。
在设置完响应头之后，我们可以向客户端发送消息。在示例代码中，我们使用了 setInterval 函数，每隔一秒钟向客户端发送一条消息，以模拟实时推送数据的场景。每条消息都需要以 data: 开头，以及一个额外的空行来标识消息的结束。这是 SSE 的约定格式。
前端实现 SSE 接收及处理
当 SSE 服务器向客户端推送数据时，我们需要在前端页面中接收并处理这些数据。这里同样给出一个示例代码：
const eventSource = new EventSource('http://localhost:8000');
eventSource.onmessage = function(event) {
console.log(event.data);
};示例代码中，在前端页面中我们使用 EventSource 对象来与 SSE 服务器建立连接。new EventSource('http://localhost:8000') 构造器接收指向 SSE 服务器的 URL。在连接成功建立之后，我们可以通过 onmessage 函数监听从服务器发送过来的消息，从而实现对数据的接收与处理。在本示例中，我们简单地将接收到的消息打印到控制台上，以表示接收成功。
此外，我们还可以通过 onopen 和 onerror 分别监听连接打开和连接关闭事件，实现必要的错误处理和异常捕获。
使用 SSE 实现业务逻辑
通过 SSE 技术，我们可以非常方便地实现一些实时推送数据的场景，例如：
- 在线聊天室，客户端向服务器发送信息，服务器实时将消息推送给在线聊天室的其他用户；
- 在线多人游戏，服务器将每个玩家的输入数据广播给其他在线玩家；
- 实时数据展示页面，服务器实时将最新数据推送给前端页面，前端页面及时更新数据展示。
除此以外，SSE 技术还可以与 WebSocket 技术结合使用，实现一些更加复杂的实时场景。
总结
SSE 中心化推送是一种基于 HTTP 的推送技术，使用简单、实时性好，在前端开发中被广泛应用。在本文中，我们介绍了如何构建 SSE 服务器，前端实现 SSE 接收及处理，并提供了相关示例代码。希望能够对读者的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d5980ab5eee0b525d543e6