下文笔者讲述"text/event-stream"类型的简介说明,如下所示
text/event-stream简介
`text/event-stream`是一种用于
服务器推送事件(Server-Sent Events, SSE)HTTP响应内容类型。
它允许服务器向客户端(通常是浏览器)持续地发送数据流
实现【实时更新】功能
text/event-stream基本定义
-MIME类型:`text/event-stream`
-协议:基于HTTP长连接(非WebSocket)
-通信方向:单向,仅支持服务器--->客户端
-适用场景:股票行情、聊天消息、通知推送、日志输出等需要实时更新的场景
text/event-stream、SSE 协议格式(Event Stream 格式)
每个事件由若干字段组成
以 `\n\n` 分隔
data: Hello, world!\n\n
或带 ID 和事件类型:
id: 12345
event: message
data: {"content": "New message received"}
retry: 10000
\n\n
text/event-stream字段说明
字段 | 描述 |
[data] | 必填项,事件内容 |
[id] | 可选,事件 ID,用于断线重连时恢复位置 |
[event] `retry` | 可选,客户端重连间隔(毫秒) |
前端使用方式(JavaScript)
使用`EventSource` API 接收服务器推送的消息:
const eventSource = new EventSource('http://example.com/sse');
eventSource.addEventlistener('message', function(event) {
console.log('收到消息:', event.data);
});
eventSource.addEventListener('open', function() {
console.log('连接已建立');
});
eventSource.addEventListener('error', function(err) {
console.error('发生错误:', err);
});
后端示例(Spring Boot)
@GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> sse() {
return Flux.interval(Duration.ofSeconds(1))
.map(seq -> "当前时间戳:" + System.currentTimeMillis());
}
或
使用 `SseEmitter`:
@GetMapping("/sse-emitter")
public SseEmitter sseEmitter() {
SseEmitter emitter = new SseEmitter(60_000L); // 超时时间
Executors.newScheduledThreadPool(1).scheduleAtFixedRate(
() -> {
try {
emitter.send("Hello from server at " + System.currentTimeMillis());
} catch (IOException e) {
emitter.complete();
}
},
0, 1, TimeUnit.SECONDS
);
return emitter;
}
text/event-stream与WebSocket对比
特性 | `text/event-stream`(SSE) | WebSocket |
协议 | HTTP | 自定义 TCP |
通信方向 | 单向(服务器 → 客户端) | 全双工 |
是否自动重连 | ✅ 支持 | ❌ 需手动实现 |
浏览器兼容性 | 现代浏览器支持良好 | 同样良好 |
开发复杂度 | 简单 | 相对复杂 |
使用场景 | 实时通知、日志推送等 | 实时聊天、双向交互 |