1. 简介
SSE（Server-Sent Events） 是 HTML5 中定义的一种技术，用于服务器向客户端单向推送数据。客户端可以通过监听事件的方式实时接受服务器端推送的消息，实现了服务器与客户端之间的实时通讯。
与 WebSocket 相比，SSE 主要用于单向传输数据，不需要双方进行握手等复杂的交互过程，因此可以更快地建立连接和传输数据，适用于服务器向客户端发送实时事件通知、即时信息更新等场景。
在前端开发中，使用 SSE 不仅可以提高数据传输的效率，还可以提供更好的用户体验，本文将详细介绍 SSE 的使用及优势。
2. SSE 的使用
2.1 SSE 的 API
SSE 的 API 非常简单，只需通过 EventSource 对象创建一个 SSE 连接即可，如下所示：
// 创建 SSE 连接
var source = new EventSource('url');
// 监听服务器推送消息事件
source.addEventListener('event', function(event) {
// 处理服务器推送的消息数据
}, false);其中，'url' 是服务器端向客户端推送消息的地址，可以是一个静态文件，也可以是一个动态脚本。服务器端需要以特定的格式向客户端推送数据，如下所示：
# 返回数据格式 data: message # 返回事件格式 event: event data: message
data 行表示消息数据，event 行表示消息事件类型，可以为空。注意每行末尾需要加上一个换行符。
2.2 SSE 的兼容性
SSE 只在较新的浏览器中支持，主流浏览器均支持该技术，但是在 Internet Explorer 和 Microsoft Edge 浏览器中不兼容。为解决兼容性问题，可以使用 polyfill 或第三方库实现 SSE 功能。
3. SSE 的优势
3.1 实时传输数据
SSE 可以实时向客户端传输数据，客户端可以即时接受服务器端推送的消息，避免了客户端不停地向服务器发送请求和等待响应的过程，大大节省了带宽和服务器资源。
3.2 构建简单
与 WebSocket 相比，SSE 的连接建立和数据传输都比较简单，不需要复杂的握手协议和连接状态管理，因此开发起来更容易上手。
3.3 实现灵活
SSE 的消息格式可以自定义，可以自由选择推送数据的内容和格式，可以根据实际需求进行灵活定制，在各种场景下都可以有非常好的应用效果。
3.4 兼容性强
虽然在 Microsoft Edge 和 Internet Explorer 浏览器中不支持 SSE，但是在其它主流浏览器中兼容性较好，使用 polyfill 或第三方库可以解决兼容性问题。
4. 示例代码
以下是一个简单的 SSE 示例代码，通过 Flask 构建 SSE 服务器，向客户端发送实时时间信息和事件类型。
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ----
--- - ---------------
------------------
--- ------
--- ---------
----- -----
----- ------- -------
----- ------ ---------------------------
-------------
------ ------------------ -----------------------------客户端代码如下：
var source = new EventSource('/sse');
source.addEventListener('time', function(event) {
console.log(event.data); // 打印服务器推送的时间信息
}, false);启动服务器后，打开浏览器访问该服务器地址，即可在控制台中不停输出时间信息。
5. 总结
SSE 技术可以帮助我们实现实时传输数据，构建简单，灵活度高，兼容性强，适用于实时通讯、消息通知、即时信息更新等场景。虽然在部分浏览器上不兼容，但是可以使用 polyfill 或第三方库解决兼容性问题。希望本文对各位前端开发者有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64797a6e968c7c53b057b275