SSE是服务器向浏览器单向推送数据的技术，基于HTTP、使用EventSource API实现，适合实时更新场景。1. 前端通过new EventSource()连接后端接口，onmessage接收数据；2. 后端返回Content-Type为text/event-stream，按格式发送data、event、id、retry字段；3. 支持自定义事件监听与断线重连，浏览器自动携带Last-Event-ID恢复；4. 适用于日志监控、行情推送等服务端频繁推送场景，但不支持二进制和IE，需注意代理缓冲配置。
服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器通过HTTP连接将数据“推送”到浏览器的技术。与WebSocket不同，SSE是单向的——仅从服务器到客户端，适合用于实时更新场景，比如股票行情、新闻推送、日志监控等。JavaScript中的EventSource API为实现SSE提供了原生支持，使用起来简单高效。
基本用法：建立SSE连接
在前端JavaScript中，只需创建一个EventSource实例并指向后端提供的SSE接口即可：
const eventSource = new EventSource('/api/stream');
eventSource.onmessage = function(event) {
console.log('收到消息:', event.data);
// 更新页面内容
document.getElementById('output').innerText += event.data + '\n';
};
eventSource.onerror = function(err) {
console.error('SSE连接出错:', err);
};
只要服务器保持连接，后续推送的消息都会触发onmessage回调。
后端实现：发送符合格式的数据
SSE要求服务器返回的内容类型为text/event-stream，并且消息需遵循特定格式。每条消息可以包含以下字段：
立即学习“Java免费学习笔记（深入）”；
- data: 消息正文
- id: 事件ID，用于断线重连时定位位置
- event: 自定义事件名称（可选）
- retry: 重连间隔（毫秒）
例如Node.js（Express）后端示例：
app.get('/api/stream', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const sendEvent = (data) => {
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
// 模拟定时推送
const interval = setInterval(() => {
sendEvent({ time: new Date().toISOString(), value: Math.random() });
}, 2000);
// 客户端断开时清理
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
处理自定义事件和断线重连
除了默认的message事件，服务器还可以发送自定义事件：
// 后端发送
res.write('event: notification\ndata: {"msg": "新通知"}\n\n');
前端监听该事件：
eventSource.addEventListener('notification', function(event) {
const data = JSON.parse(event.data);
alert('提醒：' + data.msg);
});
浏览器会自动尝试重连（默认约3秒），可通过retry字段调整：
res.write('retry: 5000\n');
若设置了id，浏览器会在重连请求中携带Last-Event-ID头，可用于恢复断点。
适用场景与注意事项
SSE适用于服务端频繁推送、客户端只读的场景，优势在于基于HTTP、兼容性好、自动重连、轻量。但注意以下几点：
- 每个EventSource连接对应一个HTTP/1.1长连接，过多连接可能影响服务器性能
- 不支持二进制数据，只能传输UTF-8文本
- IE和旧版浏览器不支持EventSource，必要时可用polyfill
- 反向代理（如Nginx）需配置关闭缓冲，防止延迟输出
基本上就这些，SSE是一种简单实用的实时通信方案，尤其适合不需要双向交互的推送需求。
