什么是 SSE 技术？
SSE 技术（Server-Sent Events）是 HTML5 引入的一项新特性，它允许服务器实时地向客户端推送数据，而无需客户端发起请求。相对于 WebSocket 技术，SSE 技术更加简单，适用于实现简单的服务端推送场景。
SSE 技术的实现
SSE 技术的实现需要借助浏览器提供的 EventSource 对象，代码示例如下：
-- -------------------- ---- ------- ----- ----------- - --- ------------------- ------------------ - ---------- - ---------------- ------- - --------------------- - --------------- - -------------------- ----------- - ------------------- - --------------- - ------------------ --------- ------ - ------------------- - ---------- - ---------------- ------- -
在服务端，需要返回一个符合 SSE 格式的数据流，代码示例如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
--
-------------- -- -
----- ----------- - --- -----------------------
---------------- --------------------
-- -----
--
------------------- -- -- -
---------------- -------
--在上面的代码中，我们通过 setInterval 方法每隔 1 秒钟向客户端推送当前时间。
SSE 技术的常见问题及解决办法
问题一：SSE 连接经常断开
SSE 连接会在一定时间内没有收到数据时自动断开，这是浏览器为避免长时间占用连接而做出的优化。一般情况下，我们通过发送 keep-alive 数据来保持连接。代码示例如下：
setInterval(() => {
res.write(':keep-alive\n\n')
}, 5000)上面的代码通过每隔 5 秒钟向客户端发送一个 keep-alive 数据来保持连接。
问题二：服务端 CPU 占用过高
如果我们的 SSE 服务向大量客户端推送数据时，可能会导致服务端 CPU 占用过高，从而影响服务的响应能力。这时我们需要对服务端的数据推送进行限流。
代码示例如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------- - --- ----- -- ---------
--- ----- - ----
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
--
-----------------
--------------- -- -- -
--------------------
--
-- -------- -
----- - -------------- -- -
----- ----------- - --- -----------------------
------------------------ -- -
-------------------- --------------------
--
-- -----
-
--
------------------- -- -- -
---------------- -------
--上面的代码通过创建一个 requests 集合来记录已连接的客户端，然后通过定时器推送数据，以此来对服务端数据推送进行限流。
总结
SSE 技术在实现服务端推送时具有一定的优势，但也面临着一些挑战，如连接经常断开和服务端 CPU 占用过高等问题。我们可以通过保持连接和数据推送限流等手段来解决这些问题。如果你对 SSE 技术还不太熟悉，不妨动手写一个简单的 SSE 服务并进行实验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ac6e2348841e989486d152