服务器主动向客户端实时推送数据

SSE 是 Server-Sent Events（服务器发送事件）的缩写，是一种允许服务器通过 HTTP 连接向客户端（通常是浏览器）主动推送实时数据的轻量级技术。它是 HTML5 规范的一部分，使用简单、基于文本的协议，特别适合需要单向、持续更新的场景（如通知、行情、日志流）。

核心特点

单向通信：仅服务器可以向客户端发送数据，客户端无法通过同一连接向服务器发送消息（若需双向通信，可使用 WebSocket）。
基于 HTTP：复用现有的 HTTP 协议，无需额外协议或复杂握手。
自动重连：连接断开时，浏览器会自动尝试重新连接，无需额外代码。
文本格式：数据以 text/event-stream 格式传输，支持自定义事件类型和 ID（用于断线续传）。

工作原理

客户端发起连接 使用 JavaScript 的 EventSource 对象，向服务器指定 URL 发起请求：

const source = new EventSource('/stream');
source.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

服务器保持连接并推送数据 服务器设置响应头 Content-Type: text/event-stream，并保持连接打开，然后按格式发送数据块。每条消息以 data: 开头，以两个换行符结束，例如：
```
data: 这是一条消息\n\n
```
也可以包含事件类型和 ID：
```
event: userlogin
data: {"name": "张三"}
id: 1001
```
客户端接收事件 浏览器通过 onmessage 或 addEventListener 监听消息，并实时处理。

与 WebSocket 的对比

特性	SSE	WebSocket
通信方向	单向（服务器→客户端）	双向（全双工）
协议	HTTP	ws / wss（独立协议）
数据格式	纯文本（可包含 JSON）	二进制或文本
自动重连	内置支持	需手动实现
浏览器支持	广泛（IE 除外）	几乎所有现代浏览器
实现复杂度	极低（客户端几行代码）	较高（需处理连接、心跳等）
典型场景	新闻推送、股票价格、服务器日志	聊天室、在线游戏、协同编辑

使用场景

实时通知：如新邮件提醒、系统告警。
数据流推送：股票行情、加密货币价格更新。
日志监控：服务器实时输出日志到前端。
社交媒体动态：如新帖子、点赞实时计数。

注意事项

连接数限制：浏览器对同一域名的并发 SSE 连接数有限制（通常为 6 个）。
兼容性：IE 全系列不支持，Edge 从 79 版本开始支持（基于 Chromium）。对于旧浏览器，可使用 polyfill。
关闭连接：客户端可调用 source.close() 主动断开，服务器端可正常结束响应（或使用超时机制）。

服务器主动向客户端实时推送数据

核心特点

工作原理

与 WebSocket 的对比

使用场景

注意事项

WebRTC 如何让网页实现端到端的通信

PWA - 渐进式网络应用

评论区 (0)

目录