Server-Sent Events (SSE),即服务器发送事件,是一种处理服务器端向客户端发送实时数据的通信协议。与 WebSocket 相比,SSE 更加轻量级,适用于单向通信或只需要服务器端推送的场景,如实时更新前端 UI、推送消息等。本文将介绍 SSE 在生产环境中的应用实践,并提供相关示例代码。
基本使用
SSE 遵循 HTTP 协议,使用 text/event-stream
作为 MIME 类型。客户端通过创建 EventSource
对象和服务器端建立长连接,接收服务器端推送的实时数据。下面是一个简单的示例:
服务端代码:
-- -------------------- ---- ------- ----- ---- - ---------------- -------------------------- ----- ---- - ------------------ - --------------- -------------------- ---------------- ---------- --- -------------- -- - ----- --------- - -------------- ---------------- ------------------- -- ------ ----------------
客户端代码:
<script> const eventSource = new EventSource('http://localhost:3000'); eventSource.onmessage = function(event) { console.log(event.data); } </script>
上面的代码中,服务端每秒钟向客户端推送一个随机数,客户端通过 EventSource
对象监听消息,打印接收到的数据。运行该示例后,可在浏览器控制台看到每秒钟打印的一个随机数。
优化性能
在生产环境中,需要考虑 SSE 的性能问题。下面是一些优化性能的方法。
gzip 压缩
SSE 产生的流式数据十分冗长,可以通过 gzip 压缩来减小数据传输量,节省带宽。在服务端,通过使用 zlib
模块的 createGzip
创建 gzip 流,并通过管道的方式将数据传输至客户端。
服务端代码:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - ---------------- -------------------------- ----- ---- - ----- ---- - ------------------ ------------------ - ------------------- ------- --------------- -------------------- ---------------- ---------- --- -------------- -- - ----- --------- - -------------- ----------------- ------------------- --------------- -- ------ ----------------
调整心跳间隔时间
浏览器默认每 3 秒发送一个 heartbeats,以检测服务器是否在连接中。可以通过调整心跳间隔时间来减小服务器的负载,具体时间需要根据具体情况进行调整。调整方法为在服务端发送请求的 headers 中设置 X-Hidden-Heartbeat-Interval
。
服务端代码:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - ---------------- -------------------------- ----- ---- - ----- ---- - ------------------ ------------------ - ------------------- ------- --------------- -------------------- ---------------- ----------- ------------------------------ ---- -- --------- - - --- -------------- -- - ----- --------- - -------------- ----------------- ------------------- --------------- -- ------ ----------------
避免重复连接
每个 SSE 连接在服务端是维护状态和资源的,如果客户端频繁地断开和建立连接,会导致服务端的资源浪费。因此,可以通过在客户端保持长连接的方式避免重复连接。在客户端代码中,可以使用 eventSource.close()
方法来关闭 SSE 连接。
客户端代码:
-- -------------------- ---- ------- -------- --- ------------ --- ----------- - ----- -------- --------- - ----------- - --- ----------------------- ------------------ - -- -- - ---------------- -------- - --------------------- - ------- -- - ------------------------ - ------------------- - ----- -- - ---------------- ------------ ----------- -- ------------------- ------ - - ---------- -- --------------- ---------------------------------------------------------- -- -- - ----------- - ------ -------------------- -- ---------
总结
本文介绍了 SSE 在生产环境中的应用实践,首先介绍了 SSE 的基本使用方法,然后提供了一些优化性能的方法,最后提供了示例代码。在使用 SSE 的过程中需要注意,避免频繁地连接和断开连接、调整心跳间隔时间等,以获得更好的性能表现。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6484508a48841e989436a9c3