第一章：SSE 概述¶

什么是 SSE？¶

SSE（Server-Sent Events）服务器推送事件：

单向通信：服务器向客户端推送
基于 HTTP：无需特殊协议
自动重连：浏览器自动重连
文本格式：传输文本数据

SSE vs WebSocket¶

特性	SSE	WebSocket
通信方向	单向（服务器→客户端）	双向
协议	HTTP	WebSocket
重连	自动	手动
数据格式	文本	文本/二进制
适用场景	推送通知、实时更新	聊天、游戏

SSE 消息格式¶

data: 第一行数据
data: 第二行数据
id: 123
event: message
retry: 3000

字段说明¶

字段	说明
data	消息内容（可多行）
id	消息 ID（用于重连）
event	事件类型
retry	重连间隔（毫秒）

客户端使用¶

EventSource API¶

// 创建连接
const eventSource = new EventSource('/events');

// 监听消息
eventSource.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

// 监听特定事件
eventSource.addEventListener('custom', (event) => {
    console.log('自定义事件:', event.data);
});

// 错误处理
eventSource.onerror = (error) => {
    console.error('连接错误:', error);
};

// 关闭连接
eventSource.close();

带参数连接¶

const eventSource = new EventSource('/events?channel=updates');

使用 withCredentials¶

const eventSource = new EventSource('/events', {
    withCredentials: true  // 发送 Cookie
});

服务端响应头¶

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

应用场景¶

实时通知：系统消息推送
数据监控：实时数据更新
日志流：实时日志输出
AI 对话：流式响应输出

小结¶

本章学习了：

✅ SSE 概念
✅ SSE vs WebSocket
✅ 消息格式
✅ 客户端使用
✅ 应用场景

下一章¶

第二章：SSE 实现 - 学习服务端实现。