sse通过eventsource实现服务器单向推送,需服务端返回text/event-stream类型、no-cache缓存策略及严格data:格式消息;前端监听onmessage或自定义事件,支持自动重连;生产中须处理跨域、https、代理超时等问题。

SSE(Server-Sent Events)在 JavaScript 中实现服务器单向推送,核心是用 EventSource 建立持久 HTTP 连接,让后端持续发数据、前端自动接收并更新,不需轮询也不刷新页面。
服务端必须满足的三个基础条件
浏览器只认标准 SSE 响应格式,缺一不可:
-
Content-Type 必须为
text/event-stream -
Cache-Control 必须设为
no-cache(防止代理或浏览器缓存中断流) -
数据分块格式 必须严格:每条消息以
data:开头,结尾用两个换行符\n\n;支持可选字段如event:、id:、retry:
前端用 EventSource 接收并处理消息
原生 API 简洁可靠,自动重连、自动解析流格式:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 创建连接:
const es = new EventSource('/api/events')(路径需和服务端一致) - 监听普通消息:
es.onmessage = e => { const data = JSON.parse(e.data); updateUI(data) } - 监听自定义事件(如
event: cpu-alert):es.addEventListener('cpu-alert', e => {...}) - 连接异常时默认会重试(约 3 秒后),也可监听
es.onerror做日志或降级提示
服务端推送的典型写法(以 Node.js/Express 为例)
关键不是“发一次”,而是保持连接打开、按节奏持续写入:
- 设置响应头:
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }) - 禁用框架自动结束响应(如 Koa 要设
ctx.respond = false) - 发送一条消息示例:
res.write(`data: ${JSON.stringify({ temperature: 26.4, unit: '°C' })}\n\n`) - 用
setInterval或事件触发持续推送,避免调用res.end()(除非明确要关闭)
生产环境要注意的细节
看似简单,但几个点容易出问题:
-
跨域:若前端和后端域名不同,服务端必须加
Access-Control-Allow-Origin头(值不能为*当带凭证时) - HTTPS 下的兼容性:现代浏览器要求 HTTPS 环境下 SSE 才能稳定工作,HTTP 仅限本地开发
-
连接保活:有些反向代理(如 Nginx)默认 60 秒断连,需配置
proxy_read_timeout和proxy_buffering off -
客户端参数透传:URL 支持拼 query(如
/api/events?userId=123),服务端可据此做个性化推送
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










