前言
在前后端分离的开发模式下，前端通过 Ajax 或其他技术请求服务器数据，并将数据用于页面呈现。随着对实时性和性能的要求越来越高，基于 HTTP 长连接的 Server-Sent Events（SSE）成为一种理想的解决方案。
SSE 允许服务器向客户端推送消息，而不需要客户端发起请求。消息可以是任何格式的文本，可以用于即时通信、推送通知、实时统计等场景。在开发过程中，必须确保 SSE 推送的消息的完整性及有效性。本文将介绍 SSE 的机制和如何保证消息的完整性及有效性。
SSE 工作原理
SSE 基于 HTTP 长连接（长轮询或长连接），使用 EventSource 对象接收服务器推送的消息。SSE 格式如下：
event: <event-name> data: <data> id: <id> retry: <milliseconds>
其中，event 表示事件名，data 表示消息内容，id 表示消息 ID，retry 表示客户端在失去连接后重新连接的时间间隔。
服务器端显示代码如下：
-- -------------------- ---- -------
----- ------------ - ------------------
----- --- ------- ------------ -
---------------- ---- -
--------
-------- - ----
-------- - ----
-----------------
-
---------------- ----- --- -
---------------------- - - ----- - ------
--------------------- - - ---- - ------
-- ---- -
------------------- - - -- - ------
-
---------------------
---------------------- ------------
-
----------- -
--------------------- -------
------------- -- -
-----------------
-- -------
-
-
-------------- - ----
在客户端，可以通过以下代码监听 SSE：
-- -------------------- ---- ------- ----- --- - --- -------------------- ------------------------------- --- -- - --------------------- -- -------- --- ---------------------------- --- -- - ------------------ -- --- --- ----------------------------- --- -- - ------------------- -- --- ---
上述代码中，EventSource 实例用于监听服务器端推送的消息。message 事件用于处理推送来的消息，open 事件用于处理 SSE 连接打开事件，error 事件用于处理连接错误事件。
SSE 消息的完整性及有效性
为了保证 SSE 消息的完整性及有效性，在开发时，需要注意以下几点：
- 消息格式的正确性
SSE 消息格式必须符合规范，必须以 event: <event-name> 开头，并以空行分隔。如果没有事件名，则必须省略 event: 行。数据行必须以 data: 开头，如果有消息 ID，则必须包含 id: 行。如果存在重新连接，则必须包含 retry: 行。同时，消息必须以两个连续的换行符结束。
- 消息的可读性
推送到客户端的消息必须是可读的文本字符串，不能包含二进制数据。如果必须发送二进制数据，则必须将其转换为 Base64 编码格式，以便客户端可以解码。
- 网络连接的稳定性
如果 SSE 连接断开，则客户端会自动重新连接。在重新连接期间，必须确保客户端不会丢失任何消息。为了避免客户端重复接收之前的消息，服务器必须生成新的消息 ID。
- 数据的一致性和安全性
SSE 推送到客户端的数据和前台数据必须是一致的。同时，必须确保数据的安全性，防止在传输过程中被篡改。
在开发中，可以使用轮询技术和签名等方法保证数据的一致性和安全性。
示例
下面是一个 SSE 示例，演示 SSE 推送消息的完整性和有效性。该示例基于 Node.js 和 Express 框架，使用 SSE 推送新闻头条数据。
服务器代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - -----------------
----- --- - ----------
----- ---- - ---------------- -- -----
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- --- - --- -------- -----
-------------- -- -
----- -- - -----------
--------------------- ------ ------- ----
-- ------
---
---------------- -- -- -
---------------- --------- -- ---------------------------
---
浏览器代码如下：
const sse = new EventSource('/api');
sse.addEventListener('news', (e) => {
console.log(e.data);
});在 SSE 连接稳定时，将会每隔 5 秒钟推送一条新闻头条数据。
总结
SSE 是一种在 HTTP 长连接的基础上推送消息的技术，可以用于实现即时通信、推送通知等功能。在开发时，需要保证 SSE 消息的完整性及有效性，包括消息格式的正确性、网络连接的稳定性、数据的一致性和安全性等方面。本文通过一个 SSE 示例说明了如何实现 SSE 的推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9eadf5ad90b6d04189029