什么是 SSE
SSE（Server-Sent Events）是一种 Web 技术，它允许服务器推送事件数据到客户端。相较于 WebSockets，SSE 更加轻量级，且不需要建立双向的连接，因此更适用于一些简单的场景。
SSE 连接复用问题
在使用 SSE 时，我们通常会创建一个 EventSource 对象，用于接收服务器推送的事件数据。然而，当我们需要在不同的页面或组件中使用 SSE 时，就会出现连接复用问题：每次创建 EventSource 对象都会建立一个新的连接，这可能会导致服务器资源的浪费。
实现方法
为了解决 SSE 连接复用问题，我们可以使用 SharedWorker 技术。SharedWorker 是一种在多个浏览器上下文之间共享的 JavaScript 运行环境，可以在多个页面或组件中共享一个连接。
具体实现步骤如下：
- 在服务器端创建一个 SSE 连接，并将其封装为一个 SharedWorker。
-- -------------------- ---- -------
-- ---------
----- ---- - ----------------
----- - ------ - - --------------
----- ---------- - ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
--
----------------------- ---- -- -
-- -------- --- ------- -
------ --------------- -----
-
----------------
----- --- - --- -------- ----- ---- ---
-------------------- ---- -- -
---------------------- ------------
---------------- --------- -- -
--------------------- -------- -------------
---
--------------- -------------
---
// sharedWorker.js
const sse = new EventSource('http://localhost:3000/sse');
sse.onmessage = (event) => {
postMessage(event.data);
};- 在客户端创建多个 EventSource 对象，指向同一个 SharedWorker。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
--- -------------------
--------
----- ------ - --- --------------------------------
--------------------- - ------- -- -
----- ------- - -----------------------------
------------------- - -----------
---------------------------------------------------------
--
----- --- - --- -----------------------------------------
------------- - ------- -- -
------------------------ -- ----------------
--
----- --- - --- -----------------------------------------
------------- - ------- -- -
------------------------ -- ----------------
--
---------
-------
-------在上述代码中，我们首先在服务器端创建了一个 SSE 连接，并将其封装为一个 SharedWorker。然后，在客户端中创建了多个 EventSource 对象，其中两个对象指向同一个 SharedWorker。当服务器推送事件数据时，SharedWorker 会将数据传递给所有连接到它的 EventSource 对象，从而实现连接复用。
总结
通过使用 SharedWorker 技术，我们可以在多个页面或组件中共享一个 SSE 连接，从而避免连接复用问题。需要注意的是，SharedWorker 只能在同源的情况下使用，因此需要确保服务器和客户端位于同一个域名下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6630ad0fd3423812e4e8ebe0