SSE是服务器向浏览器单向推送数据的技术，使用EventSource建立连接，通过text/event-stream格式持续发送消息，适合实时通知等场景。
服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器通过HTTP连接向浏览器推送数据的技术。与WebSocket不同，SSE是单向通信，只允许服务器向客户端推送消息，适合用于实时通知、动态更新等场景，比如股票行情、新闻推送或日志监控。
前端如何使用JavaScript建立SSE连接
在浏览器中，使用EventSource对象可以轻松连接支持SSE的服务器。
- 创建 EventSource 实例，传入服务器端的URL
- 监听 message 事件接收推送数据
- 可选：监听 error 或自定义事件处理异常或特定消息
示例代码：
const eventSource = new EventSource('/api/sse');
eventSource.onmessage = function(event) {
console.log('收到消息:', event.data);
// 更新页面内容
document.getElementById('output').innerText += event.data + '\n';
};
eventSource.onerror = function(event) {
console.error('SSE连接出错', event);
// 浏览器会自动尝试重连
};
后端如何实现SSE响应（以Node.js为例）
SSE要求服务器返回特定格式的内容类型，并保持连接长期打开。以下是使用Express的简单实现。
立即学习“Java免费学习笔记（深入）”；
关键点：
- 设置响应头 Content-Type 为 text/event-stream
- 禁用缓存（Cache-Control: no-cache）
- 保持连接不关闭，可定时或按需发送数据
- 消息格式遵循SSE规范（如 data: xxx\n\n）
Node.js + Express 示例：
app.get('/api/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 每隔3秒推送一条消息
const interval = setInterval(() => {
const data = { time: new Date().toISOString() };
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 3000);
// 客户端断开时清理资源
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
SSE消息格式和自定义事件
SSE支持发送标准消息和自定义事件，服务器可以通过不同的字段控制消息行为。
常见字段：
- data: 消息正文，可多行（以 \n 分隔）
- event: 自定义事件名，前端用 addEventListener 监听
- id: 消息ID，用于断线重连时定位位置
- retry: 重连时间（毫秒）
服务器发送自定义事件：
res.write('event: notification\ndata: {"msg": "新消息提醒"}\nid: 101\n\n');
前端监听：
eventSource.addEventListener('notification', function(event) {
console.log('收到通知:', event.data);
});
基本上就这些。SSE使用简单，兼容性好，适合不需要双向通信的推送场景。只要注意保持连接稳定、合理处理错误和重连，就能实现实时更新功能。不复杂但容易忽略细节，比如头部设置和换行格式。
