MDN项目：Server-Sent Events技术详解与实战指南
2025-07-07 02:05:32作者：牧宁李
什么是Server-Sent Events
Server-Sent Events（SSE）是一种服务器向客户端推送实时数据的技术，它基于HTTP协议实现单向通信。与WebSocket不同，SSE专门设计用于服务器向浏览器单向推送数据，适用于股票行情、新闻推送、实时日志等场景。
核心API：EventSource
SSE的核心是EventSource接口，它提供了与服务器建立连接和处理事件的能力。
建立连接
// 基本用法
const eventSource = new EventSource("服务器端点URL");
// 跨域用法
const eventSource = new EventSource("//api.example.com/sse", {
withCredentials: true // 携带凭据
});
事件监听
SSE支持两种事件处理方式：
- 默认消息事件（无event字段的消息）
eventSource.onmessage = (event) => {
console.log("收到消息:", event.data);
};
- 自定义事件（带event字段的消息）
eventSource.addEventListener("statusUpdate", (event) => {
const data = JSON.parse(event.data);
console.log("状态更新:", data.status);
});
服务器端实现要点
服务器端需要遵循特定格式发送事件流：
- 设置正确的响应头：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
- 事件流格式示例（PHP）：
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
$currentTime = date('Y-m-d H:i:s');
// 发送普通消息
echo "data: 当前服务器时间: {$currentTime}\n\n";
// 发送自定义事件
echo "event: serverTime\n";
echo "data: {\"time\": \"{$currentTime}\"}\n\n";
flush();
sleep(1);
}
高级特性
事件重连机制
SSE内置自动重连机制，可通过以下方式控制：
- 设置重连时间（毫秒）：
retry: 10000
- 事件ID（用于断线续传）：
id: 12345
错误处理
eventSource.onerror = (error) => {
console.error("连接错误:", error);
// 可在此处实现自定义重连逻辑
};
连接管理
// 关闭连接
eventSource.close();
// 检查连接状态
console.log(eventSource.readyState); // 0=CONNECTING, 1=OPEN, 2=CLOSED
性能优化与注意事项
-
HTTP/2优势：在HTTP/2下，SSE连接数限制大幅提升（默认100个流）
-
浏览器限制：
- 同一域名下最多6个并发SSE连接
- 不同标签页共享连接数限制
-
心跳机制：定期发送注释保持连接
: 心跳保持
- 数据格式建议：
- 简单消息直接使用data字段
- 复杂数据建议使用JSON格式
- 多行数据会自动合并
实际应用场景
- 实时通知系统：新消息提醒、系统警报
- 数据监控仪表盘：实时展示服务器指标
- 新闻/社交媒体：实时推送新内容
- 进度报告：长时间操作的任务进度
常见问题解决方案
-
连接数限制：
- 使用HTTP/2协议
- 合并多个数据流
- 不同子域名分散连接
-
数据解析问题：
- 确保正确使用双换行分隔消息
- 处理多行数据时注意换行符
-
连接稳定性：
- 实现客户端重连逻辑
- 服务器端添加心跳机制
通过本文的详细介绍，开发者可以全面掌握Server-Sent Events技术，实现高效的服务器到客户端的实时数据推送功能。
