什么是 SSE?
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，使用单向持久连接将实时更新的数据直接推送给客户端。SSE 协议是在 HTML5 发布之后被引入的，它与 WebSocket 相似，但又有所不同。SSE 可以很方便地将最新的数据推送给客户端浏览器，而无需客户端发起请求。
如何处理格式化数据的推送
在实际场景中，我们通常需要将实时数据以某种格式化方式推送，比如 JSON 数据格式。那么如何处理格式化数据的推送呢？
使用 JSON 格式推送数据
JSON 是一种轻量级的数据交换格式，通过文本方式表示结构化数据。可以很方便地将实时数据使用 JSON 进行格式化，并将其推送给 SSE 客户端。
const eventSource = new EventSource('http://localhost:3000/sse');
const messageHandler = (event) => {
const data = JSON.parse(event.data);
// 处理接收到的 JSON 格式数据
};
eventSource.addEventListener('message', messageHandler, false);使用 XML 格式推送数据
XML（eXtensible Markup Language）是一种基于文本的标记语言，可以很方便地表示数据结构。使用 XML 格式推送数据可以更好地规范数据格式。
const eventSource = new EventSource('http://localhost:3000/sse');
const messageHandler = (event) => {
const parser = new DOMParser();
const xml = parser.parseFromString(event.data, 'application/xml');
// 处理接收到的 XML 格式数据
};
eventSource.addEventListener('message', messageHandler, false);SSE 推送数据的方法
在使用 SSE 推送数据时，通常需要对数据进行编码，以保证数据的安全性和一致性。
使用 Base64 编码推送数据
Base64 是一种编码方式，可以将二进制数据转换为文本内容，方便传输和存储。当我们需要传输二进制数据时，可以使用 Base64 编码方式进行数据推送。
const eventSource = new EventSource('http://localhost:3000/sse');
const messageHandler = (event) => {
const data = JSON.parse(atob(event.data));
// 处理接收到的 Base64 编码数据
};
eventSource.addEventListener('message', messageHandler, false);使用压缩算法推送数据
在数据传输过程中，如果数据量过大，会导致网络传输效率降低，影响用户体验。为了提高数据传输效率，推荐使用压缩算法进行数据推送。
-- -------------------- ---- -------
----- ----------- - --- ---------------------------------------- -
-------- -
------------------ ------ --------
-
---
----- -------------- - ------- -- -
----- ---- - -----------------------
-- ----------
--
--------------------------------------- --------------- -------示例代码
下面是一个简单的 SSE 数据推送示例：
服务端示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -----
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
----- ---- - -
---- ----- -------- ---------
---- ----- -------- ---------
---- ----- -------- --------
--
-------------- -- -
----- ----- - ------------------------ - -------------
----- ------- - ------ ------------------------------------
-------------------
-- ------
----------------
------------------- --------- -- ---- ----------客户端示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----------
-------
------
--------
----- ----------- - --- -----------------------------------------
----- -------------- - ------- -- -
----- ---- - -----------------------
-----------------------------------------------
--
--------------------------------------- --------------- -------
---------
-------
-------总结
SSE 技术可以很方便地将实时数据推送给客户端浏览器，从而实现实时更新效果。我们可以使用 JSON、XML等数据格式进行数据推送，同时还可以使用 Base64 编码、压缩算法等方式进行数据编码和压缩。希望本文能够对大家掌握 SSE 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c897445ad90b6d04141e79