在 Web 应用程序中，SSE（Server-Sent Events）是一种用于实时推送数据的技术。它使用一个持久连接，将服务器端生成的事件推送到浏览器，以便实时更新网页。SSE 不需要客户端发起请求，而是由服务器直接向客户端推送数据，这使得 SSE 与 WebSocket 不同，WebSocket 需要建立连接和处理复杂的消息传递。
SSE 推送数据的过程中，为了提高性能和减轻服务器的压力，我们可以采用批量发送和分块处理的方法。
批量发送
如果服务器需要连续多次发送事件，在每次发送事件之前都建立一个新的连接，这样对服务器和网络连接都有很大的负担。此时，可以使用批量发送来减少连接的次数。
当服务器需要推送多个事件时，可以将它们合并成一个长字符串，然后一次性推送到客户端。客户端接收到这个长字符串后，将其分拆成单个的事件。
以下是一个批量发送示例：
服务器端
let batchData = "data: {\"name\": \"John\", \"age\": 33}\n\n";
batchData += "data: {\"name\": \"Doe\", \"age\": 42}\n\n";
batchData += "data: {\"name\": \"Smith\", \"age\": 27}\n\n";
res.write("retry: 10000\n"); // 设置重试时间，以防止连接中断
res.write(batchData);客户端
let events = data.split("\n\n"); // 分割长字符串为单个事件
events.forEach(event => {
if (event.length > 0) {
let data = JSON.parse(event.replace("data: ", ""));
console.log(data.name + " " + data.age);
}
});分块处理
由于浏览器的缺陷或者其他一些原因，SSE 推送的消息可能会很长，这会导致浏览器无法立即接收到消息，从而使网页响应变得缓慢。为了解决这个问题，可以使用分块处理。
浏览器可以在接收到 SSE 数据时，按块处理数据。如果数据量过大，浏览器可以优雅地处理，不会出现网页卡顿的情况。
以下是一个分块处理示例：
服务器端
-- -------------------- ---- ------- --- --------- - ------- - --------------- - --------------- - ----------- ----------------- ---------- ------------------------ ---------------------- ----------------------------- -------------- -- ----- --- ------ - ---------------------------- -------------------- -- - ----------------------------------- - ------ - ----- - -------- --- ----------
客户端
-- -------------------- ---- -------
--- ---------- - ---
--- ----- - -------------------
------------------ -- -
-- ------------------------------ - -- ---------
--- ------ - -------------- ----
-- ------- - -- -
---------- - ---
- ---- -
---------------------- - - ------------
-
- ---- -
---------- -- ------------
-
---结论
SSE 技术可以实现浏览器与服务器之间的实时通信，对于需要实时更新数据的 Web 应用程序非常有用。批量发送和分块处理是 SSE 推送数据的优化方案，可以提高性能和减轻服务器负担。在实际开发中，需要充分考虑数据量和其他因素，选择适合的方案进行实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677369af6d66e0f9aae30180