什么是 Server-sent Events？
Server-sent Events (SSE) 是 HTML5 提供的一种浏览器与服务器之间实现单向实时数据传输的技术。与 WebSocket 类似，SSE 也可以实现服务器推送消息到客户端，但与 WebSocket 不同的是，SSE 是基于 HTTP 协议的，不需要像 WebSocket 那样进行握手协议。
SSE 与 AJAX 相比，最大的优势在于能够实时推送消息，而不是客户端不断地轮询请求，不仅效率低下，同时也会对服务器和网络造成很大的负担。
推荐的优秀开源实现库
在实际开发中，我们可以选择使用已经存在的优秀开源实现库来简化开发。以下是一些值得推荐的 SSE 库。
EventSource
EventSource 是 HTML5 提供的原生 SSE 接口，IE11及其以下版本不支持此接口。 使用 EventSource 非常简单，只需要在客户端 JavaScript 中进行如下代码实现：
const eventSource = new EventSource('/sse/server');
eventSource.onmessage = (event) => {
console.log(event.data);
};客户端通过创建一个 EventSource 对象指向 SSE 接口地址，服务器根据此地址将消息推送到客户端，服务器端的代码如下：
-- -------------------- ---- -------
------ ----
---- ----- ------ ------ --------
--- - ---------------
-------------------------
--- -------------
--- ---------------
----- -----
----- ------- ------------------
-------------
------ ------------------------ -----------------------------其中，使用 Flask 作为服务器端框架，实现了一个 SSE 接口，每隔一秒钟推送一个消息给客户端。 客户端收到消息后，通过 onmessage 事件回调来处理消息。
SSE.js
SSE.js 是一个轻量级的 SSE 库，它提供了多种事件处理函数来处理 SSE 推送的消息，例如：onOpen、onMessage、onError 等。并且它还提供了其他一些功能，例如为 SSE 创建重试机制、支持过滤等。
使用 SSE.js 的代码实现非常简单：
const sse = new SSE('sse/server');
sse.onMessage((event) => {
console.log(event.data);
});
sse.start();和上面的 EventSource 类似，首先需要创建一个 SSE 对象，指向 SSE 的接口地址，并在 onMessage 回调函数中处理服务器推送的消息，最后启动 SSE 连接。
EventSourcePolyfill
EventSourcePolyfill 是一个兼容性比较好的 Event-Source（SSE）polyfill 库，可以兼容 IE9 及其以上版本，适用于各种浏览器情况。使用方法与原生的 EventSource 类似，只需要引入 polyfill 脚本即可。
以下是使用 EventSourcePolyfill 的代码实现：
const eventSource = new EventSourcePolyfill('/sse/server');
eventSource.onmessage = (event) => {
console.log(event.data);
};总结
使用 SSE 技术，可以实现实时的数据传输，通过以上优秀的开源实现库可以让我们的开发效率更高、代码更简洁。在选择使用 SSE 库的时候，可以根据项目需求和浏览器兼容性要求来决定使用哪种方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ffd4548841e9894e21f62