Server-Sent Events（SSE）的使用

什么是Server-Sent Events

Server-Sent Events（SSE）是一种允许服务器向客户端推送实时数据的HTML5技术。与WebSocket不同，SSE是单向通信，仅支持服务器到客户端的消息推送。它基于HTTP协议，使用简单的事件流格式，适合需要服务器主动推送但不需要客户端频繁发送数据的场景。

SSE的主要特点包括：

• 使用简单，只需通过JavaScript API即可实现
• 自动重连机制
• 支持自定义事件类型
• 轻量级，不需要额外的协议

SSE与WebSocket的比较

SSE和WebSocket都是实现实时通信的技术，但各有适用场景：

SSE更适合以下场景：

• 只需要服务器推送数据的应用
• 需要简单实现的实时功能
• 不需要频繁双向通信的系统

基本使用方法

客户端实现

客户端使用EventSource API接收服务器推送的消息：

// 创建EventSource对象，连接到服务器端点
const eventSource = new EventSource('/sse-endpoint');

// 监听默认的message事件
eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
  // 更新页面内容
  document.getElementById('messages').innerHTML += event.data + '<br>';
};

// 监听自定义事件
eventSource.addEventListener('customEvent', function(event) {
  console.log('自定义事件:', event.data);
});

// 错误处理
eventSource.onerror = function(error) {
  console.error('EventSource错误:', error);
  // 可以在这里实现自定义的重连逻辑
};

服务器端实现（Node.js示例）

const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  if (req.url === '/sse-endpoint') {
    // 设置SSE所需的响应头
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    
    // 发送初始消息
    res.write('data: 连接已建立\n\n');
    
    // 定时发送消息
    let counter = 0;
    const intervalId = setInterval(() => {
      counter++;
      res.write(`data: 这是第${counter}条消息\n\n`);
      
      // 发送自定义事件
      if (counter % 3 === 0) {
        res.write(`event: customEvent\ndata: 自定义事件数据 ${counter}\n\n`);
      }
      
      // 测试10次后结束
      if (counter >= 10) {
        clearInterval(intervalId);
        res.end();
      }
    }, 1000);
    
    // 客户端断开连接时清理
    req.on('close', () => {
      clearInterval(intervalId);
    });
  } else {
    // 返回HTML页面
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(fs.readFileSync('./sse-client.html'));
  }
}).listen(3000);

console.log('SSE服务器运行在 http://localhost:3000');

事件流格式

SSE使用特定格式的文本流，每条消息由以下部分组成：

event: eventName  // 可选，指定事件类型
data: messageData // 消息内容，可以多行
id: messageId    // 可选，消息ID
retry: timeout   // 可选，重连时间(毫秒)
\n               // 空行表示消息结束

示例：

event: statusUpdate
data: {"user": "张三", "status": "在线"}
id: 12345
retry: 5000

data: 这是一条多行
data: 消息的例子

高级特性

自定义事件类型

除了默认的message事件，SSE支持自定义事件类型：

// 服务器端发送自定义事件
res.write('event: userUpdate\ndata: {"id": 101, "name": "李四"}\n\n');

// 客户端监听自定义事件
eventSource.addEventListener('userUpdate', function(event) {
  const userData = JSON.parse(event.data);
  console.log('用户更新:', userData.name);
});

消息ID和重连机制

SSE自动跟踪最后接收的消息ID，并在断线重连时通过Last-Event-ID头发送给服务器：

// 服务器端发送带ID的消息
res.write('id: 1001\ndata: 重要消息\n\n');

// 服务器可以检查Last-Event-ID头
const lastEventId = req.headers['last-event-id'];
if (lastEventId) {
  // 从断点处恢复发送消息
}

控制重连时间

可以指定客户端断开后的重试时间：

// 服务器建议客户端3秒后重连
res.write('retry: 3000\n\n');

实际应用示例

实时股票价格更新

// 客户端代码
const stockSource = new EventSource('/stocks');

stockSource.addEventListener('priceUpdate', function(event) {
  const stockData = JSON.parse(event.data);
  const stockElement = document.getElementById(`stock-${stockData.symbol}`);
  if (stockElement) {
    stockElement.textContent = `${stockData.symbol}: $${stockData.price.toFixed(2)}`;
    stockElement.style.color = stockData.change >= 0 ? 'green' : 'red';
  }
});

// 服务器端代码（Node.js）
setInterval(() => {
  const stocks = ['AAPL', 'GOOGL', 'MSFT', 'AMZN'];
  stocks.forEach(symbol => {
    const priceChange = (Math.random() - 0.5) * 10;
    const stockData = {
      symbol,
      price: 100 + Math.random() * 1000,
      change: priceChange
    };
    res.write(`event: priceUpdate\ndata: ${JSON.stringify(stockData)}\n\n`);
  });
}, 2000);

实时日志监控

// 客户端代码
const logSource = new EventSource('/logs');

