简介
Server-Sent Events (SSE) 是一个 HTML5 规范定义的 API，它允许服务器实时向客户端推送数据，使得实时通信成为可能，跟 WebSocket 类似。
EventSource API 是浏览器提供的一个接口，用于创建 SSE 连接，监听服务器端推送的实时事件。
为什么使用 SSE
在过去，前端实时通信的方式有很多，例如轮询，长轮询，WebSocket 等。但这些方式有很多问题，比如轮询浪费带宽，长轮询存在后端线程占用和延迟等问题。
SSE 提供了一种更好的实时通信方式，它基于 HTTP 协议和标准的服务器响应格式，并在浏览器端提供了一个接口，简化了前端实时通信的开发。
示例
服务端示例
-- -------------------- ---- -------
----- ---- - ----------------
--------------------------- --------- -- -
---------------------------------- ---------------------
----------------------------------- ------------
-------------- -- -
--------------------- ----- ----------------------------
-- ------
----------------
------------------- ------- -- -------------------------这是一个简单的 Node.js 服务端示例，它会每秒钟向客户端推送当前的时间字符串。
客户端示例
const source = new EventSource('http://localhost:8080/');
source.addEventListener('message', event => {
console.log(event.data);
});这是一个简单的客户端示例，它监听了 SSE 的 message 事件，并将推送的数据打印到控制台中。
深入了解 SSE
SSE 格式
SSE 采用了一种很简单的格式。服务端根据以下三个关键词以及自定义的数据部分构建 SSE：
data：表示消息内容event：表示事件名称id：表示消息 ID
这些关键词需要以冒号结尾，并紧随数据部分。例如：
data: hello world!\n\n
这个消息将会被解释为：消息内容为 "hello world!"，事件名称和消息 ID 都为空。
服务端通过响应头的 Content-Type 声明响应的数据格式为 text/event-stream，客户端收到数据后自动解析为 SSE 事件。
使用 SSE
SSE 包含两个主要的 JavaScript 接口：
- EventSource：用于实例化 SSE 连接，以监听服务端的消息。
- Server-Sent Event：一般指通过 SSE 发送的数据，可以包含 data、event 和 id 三个属性。
实例化 EventSource
我们可以使用 EventSource 构造器来创建一个 SSE 连接：
const source = new EventSource(url, options);
url：连接的服务器 URL。
options：一个可选的配置对象，用来指定 SSE 连接的一些选项，例如 HTTP 额外的请求头、重连延迟等，具体选项参考 MDN。
监听事件
source.addEventListener(type, listener);
type：要监听的事件类型，可以是 message、open 和 error。
listener：用于处理该事件的回调函数。
你也可以使用 removeEventListener() 方法来移除监听。
关闭连接
source.close();
该方法用于关闭 SSE 连接。
总结
SSE API 可以让前端实时通信开发更加简单和高效。在使用 SSE 的过程中，服务端需要使用符合 SSE 规范的响应格式，而客户端则需要使用浏览器提供的 EventSource API 来监听和处理服务端的推送事件。
对于前端开发人员来说，了解和掌握 SSE 技术可以使得实时通信的开发更加容易，也更有逻辑性。同时，对于要求实时通信的应用场景，SSE 可以是一个很好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b0b5e48841e98947f4056