简述
SSE（Server-Sent Events），中文名为“服务器推送事件”，是一种基于 HTTP 的服务器推送技术，可以用来实现客户端的实时监控和告警。与传统的轮询方式相比，SSE 可以大幅降低服务器资源消耗，提高客户端体验。
实现原理
SSE 的实现原理比较简单，客户端通过在 HTML 页面中创建一个 EventSource 对象来与服务端建立长连接，服务端定期向客户端发送事件数据。在客户端接收到事件数据后，就可以根据事件的类型进行相应的处理，比如更新页面内容或者弹出告警框。
SSE 使用的是“文本流”（text/event-stream）协议，每个事件由一组固定的字段组成，格式如下：
event: <event-name> data: <event-data>
其中，event-name 是事件的名称，用来标识事件类型；event-data 是事件的内容，可以是任意格式的文本，比如 JSON 或 XML。
服务端可以通过发送多个事件来实现不同的功能，每个事件可以有自己的 event-name 和 event-data。
示例代码
服务端
下面是一个使用 Node.js 实现的 SSE 服务端示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------- -- -
----- --- - --- -------
----- ---- - -----------------------------------------------------------------
----------------- ---------
---------------- --------------
-- ------
----------------该代码会在本地启动一个 HTTP 服务器，每秒钟向客户端发送一个名为“time”的事件，事件内容为当前时间。
客户端
下面是一个使用 JavaScript 实现的 SSE 客户端示例代码：
const source = new EventSource('/time');
source.onmessage = function (event) {
const data = JSON.parse(event.data);
document.getElementById('time').innerHTML = data.time;
};该代码会在 HTML 页面中创建一个 EventSource 对象，并监听名为“time”的事件。当客户端接收到事件数据时，会更新页面中 id 为“time”的元素的内容。
优点
相比于传统的轮询方式，SSE 有以下几个优点：
- 减少了服务器资源消耗。由于采用了长连接，服务端只需要在有事件发生时才推送数据，大大降低了服务器的负载。
- 提高了客户端体验。因为实时监控和告警需要尽可能快地响应事件，使用 SSE 可以保证客户端接收事件的延迟尽可能小。
- 更简单的实现方式。SSE 的实现比较简单，只需要使用一个 EventSource 对象和几行 JavaScript 代码就可以完成。
注意事项
在使用 SSE 的过程中，我们需要注意以下几点：
- SSE 不是 WebSocket。虽然 SSE 也使用了长连接来实现服务器推送，但它不同于 WebSocket，不能实现双向通信。
- SSE 需要较新的浏览器支持。虽然 SSE 是标准的一部分，但是它需要浏览器支持 EventSource 对象，一些比较老的浏览器可能不支持 SSE。
- SSE 需要服务器支持。服务端需要能够支持“文本流”协议，并且能够发送事件数据。
总结
SSE 可以用来实现客户端的实时监控和告警，相比传统的轮询方式，SSE 能够减少服务器资源消耗，提高客户端体验，并且更容易实现。我们可以根据具体的需求来选择使用 SSE，不过在使用 SSE 的过程中，也需要注意一些细节和注意事项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0847bb5eee0b525774d91