Server-Sent Events (SSE) 是一种技术，它允许服务器向客户端推送数据，而无需客户端发送请求。SSE 是一种长连接的技术，可以用于实时更新信息，如聊天消息或实时分析数据。SSE 是一种 Web 技术，是由 W3C 标准化的。
实现 SSE
要使用 SSE，需要进行一些设置。首先，需要在服务器上启用 SSE。在服务器端，SSE 是通过 HTTP 响应头中的 Content-Type 设置的，需要将其设置为 text/event-stream。处理 SSE 请求的服务器程序可以采用许多不同的语言和框架，其中最常见的是 Node.js、Python、Java 和 Ruby。
在客户端，可以使用 JavaScript 通过创建 EventSource 对象与服务器通信。在 EventSource 对象上，可以添加 onmessage、onopen 和 onerror 事件监听器。
下面是一个简单的示例，它显示如何使用 EventSource 从服务器接收消息：
const source = new EventSource('/sse');
source.onmessage = (event) => {
console.log(event.data);
};这里，我们将 EventSource 实例化为 source，并将其连接到 /sse 路径上的服务器。服务器将定期发送消息，并使用 data 属性包含消息的内容。在客户端上，我们可以将 onmessage 事件监听器添加到 source 对象上，并在消息到达时将其打印到控制台。
SSE 的相关原理
SSE 和 WebSockets 一样，都是基于 HTTP 协议的长连接技术。与 WebSockets 不同的是，SSE 仅允许服务器向客户端发送数据，而不允许客户端向服务器发送数据。这是因为 SSE 是建立在传统的 HTTP 响应上的，HTTP 请求是单向的，即只能由客户端向服务器发送数据。
在 SSE 中，服务器将发送一系列具有特定格式的消息。每个消息都包含一个唯一的标识符、一个事件类型和一个数据字段。事件类型指定消息的类型，并且客户端可以根据事件类型进行分组。数据字段包含消息的内容。
每个 SSE 连接都有一个持续的 HTTP 客户端请求，服务器将使用此请求来发送消息。服务器将在消息之间添加一些前缀和后缀，以便客户端能够解析消息流：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- --- - ------ ------- ----- ---- -- - -------- --- - ------ ------- ----- ---- -- ------- --------
在上面的示例中，首先返回了响应头，声明了文档类型为 text/event-stream，以及禁用客户端缓存和保持 HTTP 连接保持活动状态。接下来的每个消息定制了消息 ID、事件类型和消息内容，每个消息之间用一个空行隔开。
客户端通过将 HTTP 连接保持活动来接收 SSE 消息，这与 WebSocket 连接非常相似。客户端收到消息后，可以按需要处理将其展示等。
指导意义
SSE 是一种有用的技术，它使得创建实时 Web 应用程序变得更加容易。它比 WebSocket 更容易使用和配置，因为它是建立在 HTTP 响应之上的。它是一款非常流行和可靠的数据推送技术。
然而，SSE 有一个重要的限制，即只能实现服务器向客户端的单向推送。如果你需要在客户端和服务器之间进行双向通信，则应选择 WebSocket，或者使用其他技术，如 AJAX 轮询，来模拟实时 Web 应用程序。
总结
Server-Sent Events 可以实现服务器向客户端的单向通信。它是一种非常容易使用和配置的技术。在服务器上，需要将 Content-Type 设置为 text/event-stream，并定期发送消息。在客户端上，使用 JavaScript 通过创建 EventSource 对象与服务器通信。每个 SSE 连接都有一个持续的 HTTP 客户端请求，并且服务器会将消息前缀和后缀添加到消息之间，以便客户端能够解析消息流。
SSE 是一种非常有用和流行的数据推送技术，但它也有一些限制。如果需要双向通信，WebSocket 是更好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649aaaf048841e989479cdf3