什么是 Server-sent Events？
Server-sent Events（SSE）是一种在 Web 浏览器中实现实时推送技术的方法。在 SSE 技术中，浏览器会与服务器建立持久性连接，服务器可以通过该连接在任何时候向客户端发送新数据。SSE 可以用于实现多种实时数据推送场景，例如即时消息、股票价格更新、实时数据展示等。
与传统的长轮询（long-polling）技术相比，SSE 更加轻便且易于实现，并且在性能和稳定性方面都有很大的优势。
如何使用 Server-sent Events？
在 HTML5 中实现 SSE 非常简单。首先，需要使用 JavaScript API 的 EventSource 对象来建立 SSE 连接：
const source = new EventSource('/stream');在上面的代码中，'/stream' 是服务器端的 SSE 推送接口。当 source 对象被创建后，它会自动建立与服务器端的长连接，并开始接收来自服务器端的数据。当有新数据到达时，会触发 source 对象的 message 事件，我们可以通过绑定该事件并读取数据来处理新数据。
const source = new EventSource('/stream');
source.addEventListener('message', function(event) {
console.log(event.data);
});这里的 event.data 就是从服务器端推送来的新数据。
将上面的代码放入 Web 页面中，浏览器即可与服务器端建立 SSE 连接，并实现实时推送。同时，服务器端需要定时向客户端推送新数据。
SSE 的 Server 端实现
SSE 的 Server 端实现使用的是纯 HTTP 协议，因此它适用于基于多种语言和框架的 Web 应用开发。
以 Node.js 为例，下面是一个 SSE 推送数据的简单实现：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --- - --- -------
---------------- - - ------------------------ - --------
-- ------
----------------上面的代码中，我们创建了一个 HTTP 服务器，并在每隔 1 秒钟向客户端推送当前时间。在推送数据时，需要注意：
- 输出的数据需要使用“data:”开头，并以一个空行“\n\n”结尾；
- HTTP 响应的 MIME 类型需要设置为“text/event-stream”；
- HTTP 响应头需要设置以下两个字段：
- Cache-Control: no-cache
- Connection: keep-alive
这样可以保证 SSE 连接一直保持打开状态，直到客户端关闭浏览器或者服务器主动断开连接为止。
Server-sent Events 的局限性
虽然 SSE 在实现实时推送数据的场景中具有很大优势，但同时也有它的局限性：
- SSE 只能从服务器端向客户端发送数据，无法实现双向通信；
- SSE 只能推送文本数据，无法直接推送二进制数据，需要通过 Base64 编码等方式转换成文本数据；
- SSE 在某些浏览器（例如 IE）中不支持，需要使用 polyfill 库进行兼容处理。
综上所述，我们需要根据实际场景和要求，选择合适的数据推送技术。对于需要实现双向通信的应用，WebSocket 可能更适合；对于需要高度兼容各种浏览器的应用，长轮询等方案可能更适合。
总结
本文介绍了 HTML5 推送技术 Server-sent Events 的实现方法及其应用场景。与传统的长轮询技术相比，SSE 通过建立持久性连接、直接推送数据等方式，在性能和稳定性方面都有很大优势。但同时，SSE 也存在一些局限性，需要根据实际场景进行选择。SSE 在 Web 开发中的应用非常广泛，我们可以根据文中的代码示例和说明进行实践和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb4927f6b2d6eab35e5c5a