前言
在 web 开发过程中，前端与后端之间的数据交互是非常频繁的。我们可以使用 Ajax 等技术向后端服务器请求数据，但是这种方式通常是单向的，也就是说只能由前端向后端发送请求，而不能由后端向前端推送数据。Server-Sent Events（SSE）就是一种实现了服务器向浏览器推送数据的方式。
但是，由于 SSE 推送的数据可能会很大，如果一直无限制地推送下去，对网络流量和服务器负载都会带来很大的压力。因此，本文将着重讲解 SSE 的事件流压缩方法，以便更高效地处理 SSE 推送数据。
SSE 简介
SSE 是一种长连接（long-polling）的方式，通过浏览器 API 实现了服务器向浏览器实时推送数据的功能。具体来说，它是基于 HTTP 的，使用了一种叫做“text/event-stream”的传输协议。通过这种协议，服务器可以向浏览器推送一条条的事件，每个事件都以“data: ”开头，以“\n\n”结尾。以下是一个 SSE 的示例：
data: {"message": "hello sse"}
data: {"message": "hi sse"}
data: {"message": "bye sse"}
上面的代码中，服务器推送了三个事件，每个事件都是一个 JSON 对象。
要使用 SSE，我们需要在客户端（即浏览器）创建一个 EventSource 对象，并将服务器端的 SSE 接口地址传入该对象的构造函数中，如下所示：
const source = new EventSource('/sse');这里我假设服务器的 SSE 接口地址为“/sse”，你可以根据实际情况修改它。
客户端一旦创建了 EventSource 对象，就可以使用它的 onmessage 和 onerror 事件监听器来处理服务器推送的数据和错误，如下所示：
source.onmessage = (event) => {
console.log(event.data); // {"message": "hello sse"}等
};
source.onerror = (event) => {
console.log(event);
};SSE 的事件流压缩方法
在实际应用中，SSE 推送的事件流可能非常庞大，如果一直无限制地推送下去，既会对网络带宽造成压力，也会对服务器负载造成压力，甚至可能导致浏览器崩溃。为了避免这种情况，我们可以使用 SSE 的事件流压缩方法。
事件流压缩的思路是将连续的事件合并为一个事件，然后通过“retry: ”字段指定一个重新连接的时间间隔，使得客户端在一段时间后重新连接，从而实现定时刷新事件流的目的。以下是一个事件流压缩的示例：
data: {"message": "hello sse"}
data: {"message": "hi sse"}
data: {"message": "bye sse"}
retry: 10000
data: {"message": "welcome sse"}上面的代码中，第一、二行是连续的事件，它们被合并为一个事件。第三行是单独的一个事件，它与前面的事件间隔了 10 秒。第四行是另一个事件，它与前面的事件间隔了不到 10 秒。通过这种方式，我们可以在一定程度上缓解 SSE 事件流带来的压力。
具体来说，对事件流的压缩方式有多种实现方法，例如：
- 基于时间：将每个事件的时间戳与前一个事件的时间戳作差，如果两者之差小于某个时间阈值，就将它们合并为一个事件。如果两者之差大于等于某个时间阈值，则需要加上“retry: ”字段，重新连接事件流。
- 基于事件类型：将所有类型相同的事件合并为一个事件。如果下一个事件与前一个事件类型不同，则需要加上“retry: ”字段，重新连接事件流。
- 基于大小：将事件流中所有事件数据的大小、长度或数量作为判断依据，如果超过某个阈值，则需要加上“retry: ”字段，重新连接事件流。
另外，需要注意的是，SSE 压缩方式虽然能够缓解事件流的压力，但也会带来一定的延迟。因此，在实际应用中，我们需要根据实际情况选择合适的压缩方式。
实现 SSE 事件流压缩
下面是一个基于时间戳的 SSE 事件流压缩实现示例，它使用了 Node.js 和 Express，但是实际上可以在任何支持 SSE 的环境中使用。
首先，在服务器端代码中，我们需要定义一个 SSE 接口，并在其中实现事件流压缩的逻辑。具体来说，我们可以将压缩逻辑封装在一个名为“compressEvents”的函数中，然后在 SSE 接口中调用它。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- -- --- --
--------------- ----- ---- -- -
-- -----
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -----
--------------------
---
-- --------
-------- ------------------- -
----- ---- - -
----------- ------ ----- ------------ ------------
----------- --- ----- ------------ ---------- - ------
----------- ---- ----- ------------ ---------- - -------
----------- -------- ----- ------------ ---------- - -------
--
--- ------------- - --
-- ------
------------------- -- -
-- --------------- - ------------- - ----- -
-- --------------- - ----------
---------------- ----------------------------
- ---- -
-- ----------------- - ----- ----- ----------
----------------- ------------ ----------------------------
-
------------- - ---------------
---
-上面的代码中，我们定义了一个名为“data”的数组，其中包含了一组简单的事件。在 compressEvents 函数中，我们遍历了所有事件，对相邻的时间戳作差，判断它们是否小于某个阈值（例如 5 秒），如果小于则合并为一个事件，否则就加上“retry: ”字段，重新连接事件流。这样就实现了一种基于时间的 SSE 事件流压缩。
最后，在客户端代码中，我们创建一个 EventSource 对象，并监听 SSE 推送的数据和错误。如下所示：
-- -------------------- ---- ------- ----- ------ - --- -------------------- ---------------- - ------- -- - ------------------------ -- ----------- ------ ------ -- -------------- - ------- -- - ------------------- --
总结
本文介绍了 SSE 的基本原理和事件流压缩方法，其中以时间压缩为例给出了一个实现示例。虽然 SSE 压缩方式能够有效地缓解事件流带来的压力，但也会带来一定的延迟。因此，在实际应用中，我们需要根据具体情况选择合适的压缩方式。
如果你想深入了解 SSE 或其他前端技术，可以参考以下资料：
- MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/EventSource
- SSE 规范文档：https://html.spec.whatwg.org/multipage/server-sent-events.html
- 实现基于 SSE 的聊天室应用：https://www.sitepoint.com/simple-long-polling-chat-app-with-jquery-node-js-and-express/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e07e92f6b2d6eab3b9595c