SSE是基于HTTP的服务器单向推送技术，通过text/event-stream格式持续发送数据，客户端用EventSource自动重连接收；适用于通知、日志等实时更新场景，实现简单、资源消耗低。
SSE（Server-Sent Events）是浏览器原生支持的单向实时通信机制，适合服务端主动向页面推送更新（如通知、日志、状态变化），无需轮询或建立 WebSocket 连接。实现页面无刷新实时更新，关键在于后端持续输出符合 SSE 格式的文本流，前端用 EventSource 接收并响应。
后端按 SSE 协议输出数据（以 Express 为例）
SSE 要求响应头必须包含 Content-Type: text/event-stream，且每次发送需以 data: 开头，每条消息以双换行符（\n\n）分隔。连接保持长开，不能自动结束。
- 设置响应头：禁用缓存、指定类型、保持连接
- 每次推送前调用
res.flush()（Express 中需启用res.socket.setNoDelay(true)并确保不压缩） - 可选使用
id:、event:、retry:字段增强控制（如重连间隔）
示例（Node.js + Express）：
app.get('/events', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
<p>// 每 2 秒推送一条消息
const timer = setInterval(() => {
const data = JSON.stringify({ time: new Date().toISOString(), count: Math.floor(Math.random() * 100) });
res.write(<code>data: ${data}\n\n</code>);
res.flush(); // 确保立即发送（Express 4.19+ 可用 res.flush()）
}, 2000);</p><p>req.on('close', () => {
clearInterval(timer);
res.end();
});
});前端用 EventSource 监听并更新 DOM
EventSource 自动处理重连（默认 3 秒），支持 open、message、error 事件。收到消息后解析 event.data，直接操作 DOM 即可实现无刷新更新。
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 创建实例时传入 SSE 接口地址；若需携带凭证（如 cookie），设
{ withCredentials: true } -
message事件对应无event:字段的默认消息；也可监听自定义事件名（如source.addEventListener('update', ...)） - 手动关闭用
source.close()；异常时可通过source.readyState判断状态（0=connecting, 1=open, 0=closed）
示例（HTML + JS）：
<div id="log"></div>
<script>
const source = new EventSource('/events');
<p>source.onopen = () => console.log('SSE 连接已建立');
source.onmessage = (e) => {
const data = JSON.parse(e.data);
const item = document.createElement('div');
item.textContent = <code>更新于 ${data.time} — 计数 ${data.count}</code>;
document.getElementById('log').prepend(item);
};
source.onerror = (err) => console.error('SSE 错误:', err);
</script>注意事项与常见问题
SSE 看似简单，但实际部署中容易踩坑：
- 反向代理（如 Nginx）默认缓冲响应，需配置
proxy_buffering off;和proxy_cache off; - 部分浏览器（如 Safari）对单个域名 SSE 连接数有限制（通常 6 个），避免重复创建未关闭的
EventSource - IE 完全不支持，需降级方案（如轮询）；移动端兼容性良好（Chrome/Firefox/Safari/Edge 均支持）
- 仅支持服务端→客户端单向通信；若需双向，应选 WebSocket
对比轮询和 WebSocket 的适用场景
SSE 不是万能替代品，选择依据是通信模式和需求复杂度：
- 轮询（Polling）：实现简单，但频繁请求浪费带宽和服务器资源，延迟高
- SSE：低延迟、轻量、自动重连，适合「只读」类实时更新（新闻推送、监控仪表盘、订单状态）
- WebSocket：全双工、低延迟、支持二进制，适合聊天、协同编辑、高频交互场景，但服务端开发和运维成本更高
如果只是让页面动态显示最新数据，SSE 是最简洁可靠的方案。
