什么是 SSE？
Server-Sent Events（SSE）是一种服务器向客户端推送异步事件的技术，可以用于实时更新数据、通知用户关于后端事件的变化。相比于使用轮询（polling）和长轮询（long polling）的方式，SSE 的实现更为轻量和高效。
为什么需要压缩？
SSE 传输的数据往往比较大，如果在数据传输过程中没有经过压缩，会导致网络带宽的浪费和传输速度的降低。为了优化 SSE 的性能，实现压缩是非常必要的。
压缩方式
SSE 的压缩方式有很多种，但都需要在客户端和服务器之间协定使用相同的压缩算法。下面介绍两种常见的 SSE 压缩方式：
Gzip 压缩
Gzip 是一种常见的压缩算法，可以在服务器端对 SSE 传输的数据进行压缩，然后在客户端对压缩过的数据进行解压缩。使用 Gzip 压缩需要服务器支持，同时客户端需要支持解压缩。
服务器端代码示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- ---- --
------------------ -
--------------- --------------------
---------------- -----------
-------------------- -----
------------------- ------ -- ----
---
----- ---- - ------------------
-- -- --- ---------
----- ------- - ------ --- -------------
---------------------------------
--------------------------------------- -- -- -
-- -----------
-----------------------
---
-- ---
---客户端代码示例：
const evtSource = new EventSource('/sse');
evtSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data);
};Base64 编码和解码
Base64 是一种著名的数据编码方式，可以将原始数据编码为 ASCII 字符串，从而可以在文本形式下进行传输。在 SSE 中，可以将数据先进行 JSON 序列化，然后将序列化后的数据进行 Base64 编码，最后将编码后的数据再原样传输到客户端，客户端在接收数据的时候再将其解码为原始数据。这种方式的缺点是，编码和解码会消耗一定的 CPU 资源，但相对于 Gzip 压缩的方式，它可以避免一些兼容性问题。
服务器端代码示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- --
------------------ -
--------------- --------------------
---------------- -----------
-------------------- ----
---
-- -- --- -------
----- ------- - - ----- ---- -------- --
----- ---------- - ------------------------------
----- --------- - -------------------------
-- -----------
---------------------
-- ---
---客户端代码示例：
const evtSource = new EventSource('/sse');
evtSource.onmessage = (event) => {
const base64Data = event.data.replace(/[\n\r]/g, '');
const jsonData = JSON.parse(atob(base64Data));
console.log(jsonData);
};总结
以上介绍了两种常用的 SSE 压缩方式，需要注意的是，在使用 SSE 传输数据时，除了考虑压缩的问题，还需要考虑 SSE 事件的命名规范、事件类型等问题，以保证 SSE 的有效性。通过使用 SSE 压缩技术，可以优化 SSE 的性能，提高 SSE 的效率和可靠性，从而改善 Web 应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486130048841e98944baa57