前端使用 Server-sent Events（SSE）与后端进行实时通信，通常采用长轮询（Long Polling）的方式。长轮询是一种防止前端浏览器过于频繁向服务器发送请求的方法，但在高并发时会造成服务器负载过大，甚至会导致系统崩溃。本文将介绍如何解决 SSE 中的长轮询问题。
使用 Compressed-sse
Compressed-sse 是一个非常有效的技巧，可以在服务器和浏览器之间节省大量的带宽。它通过使用 gzip 压缩 SSE 消息来减少数据包的大小。在发送 SSE 消息时，将其压缩，然后将 Content-Encoding 设置为 "gzip"。在浏览器中，需要对已经压缩的响应进行解压缩。这可以通过将响应类型设置为 text/event-stream; charset=utf-8 后，使用 zlib.js 库解压缩完成。
下面是一个使用 Compressed-sse 的示例代码：
服务器端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - -----------------------
----- --- - ---------------
----- --- - ----------
-----------------------
----------------------------------
----- ------ - -----------------
----- --- - --- ------------
-------------------- -------- -- -
-------------- -- -
----- ------- - ------ ----- -------------
-------------------- - --------- ---- ---
-- ------
---客户端代码：
const source = new EventSource('/sse');
source.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data);
};使用 WebSockets
WebSockets 可以通过 TCP 协议进行长连接通信，与长轮询相比，它明显降低了服务器负载，减少了需要处理的 HTTP 请求和响应。同时，WebSockets 提供了更高的实时性和更可靠的连接。
下面是一个使用 WebSockets 的示例代码：
服务器端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --------- - --------------
----- --- - ----------
----------------------------------
----- ------ - -----------------------
----- --- - --- ------------------ ------ ---
-------------------- ---- -- -
-------------- -- -
----- ------- - - ----- --- ------ --
---------------------------------
-- ------
---
--------------------客户端代码：
const ws = new WebSocket('ws://localhost:3000');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data);
};结论
在 SSE 中，Compressed-sse 可以减少带宽的使用率，并且在网络低速的情况下更为有效。对于高并发场景，WebSockets 方案更加可靠和高效。当然，选择哪种方案也需要根据具体场景评估。
以上两种 SSE 解决方案均能为我们提供低延迟、实时高效的服务，能够从根本上避免服务器负载问题，并降低吞吐量。包含示例代码的这篇文章描述了如何使用这两种方案，旨在帮助开发者更好地掌握 SSE 技术及其高效使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748152c93696b0268e30247