一、SSE协议基础认知

1.1 协议本质与定位

Server-Sent Events（SSE）是HTML5标准定义的轻量级流式通信协议，采用单向服务器推送机制。相较于WebSocket的全双工通信，SSE专注于服务端向客户端的实时数据流传输，特别适合AI对话生成、实时日志监控等场景。其核心优势在于：

基于标准HTTP协议，无需额外端口或协议支持
内置重连机制与事件ID管理
天然支持文本流传输，与JSON/XML等数据格式无缝集成

1.2 协议数据格式

每个SSE消息由多个字段组成，以\n\n分隔消息块，字段格式如下：

event: <event-name>\n
id: <message-id>\n
data: <first-line>\n
data: <second-line>\n
retry: <reconnect-interval>\n
\n

其中data字段可重复出现，服务端通过Content-Type: text/event-stream声明协议类型。

二、服务端实现方案

2.1 基础实现框架

以Node.js为例，核心实现代码如下：

const http = require('http');
http.createServer((req, res) => {
  if (req.url === '/stream') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    // 模拟数据流
    let counter = 0;
    const interval = setInterval(() => {
      counter++;
      res.write(`data: ${JSON.stringify({
        timestamp: Date.now(),
        count: counter
      })}\n\n`);
      if (counter >= 10) {
        clearInterval(interval);
        res.end();
      }
    }, 1000);
    req.on('close', () => clearInterval(interval));
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000);

关键实现要点：

必须设置Connection: keep-alive保持长连接
通过res.write()分块发送数据，末尾添加\n\n分隔符
监听close事件处理客户端异常断开

2.2 生产环境优化

主流云服务商的负载均衡器通常对长连接有特殊配置要求，建议：

心跳机制：每30秒发送注释行:\n\n保持连接活跃
重试策略：通过retry: 3000字段指定客户端重连间隔
背压控制：当客户端处理能力不足时，服务端应暂停发送
安全加固：添加CORS头与CSRF令牌验证

三、客户端实现详解

3.1 浏览器原生API

现代浏览器提供EventSource接口实现SSE通信：

const eventSource = new EventSource('/stream');
eventSource.onmessage = (e) => {
  const data = JSON.parse(e.data);
  console.log('Received:', data);
};
eventSource.addEventListener('error', (e) => {
  if (e.target.readyState === EventSource.CLOSED) {
    console.log('Connection closed');
  } else {
    console.error('EventSource failed:', e);
  }
});
// 自定义事件类型
eventSource.addEventListener('customEvent', (e) => {
  console.log('Custom event:', e.data);
});

3.2 移动端适配方案

对于React Native等环境，可通过fetch模拟SSE行为：

async function setupSSE(url, onMessage) {
  let isActive = true;
  while (isActive) {
    try {
      const response = await fetch(url, {
        headers: { 'Accept': 'text/event-stream' }
      });
      const reader = response.body.getReader();
      let buffer = '';
      while (isActive) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += new TextDecoder().decode(value);
        const messages = buffer.split('\n\n');
        buffer = messages.pop(); // 保留不完整消息
        messages.forEach(msg => {
          const lines = msg.split('\n');
          const data = lines.find(l => l.startsWith('data:'));
          if (data) onMessage(JSON.parse(data.slice(5)));
        });
      }
    } catch (error) {
      console.error('SSE error:', error);
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }
}

四、典型应用场景

4.1 AI对话流式响应

在智能问答系统中，通过SSE实现逐字生成效果：

// 服务端伪代码
function* generateResponse(prompt) {
  const generator = aiModel.streamGenerate(prompt);
  for await (const chunk of generator) {
    yield `data: ${JSON.stringify({ text: chunk })}\n\n`;
  }
}

4.2 实时监控系统

结合日志服务构建实时告警看板：

服务端从消息队列消费日志
通过SSE推送符合规则的日志条目
客户端动态更新监控仪表盘

4.3 金融数据推送

股票行情系统实现方案：

// 服务端实现
setInterval(() => {
  const quotes = getLatestQuotes(); // 获取实时行情
  quotes.forEach(quote => {
    res.write(`event: quote\n`);
    res.write(`data: ${JSON.stringify(quote)}\n\n`);
  });
}, 500);

五、性能优化实践

5.1 连接管理策略

连接池化：前端维护3-5个持久连接应对突发流量
分级推送：根据消息重要性采用不同推送频率
数据压缩：对重复字段使用差分编码

5.2 监控告警体系

建议构建以下监控指标：

连接建立成功率
消息传输延迟P99
客户端重连频率
服务端内存占用

5.3 异常处理机制

实现完善的错误恢复流程：

// 客户端重连逻辑
let retryCount = 0;
function connectWithRetry(url) {
  const eventSource = new EventSource(url);
  eventSource.onerror = () => {
    eventSource.close();
    if (retryCount++ < 5) {
      setTimeout(() => connectWithRetry(url), Math.min(3000 * retryCount, 30000));
    }
  };
  return eventSource;
}

六、协议对比与选型

特性	SSE	WebSocket	Long Polling
通信方向	服务端→客户端	双工	客户端→服务端
协议复杂度	低	中等	高
头部开销	~200字节	~2字节	~500字节
兼容性	IE10+	所有现代浏览器	所有浏览器
适用场景	流式数据推送	实时交互游戏	简单状态同步

建议选型原则：

需要服务端主动推送时优先选择SSE
双工通信需求使用WebSocket
兼容旧浏览器时考虑降级方案

通过系统掌握SSE协议的实现原理与工程实践，开发者可以构建出高效稳定的实时通信系统。在实际项目中，建议结合具体业务场景选择合适的推送策略，并建立完善的监控体系确保服务质量。对于高并发场景，可考虑使用容器平台进行水平扩展，配合日志服务实现全链路追踪。

SSE协议全解析：从原理到前后端实战实现