在 Web 开发中，有时需要在多个网站之间共享数据。而 Server-Sent Events（以下简称 SSE）是一种非常有用的技术，可以让我们实现实时的数据共享。
简介
SSE 是一种基于 HTTP 的实时通信技术。通过 SSE，服务器可以向客户端发送推送消息，而客户端可以通过监听这些消息来获取实时数据。SSE 使用简单且易于实现，而且在浏览器的支持下可以很好地与前端框架和库集成。
实现过程
要在多个网站之间使用 SSE 共享数据，我们需要完成以下步骤：
- 在服务器端，创建一个 SSE 服务，用于向所有监听者推送消息。
- 在网站 A 中，使用 JavaScript 创建一个 SSE 连接，以便监听服务器端的消息。
- 在网站 B 中，同样使用 JavaScript 创建一个 SSE 连接，并监听同一端点的消息。
- 当服务器端发生变化时，它将向所有 SSE 连接发送消息。此时，网站 A 和网站 B 中都会收到这个消息。
下面是具体示例：
服务器端
在服务器端，我们需要创建一个 SSE 服务，向所有连接的客户端推送消息。以下是一个基本的 SSE 服务器示例（使用 Node.js）：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- -------------------- -- -----
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - ------- --------
----------------- ------------
---------------- ------------------------------ -- ----
-- ------
- ---- -
------------------- -- ------
----------
-
----------------在这个例子中，我们创建了一个 HTTP 服务器，并监听 /events 端点。当有客户端连接到此端点时，服务器将使用 SSE 来向所有连接的客户端推送一条消息，消息内容是 Hello, world!。
网站 A
在网站 A 中，我们可以使用 JavaScript 创建一个 SSE 连接，以便监听服务器端的消息。以下是一个基本的网站 A 的示例代码：
const source = new EventSource('/events');
source.addEventListener('message', event => {
const data = JSON.parse(event.data);
console.log(data);
});在这个例子中，我们创建了一个 EventSource 对象，它会自动连接到服务器的 /events 端点。当服务器推送消息时，EventSource 会触发 message 事件，并将消息内容存储在 data 属性中。在这个例子中，我们将消息输出到控制台。
网站 B
同样地，在网站 B 中，我们也可以使用 JavaScript 创建一个 SSE 连接，并监听同一端点的消息。以下是一个基本的网站 B 的示例代码：
const source = new EventSource('/events');
source.addEventListener('message', event => {
const data = JSON.parse(event.data);
alert(data);
});在这个例子中，我们也创建了一个 EventSource 对象，并监听 message 事件。当有新的消息时，我们将使用 alert 函数弹出消息内容。
注意事项
使用 SSE 共享数据时，请注意以下问题：
- SSE 的使用需要浏览器的支持。如果浏览器不支持 SSE，则需要使用其他技术实现数据的实时推送。
- SSE 会一直保持与服务器的连接，直到它被关闭或断开连接。这可能会导致服务器的负载增加，因此请确保 SSE 的使用不会导致过多的连接。也可以考虑使用 WebSocket 等其他技术来接收实时数据。
- SSE 的消息通过 JSON 字符串传输。请注意处理消息时的 JSON 解析和错误处理。
结论
使用 SSE 共享数据可以实现实时的数据推送和共享。它非常适用于跨多个网站和页面共享数据。本文提供了一个使用 SSE 共享数据的基本示例，希望读者可以在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675331688bd460d3ad9bb0c2