logSource.onmessage = function(event) {
  const logElement = document.getElementById('log-output');
  logElement.value += event.data + '\n';
  logElement.scrollTop = logElement.scrollHeight;
};

// 服务器端代码（模拟日志）
const fs = require('fs');
const tail = require('tail').Tail;

const logFile = new Tail('/var/log/app.log');

logFile.on('line', (line) => {
  res.write(`data: ${line}\n\n`);
});

浏览器兼容性与降级方案

SSE在现代浏览器中得到良好支持，但在IE和某些移动浏览器中可能不可用。可以通过以下方式检测兼容性并提供降级方案：

if (typeof EventSource !== 'undefined') {
  // 使用SSE
  const source = new EventSource('/updates');
} else {
  // 降级方案：轮询或使用其他技术
  console.warn('浏览器不支持Server-Sent Events，将使用轮询');
  setInterval(fetchUpdates, 5000);
  
  function fetchUpdates() {
    fetch('/updates')
      .then(response => response.json())
      .then(data => {
        // 处理更新
      });
  }
}

安全考虑

使用SSE时应注意以下安全问题：

1. 跨域请求：SSE默认遵守同源策略，跨域请求需要设置CORS头：

   res.writeHead(200, {
     'Content-Type': 'text/event-stream',
     'Access-Control-Allow-Origin': 'https://client-domain.com'
   });
   

2. 认证与授权：可以在EventSource构造函数中传递凭据：

   const eventSource = new EventSource('/secure-sse', {
     withCredentials: true
   });
   

3. 消息验证：始终验证服务器发送的数据，防止XSS攻击：

   eventSource.onmessage = function(event) {
     const safeData = escapeHtml(event.data);
     // 使用safeData更新DOM
   };
   

性能优化

1. 连接管理：及时关闭不需要的EventSource连接：

   // 当不再需要接收消息时
   function stopUpdates() {
     eventSource.close();
   }
   

2. 服务器端资源释放：确保在客户端断开连接时释放服务器资源：

   req.on('close', () => {
     // 清理定时器、数据库连接等
     clearInterval(updateInterval);
   });
   

3. 消息压缩：对于大量文本数据，可以考虑在服务器端压缩：

   res.writeHead(200, {
     'Content-Type': 'text/event-stream',
     'Content-Encoding': 'gzip'
   });
   

与其他技术结合

与Service Worker配合

可以在Service Worker中处理SSE消息，实现离线功能：

// service-worker.js
self.addEventListener('message', event => {
  if (event.data.type === 'CREATE_SSE') {
    const sse = new EventSource(event.data.url);
    sse.onmessage = msg => {
      // 处理消息并决定是否显示通知
      if (msg.data.important) {
        self.registration.showNotification('新通知', {
          body: msg.data.text
        });
      }
    };
  }
});

// 主线程
navigator.serviceWorker.controller.postMessage({
  type: 'CREATE_SSE',
  url: '/notifications'
});

与React/Vue等框架集成

在React组件中使用SSE：

import { useEffect, useState } from 'react';

function StockTicker() {
  const [stocks, setStocks] = useState({});
  
  useEffect(() => {
    const source = new EventSource('/stocks');
    
    source.addEventListener('priceUpdate', event => {
      const stockData = JSON.parse(event.data);
      setStocks(prev => ({
        ...prev,
        [stockData.symbol]: stockData
      }));
    });
    
    return () => source.close(); // 清理Effect
  }, []);
  
  return (
    <div>
      {Object.values(stocks).map(stock => (
        <div key={stock.symbol}>
          {stock.symbol}: ${stock.price.toFixed(2)}
        </div>
      ))}
    </div>
  );
}

调试与问题排查

1. 查看事件流：可以直接在浏览器地址栏访问SSE端点，查看原始事件流。

2. 网络检查：使用开发者工具的Network面板，查看SSE连接状态和传输的消息。

3. 常见问题：

   • 确保服务器响应包含正确的Content-Type: text/event-stream头
   • 每条消息必须以两个换行符(\n\n)结束
   • 避免在消息数据中包含单换行符，如需多行数据，每行应以data:开头

4. 错误处理增强：

   eventSource.onerror = function(error) {
     if (eventSource.readyState === EventSource.CLOSED) {
       console.log('连接被服务器关闭');
     } else {
       console.error('SSE错误:', error);
       // 尝试重新连接
       setTimeout(() => {
         initEventSource();
       }, 5000);
     }
   };
   

扩展应用场景

1. 实时通知系统：社交网络、协作工具中的消息通知。

2. 实时仪表盘：监控系统、数据分析平台的实时数据展示。

3. 实时协作编辑：协同文档编辑中的光标位置同步。

4. 体育赛事直播：比分和赛事统计的实时更新。

5. 拍卖系统：实时出价更新和倒计时。

6. IoT设备监控：设备状态和传感器数据的实时推送。