SSE是基于HTTP的服务器向浏览器推送技术，使用EventSource API实现，适合日志、通知等场景。前端通过onmessage和addEventListener接收消息，后端以text/event-stream类型发送数据，每条消息以\n\n结尾，支持事件类型与自动重连。Node.js可用Express写入流式响应，Nginx需关闭缓冲，服务端可发心跳防超时，消息可通过id标识与Last-Event-ID恢复，实现简单高效的实时更新。
服务器推送事件（Server-Sent Events，简称 SSE）是一种让服务器通过 HTTP 连接持续向浏览器推送数据的技术。相比 WebSocket，SSE 更轻量、使用简单，适用于日志实时更新、通知推送、股票行情等场景。本文带你实战 JavaScript 中的 SSE 技术，掌握其核心用法与常见问题处理。
什么是 SSE？
SSE 基于 HTTP 协议，允许服务器单向向客户端发送文本数据流。客户端使用 EventSource API 接收消息，连接自动重连，支持事件类型区分，适合服务端主动推送更新的场景。
与 WebSocket 不同，SSE 是单向通信（仅服务端 → 客户端），但胜在简单、兼容性好、可利用现有 HTTP 机制（如认证、CORS）。
前端：使用 EventSource 接收推送
JavaScript 提供了原生的 EventSource 接口，使用非常直观：
立即学习“Java免费学习笔记（深入）”；
const eventSource = new EventSource('/api/stream');
eventSource.onmessage = function(event) {
console.log('收到消息:', event.data);
};
eventSource.addEventListener('notification', function(event) {
console.log('通知:', event.data);
});
eventSource.onerror = function(err) {
console.error('SSE 连接出错', err);
};
说明：
- onmessage：监听默认消息（无指定事件类型）
- addEventListener：监听自定义事件类型，如 'notification'
- onerror：错误处理，连接断开会自动尝试重连
后端：Node.js 实现 SSE 接口
以 Express 为例，实现一个简单的 SSE 接口：
app.get('/api/stream', (req, res) => {
// 设置响应头
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*'
});
// 发送一条普通消息
res.write('data: 欢迎连接到 SSE 服务\n\n');
// 定时推送时间
const interval = setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
}, 1000);
// 自定义事件推送
setInterval(() => {
res.write('event: notification\n');
res.write('data: 系统有新消息提醒\n\n');
}, 5000);
// 客户端断开时清理
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
关键点：
- 必须设置 Content-Type: text/event-stream
- 每条消息以 \n\n 结束
- 可用 event: 指定事件名，data: 发送内容
- 保持连接不关闭，直到客户端断开
实际应用中的注意事项
SSE 虽然简单，但在生产中需要注意以下几点：
- 反向代理配置：Nginx 需关闭缓冲并设置 proxy_buffering off;，否则消息延迟
- 连接超时：合理设置心跳或服务端定时发送注释消息（:ping\n\n）防止超时
- 客户端重连控制：EventSource 默认自动重连，可通过 onerror 判断是否需要手动终止
- 消息顺序与标识：可通过 id: 字段标记消息 ID，浏览器会记录最后接收的 ID，重连时通过 Last-Event-ID 请求头恢复
基本上就这些。SSE 技术门槛低、调试方便，特别适合不需要双向通信的实时场景。只要前后端配合好协议格式和连接管理，就能快速实现稳定的消息推送功能。
