在 Web 开发中，前后端数据同步是十分常见的需求，有时为了响应实时性，需要及时地将后端数据推送到前端。使用传统的轮询方式对服务器进行频繁请求存在性能问题，可能会给服务器带来很大压力，同时也会造成一定的时间和带宽浪费。这时候，我们可以使用 SSE（Server-Sent Events）技术，让服务器推送新的数据到客户端，提高数据同步的效率和实时性。
SSE 是一种基于 HTTP 协议的服务器推送技术，它通过建立一条基于长连接的 HTTP 通道，将服务器端的新数据以“流”的形式实时推送到客户端。相比 WebSocket，SSE 更轻量级，更容易实现，在数据实时性和压力控制上也更具优势。
SSE 基础概念
在使用 SSE 之前，首先需要了解一些基本概念。
SSE 事件流
SSE 事件流就是服务器通过 SSE 向客户端推送数据的方式，可以看作是一条基于 HTTP 的消息队列。事件流包含多条数据记录（即事件），每条记录由一个或多个字段构成，服务端推送记录的间隔和频率由服务器决定，客户端可以随时订阅和取消订阅事件流。
SSE Event
SSE Event 是 SSE 事件流中的一条记录，它是由多个字段构成的文本字符串，每个字段由“字段名: 字段值”组成，字段之间使用“\n”进行分隔，并以两个“\n”进行结尾。其中，必须包含“data”字段，用于携带事件数据，其他字段为可选项。
例如以下是一条 SSE Event：
data: {"name": "Tom", "age": 18}\n\nSSE 连接
SSE 连接是指客户端与服务器之间通过 SSE 协议建立的基于 HTTP 的连接。客户端可以通过直接访问 SSE URL，或使用 JavaScript 创建一个 EventSource 对象，在 SSE 连接上监听事件流并接收服务器推送的数据。
SSE 实现步骤
使用 SSE 实现前后端的数据同步，需要按照以下步骤进行：
- 服务器端设置 SSE 路由，将特定 URL 映射到 SSE 事件流
- 服务器端监听事件流，将新数据推送到事件流中
- 客户端通过 SSE 连接监听事件流，接收服务器推送的新数据并进行处理
接下来，我们针对每一个步骤进行详细介绍。
服务器端设置 SSE 路由
通过 SSE 向客户端推送数据，需要在服务器端设置 SSE 路由，将特定路由映射到 SSE 事件流。具体实现方式与服务器端框架相关，以下是一个 Express 框架下的 SSE 路由实现示例：
-- -------------------- ---- -------
------------------------ ------------- ---- -
---------
---------------- -----------
--------------- --------------------
------------- -------------
------------------------------ ---
---
-- ---------------
--------------- ---------- -
---------------- ---------- ---------
---
-- --------------
---------------------- -
----------------- ------------
---------------- -------- ------ ------ ----------
-- ------
---上述代码中，我们通过 Express 的路由绑定，将特定 URL “/event-stream” 映射到 SSE 事件流。在路由回调函数中，设置了 SSE 响应头信息及客户端连接关闭时的回调函数。然后使用 setInterval 定时发送 SSE Event 到客户端，从而实现了 SSE 事件流的推送。
服务器端监听事件流
服务器端需要监听 SSE 事件流并向其中推送新数据。在 Node.js 中，我们可以使用 setInterval() 方法周期性地向事件流中写入数据，也可以在其他事件中将新数据作为 SSE Event 写入事件流。
以下是在 Node.js 中监听事件流并向其中推送数据的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-- -- --- ---
----- ----------- - -
----- -------- ------ ------ -------
--
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
----------------------------------------------------------------
------------------------------------------
-----------------------------------------
-------------------------------------------- -----
-- --------
--------------- -- -- -
---------------- ---------- ----------
---
-- ------ --- ---
-------------- -- -
-----------------------
-- ------
---
------------------- -- -- -
------------------- ------- -- ---- -------
---客户端通过 SSE 连接监听事件流
客户端需要创建一个 SSE 连接，监听事件流并接收服务器推送的新数据。在 JavaScript 中，我们可以使用 EventSource 对象创建 SSE 连接，然后使用 onmessage 回调函数处理服务器推送的新数据。
以下是客户端监听事件流并接收数据的示例代码：
-- -------------------- ---- ------- ----- ------ - --- -------------------------------------------------- -- ------ ---------------- - --------------- - --------------------- ----- ----- - - ------------ ----- ---- - ----------------------- -- ---------- -- -- -------- -------------- - --------------- - ---------------- ---------- ---------- --
SSE 实践指南
下面是一些使用 SSE 实现前后端数据同步的实践指南：
- SSE 事件流推送的数据应该是结构化的，最好使用 JSON 格式
- 在事件流中添加“id”字段，用于标记新数据的唯一性
- 在客户端接收到新数据时，应该进行校验和去重，避免重复和无效数据的出现
- SSE 连接可以设置重连机制，保证连接稳定性和可靠性
- 服务器端可以通过添加事件类型（event type）来区分不同类型的数据，客户端可以根据事件类型进行过滤和分类处理
总结
本文介绍了使用 SSE 技术解决前后端数据同步问题的基本概念和实现步骤，并给出了相关的示例代码和实践指南。SSE 是一种轻量级、易实现的服务器推送技术，具有实时性高、性能优、易用等优点，可以广泛应用于 Web 开发中的实时数据传输场景中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6c93548841e989436c77b