在前端开发中，如何实现在多个页面之间传递数据是一个重要的问题。传统的方式包括使用 cookie、localStorage、sessionStorage 或者通过 URL 参数传递，但是这些方式都存在一些局限性。而 SSE（Server-Sent Events）是一种新的技术，可以方便地实现在多个页面之间传递数据。
SSE 是什么？
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送异步事件流。换句话说，服务器可以向客户端推送数据，而客户端无需轮询或者发送任何请求。SSE 通过创建一个长连接，在连接保持打开的情况下，不断向客户端发送数据。
如何使用 SSE？
在客户端，我们通过创建一个 EventSource 对象，连接到服务器上的 SSE 端点：
const source = new EventSource('/api/sse');这个代码片段会向服务器发起一个 SSE 连接请求，并创建一个新的连接。在服务器端，我们需要指定 SSE 端点，这可以通过使用特殊的 HTTP 头来完成：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// send data
res.write(`data: ${message}\n\n`);当服务器端有新的数据需要发送时，只需要使用如上面的代码片段向客户端发送数据即可。
在客户端，我们可以监听“message”事件，来接收从服务器端发送过来的数据：
source.addEventListener('message', function (event) {
console.log(event.data);
});由于 SSE 可以创建一个长连接，因此当我们在多个页面中创建 SSE 对象时，它们都可以使用同一个连接来接收数据。这意味着，无论是哪个页面接收到服务器端发送过来的数据，都可以将这些数据传递给其他页面。
下面是一个示例代码，演示了如何使用 SSE 在多个页面之间传递数据：
-- -------------------- ---- -------
-- ---------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ------ - -------------------------- ----- ---- -
----- -------- - -------------------- ------- --- --- - ------------ - ---------
----- ------ - ------------------------------
-- -------- --- ----------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------------- -- -
---------------- --------------------
-- ------
- ---- -
-----------------
-
---
------------------- -------- -- -
------------------- --------- -- ---- -------
---
-- ---------
----- ------ - --- ------------------------
----- -------------- - -----------------------------------
---------------------------------- -------- ------- -
------------------------ - -----------
---
-- -------------
----- ------ - --- ------------------------
---------------------------------- -------- ------- -
------------------------
---在这个示例代码中，我们创建了一个 SSE 端点/api/sse，并且向客户端不断地发送当前时间。在客户端，我们创建了两个 SSE 对象，分别在不同的页面中。当服务器发送数据时，任何一个 SSE 对象都可以接收到。
总结
SSE 是一种新的技术，可以方便地实现在多个页面之间传递数据。它基于 HTTP 协议，允许服务器向客户端推送异步事件流，从而实现实时数据更新。在使用 SSE 时，我们需要在服务器端创建 SSE 端点，并使用 EventSource 对象连接到服务器。通过 SSE，我们可以轻松地在多个页面之间传递数据，从而提高应用程序的交互性和实时性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474c8c6968c7c53b020dd45