SSE（Server-Sent Events）是一种服务器发送事件的方式，可以用于在 Web 浏览器中实现实时更新、实时通知和单向通信等功能。SSE 是一种基于 HTTP 的技术，它不像 WebSocket 那样实现了应用层协议，因此可以使用大多数 Web 服务器和 Web 浏览器。
事件发起机制
SSE 事件由服务器主动发起，起始点是由客户端向服务器发送一次 HTTP 请求。服务器在接到请求后，通过 HTTP 响应头信息的 Content-Type 字段指定 MIME 类型为 text/event-stream，表明这是一种 SSE 事件流。在事件流中，每一个事件使用 event, data 和 id 三个字段来描述。
event表示事件名称；data表示事件数据，可以是一段文本，也可以是一段 JSON 代码；id表示事件的唯一 ID，用于保证事件的顺序性和防止重复事件的产生。
下面是一个简单的 SSE 事件流示例：
const sseUrl = "/sse";
const eventSource = new EventSource(sseUrl);
eventSource.addEventListener("message", event => {
const data = JSON.parse(event.data);
console.log(`Received ${data.event}: ${data.data}`);
});在这个例子中，EventSource 是 JavaScript 中用来捕获 SSE 事件的对象，它的构造函数参数是 SSE 事件的 URL。在 addEventistener 方法中，我们可以对不同的事件进行监听。
事件监听机制
在监听 SSE 事件时，我们需要注意以下的两个概念：
lastEventId：客户端已经接收到的最后一个事件的 ID；retry：为客户端重新连接服务器的时间间隔。
在每个事件中，会包含一个 id 字段，客户端需要将这个 id 与 lastEventId 进行比较，以确保不会遗漏任何事件。同时，如果客户端没有收到事件，服务器可以通过 retry 字段指定客户端重新连接服务器的时间间隔。
下面是一个 SSE 事件的监听示例：
-- -------------------- ---- -------
----- ----------- - --- --------------------
--------------------- - ----- -- -
----- ---- - -----------------------
--------------------- -------------- ---------------
--
------------------- - ----- -- -
-- ----------------- --- ------------------- -
------------------------- ---- ---------
-
--在这个例子中，我们通过 onmessage 和 onerror 两个事件监听器监听 SSE 事件的产生和错误发生。
指导意义
SSE 对于实现实时交互、实时通知、实时监控等场合都非常有用，尤其是在使用浏览器作为客户端的 Web 应用场景中更具有广泛的适用性。使用 SSE 技术实现实时应用，并不需要使用更为复杂的 WebSocket 技术，因此更加容易实现和开发。
当然，SSE 也有一些不足之处：
- SSE 只能实现单向通信；
- SSE 只能使用基于 HTTP 的协议。
不过，在许多 Web 应用场合中，这些不足之处并不会对应用造成大的影响。
总结
本文介绍了 SSE 的事件发起和事件监听机制，同时也对 SSE 技术的适用场景和不足之处进行了探讨。SSE 技术虽然不及 WebSocket 普及，但它为许多 Web 应用提供了一个简单而有效的实时通信方案，而且易于实现和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64699088968c7c53b097164c