EventSource建立SSE连接本质是创建浏览器到服务器的单向HTTP长连接，用于服务器向客户端推送文本事件流，具备轻量、原生支持、自动重连特性，适用于实时通知、日志流等场景。
用 EventSource 建立 SSE（Server-Sent Events）连接，本质是创建一个浏览器到服务器的单向、长连接通道，只用于服务器向客户端推送文本事件流。它基于 HTTP，轻量、原生支持、自动重连，适合实时通知、日志流、状态更新等场景。
前端：用 EventSource 创建连接并监听事件
EventSource 是浏览器原生 API，使用简单：
- 传入服务端提供的 SSE 接口 URL（必须是同源或配置了 CORS）
- 监听
message（默认事件）、open（连接建立）、error（连接异常）等事件 - 每个收到的事件是一个
MessageEvent，数据在e.data中（字符串）
示例：
const es = new EventSource('/api/events');
es.onopen = () => console.log('SSE 连接已建立');
es.onmessage = (e) => {
console.log('收到普通消息:', e.data); // e.data 是字符串，需自行 JSON.parse
};
es.addEventListener('user-update', (e) => {
console.log('收到自定义事件 user-update:', JSON.parse(e.data));
});
es.onerror = (err) => {
console.error('SSE 连接出错:', err);
};
注意：EventSource 默认每 3 秒自动重连（可由服务端通过 retry: 字段控制），且不支持自定义请求头（如 Authorization），如需鉴权建议用 cookie 或 URL 参数传 token。
立即学习“Java免费学习笔记（深入）”；
后端：按 SSE 协议格式返回流式响应
SSE 要求响应满足三点：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- HTTP 状态码为 200（或其他成功码）
- 响应头包含
Content-Type: text/event-stream和Cache-Control: no-cache - 响应体按行发送事件，每条事件以
data:、event:、id:、retry:开头，空行分隔不同事件
例如 Node.js（Express）示例：
app.get('/api/events', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 每 2 秒推送一条消息
const interval = setInterval(() => {
const data = JSON.stringify({ time: new Date().toISOString(), msg: 'hello' });
res.write(`event: message\n`);
res.write(`data: ${data}\n\n`);
}, 2000);
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
关键细节：data: 行可出现多次，最终拼成完整消息；每条消息末尾必须有两个换行符（\n\n）；id: 用于断线重连时服务端定位最后位置；retry: 单位毫秒，告诉浏览器重连间隔。
常见问题与规避技巧
实际使用中容易踩坑：
-
跨域限制：若接口跨域，服务端必须设置
Access-Control-Allow-Origin（不能用*，若需凭据则必须指定域名）和Access-Control-Allow-Credentials: true -
连接数限制：浏览器对同一域名的
EventSource连接数有限制（通常 6 个），避免频繁新建实例，用完记得es.close() -
数据解析：所有
e.data都是字符串，即使发的是 JSON，也得手动JSON.parse；服务端确保data:后内容不包含换行，否则会被截断 -
超时与心跳：部分代理（如 Nginx）默认 60 秒断连，可在服务端定期发送注释行（
: keep-alive\n\n）或空data:\n\n维持连接
对比 WebSocket：何时选 SSE？
SSE 不是 WebSocket 的替代品，而是互补方案：
- 选 SSE：只需服务器推、不需要双向通信、希望兼容性好（支持所有现代浏览器，包括 Safari）、开发成本低（纯 HTTP，无需额外协议）
- 选 WebSocket：需要双向实时交互（如聊天、协同编辑）、对延迟极度敏感、要二进制传输或更细粒度控制连接生命周期
SSE 天然支持 HTTP 缓存、负载均衡、CDN，调试也方便（直接 curl 或浏览器访问接口就能看到流式输出），适合「广播型」而非「会话型」场景。
