突破传统限制：sse.js实现高效实时数据推送的全指南

2026-03-14 02:44:32作者：傅爽业Veleda

核心价值：为什么选择sse.js作为实时通信解决方案

核心要点：sse.js解决了标准EventSource的三大痛点——不支持POST请求、无法自定义请求头、缺乏灵活的重连机制，同时保持了轻量级特性（仅20KB）和良好的浏览器兼容性。

在现代Web应用开发中，实时数据推送已成为核心需求。想象这样一个场景：你正在开发一个股票交易平台，需要实时展示价格波动；或者构建一个协作编辑工具，要求所有用户看到即时更新。此时，你可能会面临以下困境：

使用轮询机制会导致频繁的无效请求，浪费带宽且延迟高
WebSocket虽然功能强大，但实现复杂且服务器资源消耗大
标准EventSource API仅支持GET请求，无法满足带认证信息或复杂参数的场景

sse.js正是为解决这些问题而生。它就像一个"智能快递员"，不仅能按需发送数据（支持POST），还会自动处理"送货失败"的情况（自动重连），并且可以携带"身份卡片"（自定义请求头）。与其他解决方案相比，它兼具了WebSocket的实时性和EventSource的简洁性，同时消除了两者的诸多限制。

场景应用：sse.js在实际项目中的典型使用场景

核心要点：sse.js特别适合单向实时数据推送场景，包括实时监控面板、即时通知系统、实时日志流和状态更新服务，在保持低资源消耗的同时提供可靠的实时体验。

场景一：电商平台实时库存监控

痛点：商品秒杀活动中，如何实时向所有用户展示库存变化，避免超卖问题？

解决方案：使用sse.js建立长连接，服务器在库存变化时主动推送更新，前端无需轮询。

// 初始化库存监控SSE连接
const inventoryMonitor = new SSE('/api/product/inventory/stream', {
  // 发送认证信息和产品ID
  headers: {
    'X-API-Key': 'your-secure-api-key',
    'X-Product-ID': 'electronics-laptop-pro-2023'
  },
  // 启用自动重连，确保连接稳定
  autoReconnect: true,
  reconnectDelay: 2000,
  maxRetries: 5
});

// 监听库存更新事件
inventoryMonitor.addEventListener('stock_update', (e) => {
  const data = JSON.parse(e.data);
  // 更新UI显示
  updateStockDisplay(data.productId, {
    current: data.currentStock,
    reserved: data.reservedStock,
    status: data.status // 'normal', 'low', 'out'
  });
  
  // 如果库存低于阈值，显示警告
  if (data.status === 'low') {
    showLowStockWarning(data.productId);
  }
});

// 开始连接
inventoryMonitor.stream();

场景二：物联网设备实时监控面板

痛点：如何高效接收分散在各地的IoT设备状态数据，同时避免服务器过载？

解决方案：使用sse.js的自定义请求体功能，订阅特定设备组的状态更新流。

// 设备监控SSE连接配置
const deviceMonitor = new SSE('/api/iot/devices/stream', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'DeviceToken ' + localStorage.getItem('device_token')
  },
  // 发送设备筛选条件作为请求体
  payload: JSON.stringify({
    deviceGroup: 'factory-floor-3',
    metrics: ['temperature', 'humidity', 'power'],
    samplingRate: 'high' // 高采样率
  }),
  // 配置重连策略
  autoReconnect: true,
  reconnectDelay: 3000,
  // 利用Last-Event-ID确保数据连续性
  useLastEventId: true
});

// 处理设备状态更新
deviceMonitor.addEventListener('device_status', (e) => {
  const status = JSON.parse(e.data);
  updateDeviceStatus(status.deviceId, {
    timestamp: status.timestamp,
    metrics: status.metrics,
    status: status.connectionStatus
  });
});

// 监听连接状态变化
deviceMonitor.addEventListener('open', (e) => {
  console.log(`设备监控已连接，服务器响应: ${e.responseCode}`);
});

deviceMonitor.stream();

场景三：实时协作文档编辑状态同步

痛点：多人协作编辑时，如何实时同步用户编辑状态而不产生冲突？

解决方案：通过sse.js接收其他用户的编辑操作流，实现无冲突的协作体验。

// 文档协作SSE连接
const collaborationStream = new SSE('/api/documents/collaborate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Document-ID': currentDocumentId,
    'User-ID': currentUserId
  },
  payload: JSON.stringify({
    documentVersion: currentVersion,
    features: ['cursor-position', 'selection-range', 'edit-operations']
  }),
  // 关闭自动重连，由应用逻辑控制重连策略
  autoReconnect: false
});

// 处理其他用户的光标位置更新
collaborationStream.addEventListener('cursor_update', (e) => {
  const data = JSON.parse(e.data);
  updateRemoteCursor(data.userId, {
    position: data.position,
    color: data.userColor,
    username: data.username
  });
});

// 处理编辑操作
collaborationStream.addEventListener('edit_operation', (e) => {
  const operation = JSON.parse(e.data);
  // 应用OT算法处理远程编辑操作
  applyRemoteEdit(operation);
});

// 手动管理重连逻辑
collaborationStream.addEventListener('error', (e) => {
  console.error('协作连接错误:', e);
  if (e.responseCode === 401) {
    // 认证失败，需要重新登录
    showLoginPrompt();
  } else {
    // 其他错误，延迟后重连
    setTimeout(() => collaborationStream.stream(), 5000);
  }
});

collaborationStream.stream();

实现原理：深入理解sse.js的工作机制

核心要点：sse.js通过模拟HTTP长轮询与事件流解析的组合机制，实现了比标准EventSource更灵活的实时通信能力，其核心包括连接管理、事件解析和重连策略三大模块。

SSE通信模型与传统轮询的本质区别

传统的轮询机制就像顾客不断去餐厅询问"我的餐好了吗"，而SSE则像顾客在餐厅坐下点餐，服务员做好后会主动送到桌上。这种被动接收模式大幅减少了无效通信。

sequenceDiagram
    participant 客户端
    participant 服务器
    
    Note over 客户端,服务器: 传统轮询模式
    客户端->>服务器: 请求数据 (轮询)
    服务器-->>客户端: 返回当前数据
    客户端->>服务器: 请求数据 (再次轮询)
    服务器-->>客户端: 返回当前数据
    Note over 客户端,服务器: 频繁请求，即使无数据更新
    
    Note over 客户端,服务器: SSE模式
    客户端->>服务器: 建立SSE连接
    服务器-->>客户端: 保持连接打开
    loop 当有新数据时
        服务器-->>客户端: 推送事件数据
    end
    Note over 客户端,服务器: 只在有数据时传输，连接长期保持

sse.js的核心架构解析

sse.js内部采用模块化设计，主要包含以下几个核心组件：

连接管理器：负责创建和管理XMLHttpRequest对象，处理连接生命周期
事件解析器：解析服务器发送的事件流格式，提取事件类型、ID和数据
重连控制器：实现智能重连逻辑，管理重连延迟和重试次数
事件分发器：将解析后的事件分发到对应的事件处理器

graph TD
    A[用户配置] --> B[连接管理器]
    B --> C{是否有payload?}
    C -->|是| D[使用POST方法]
    C -->|否| E[使用GET方法]
    D --> F[创建XMLHttpRequest]
    E --> F
    F --> G[建立连接]
    G --> H[事件解析器]
    H --> I[解析事件流格式]
    I --> J[事件分发器]
    J --> K[触发用户定义的事件处理函数]
    G --> L{连接是否异常?}
    L -->|是| M[重连控制器]
    M -->|计算延迟后| B
    L -->|否| N[保持连接]

事件流格式解析机制

SSE通信基于特定格式的文本流，每条消息由一个或多个字段组成，以空行分隔：

event: stock_update
id: 12345
data: {"productId": "electronics-laptop-pro-2023", "currentStock": 42, "status": "normal"}

event: price_change
id: 12346
data: {"productId": "electronics-laptop-pro-2023", "newPrice": 899.99, "change": -50.00}

sse.js的事件解析器会逐行处理这个流，识别event、id和data字段，然后构建相应的事件对象分发给用户。这种格式设计既简单轻量，又能满足大多数实时通信需求。

实践指南：从零开始使用sse.js构建实时功能

核心要点：使用sse.js只需四个步骤——安装配置、创建连接、处理事件和管理连接生命周期，关键在于合理配置重连策略和事件处理逻辑。

环境准备与安装

痛点：如何快速将sse.js集成到不同类型的项目中？

解决方案：sse.js提供多种安装方式，适配不同开发环境。

# 使用npm安装（推荐）
npm install sse.js --save

# 使用yarn安装
yarn add sse.js

# 或者直接从源码构建
git clone https://gitcode.com/gh_mirrors/ss/sse.js
cd sse.js
npm install
npm run build

基础连接创建与事件处理

痛点：如何建立基本的SSE连接并处理接收到的事件？

解决方案：创建SSE实例，监听事件并处理数据。

// 导入SSE模块
import { SSE } from 'sse.js';

// 创建基本的SSE连接
const realtimeUpdates = new SSE('/api/updates/stream', {
  // 基本配置
  headers: {
    'Application-Name': 'realtime-dashboard',
    'Client-Version': '2.3.1'
  },
  // 自动启动连接
  start: true,
  // 启用调试模式，方便开发
  debug: process.env.NODE_ENV === 'development'
});

// 监听通用消息事件
realtimeUpdates.addEventListener('message', (e) => {
  console.log('收到通用消息:', e.data);
  // 处理通用数据
  handleGenericMessage(e.data);
});

// 监听特定类型事件
realtimeUpdates.addEventListener('system_alert', (e) => {
  const alert = JSON.parse(e.data);
  console.log(`系统警报[${alert.level}]: ${alert.message}`);
  // 显示系统警报
  showSystemAlert(alert);
});

// 监听连接状态变化
realtimeUpdates.addEventListener('open', () => {
  console.log('SSE连接已建立');
  updateConnectionStatus('connected');
});

realtimeUpdates.addEventListener('error', (e) => {
  console.error('SSE连接错误:', e);
  updateConnectionStatus('error');
});

高级配置与请求定制

痛点：如何处理需要认证、自定义方法或请求体的复杂场景？

解决方案：利用sse.js的高级配置选项，定制请求参数。

// 创建带认证和自定义请求体的SSE连接
const authenticatedStream = new SSE('/api/secure/stream', {
  // 指定HTTP方法
  method: 'POST',
  // 设置请求头，包含认证信息
  headers: {
    'Authorization': `Bearer ${getUserToken()}`,
    'Content-Type': 'application/json',
    'Accept': 'text/event-stream'
  },
  // 设置请求体数据
  payload: JSON.stringify({
    subscription: ['user-updates', 'notifications', 'system-status'],
    filter: {
      priority: 'high',
      includeDetails: true
    },
    clientInfo: {
      device: 'web',
      appVersion: '1.5.0'
    }
  }),
  // 携带跨域凭证
  withCredentials: true,
  // 延迟启动，稍后手动触发
  start: false
});

// 准备就绪后手动启动连接
document.addEventListener('DOMContentLoaded', () => {
  authenticatedStream.stream();
});

连接生命周期管理

痛点：如何正确管理SSE连接的开启、关闭和重连？

解决方案：掌握连接状态变化，实现优雅的生命周期管理。

// 创建带重连策略的SSE连接
const managedStream = new SSE('/api/continuous/data', {
  autoReconnect: true,
  reconnectDelay: 1000,  // 初始重连延迟
  maxRetries: 10,        // 最大重试次数
  useLastEventId: true   // 使用Last-Event-ID确保数据连续性
});

// 跟踪连接状态
let isConnected = false;

// 监听状态变化
managedStream.addEventListener('open', () => {
  isConnected = true;
  console.log('连接已建立');
  // 重置重连计数器显示
  updateReconnectCounter(0);
});

managedStream.addEventListener('error', (e) => {
  isConnected = false;
  console.log(`连接错误: ${e.message}`);
  
  // 显示重连信息
  if (managedStream.retryCount < managedStream.maxRetries) {
    updateReconnectCounter(managedStream.retryCount);
    showStatusMessage(`连接中断，将在 ${managedStream.reconnectDelay}ms 后重试 (${managedStream.retryCount}/${managedStream.maxRetries})`);
  } else {
    showStatusMessage('已达到最大重试次数，请检查网络连接');
    // 提供手动重连按钮
    showReconnectButton(() => {
      // 重置重连计数器并尝试重连
      managedStream.retryCount = 0;
      managedStream.stream();
    });
  }
});

// 页面离开时关闭连接
window.addEventListener('beforeunload', () => {
  if (isConnected) {
    managedStream.close();
    console.log('页面离开，主动关闭SSE连接');
  }
});

// 手动控制连接的函数
function pauseUpdates() {
  if (isConnected) {
    managedStream.close();
    isConnected = false;
    console.log('手动暂停更新');
  }
}

function resumeUpdates() {
  if (!isConnected) {
    managedStream.stream();
    console.log('手动恢复更新');
  }
}

扩展能力：sse.js的高级特性与定制化

核心要点：sse.js提供丰富的扩展点，包括自定义重连策略、事件转换和连接池管理，可满足复杂业务场景需求。

自定义重连策略实现

痛点：默认重连策略无法满足特定业务需求，如何实现智能重连？

解决方案：通过扩展SSE类，实现自定义重连逻辑。

class SmartSSE extends SSE {
  constructor(url, options) {
    super(url, options);
    // 自定义重连策略配置
    this.reconnectStrategy = options.reconnectStrategy || 'exponential';
    // 最大重连延迟
    this.maxReconnectDelay = options.maxReconnectDelay || 30000;
  }
  
  // 重写计算重连延迟的方法
  calculateReconnectDelay() {
    switch (this.reconnectStrategy) {
      case 'exponential':
        // 指数退避策略：1s, 2s, 4s, 8s... 直到最大延迟
        const delay = Math.min(
          this.reconnectDelay * Math.pow(2, this.retryCount),
          this.maxReconnectDelay
        );
        return delay;
        
      case 'jitter':
        // 带抖动的指数退避，避免惊群效应
        const baseDelay = this.reconnectDelay * Math.pow(2, this.retryCount);
        const jitter = Math.random() * baseDelay * 0.5; // 0-50%的抖动
        return Math.min(baseDelay + jitter, this.maxReconnectDelay);
        
      case 'fixed':
      default:
        // 固定延迟
        return this.reconnectDelay;
    }
  }
  
  // 重写重连方法
  scheduleReconnect() {
    if (this.retryCount >= this.maxRetries) {
      // 达到最大重试次数，触发自定义事件
      this.dispatchEvent(new Event('max-retries-reached'));
      return;
    }
    
    // 计算延迟
    const delay = this.calculateReconnectDelay();
    // 调度重连
    this.reconnectTimeout = setTimeout(() => {
      this.retryCount++;
      this.stream();
    }, delay);
  }
}

// 使用自定义SSE类
const smartStream = new SmartSSE('/api/smart/stream', {
  autoReconnect: true,
  reconnectStrategy: 'jitter',
  reconnectDelay: 1000,
  maxReconnectDelay: 15000,
  maxRetries: 8
});

// 监听最大重试事件
smartStream.addEventListener('max-retries-reached', () => {
  console.log('已达到最大重试次数，将尝试备用服务器');
  // 切换到备用服务器
  switchToBackupServer();
});

事件转换与过滤

痛点：如何在客户端对原始事件数据进行预处理和过滤？

解决方案：实现事件转换器，在事件分发前处理数据。

class TransformingSSE extends SSE {
  constructor(url, options) {
    super(url, options);
    // 注册事件转换器
    this.eventTransformers = new Map();
  }
  
  // 添加事件转换器
  addTransformer(eventType, transformer) {
    this.eventTransformers.set(eventType, transformer);
  }
  
  // 重写事件分发方法
  dispatchEvent(event) {
    // 检查是否有对应的转换器
    const transformer = this.eventTransformers.get(event.type);
    if (transformer) {
      try {
        // 应用转换
        const transformedEvent = transformer(event);
        // 分发转换后的事件
        super.dispatchEvent(transformedEvent);
      } catch (error) {
        console.error(`事件转换失败 (${event.type}):`, error);
        // 可以选择分发原始事件或错误事件
        super.dispatchEvent(new CustomEvent('transform-error', {
          detail: { originalEvent: event, error: error.message }
        }));
      }
    } else {
      // 无转换器，直接分发原始事件
      super.dispatchEvent(event);
    }
  }
}

// 使用带转换功能的SSE
const dataStream = new TransformingSSE('/api/data/stream');

// 添加JSON数据转换器
dataStream.addTransformer('sensor_data', (event) => {
  // 解析JSON数据
  const data = JSON.parse(event.data);
  // 转换数据格式
  const transformedData = {
    timestamp: new Date(data.timestamp).toLocaleString(),
    sensorId: data.id,
    temperature: (data.temp_c * 9/5 + 32).toFixed(1), // 转换为华氏度
    humidity: data.humidity.toFixed(1),
    status: data.status === 'normal' ? '正常' : '异常'
  };
  // 创建新事件
  return new CustomEvent(event.type, {
    detail: transformedData,
    id: event.id
  });
});

// 监听转换后的事件
dataStream.addEventListener('sensor_data', (e) => {
  // e.detail包含转换后的数据
  console.log(`传感器${e.detail.sensorId}数据:`, e.detail);
  updateSensorUI(e.detail);
});

连接池管理

痛点：在大型应用中，如何高效管理多个SSE连接？

解决方案：实现连接池，集中管理和复用SSE连接。

class SSEPool {
  constructor() {
    this.connections = new Map(); // 存储连接实例
    this.connectionOptions = new Map(); // 存储连接配置
  }
  
  // 获取或创建连接
  getConnection(name, url, options = {}) {
    // 如果连接已存在且活跃，返回现有连接
    if (this.connections.has(name) && this.isConnectionActive(name)) {
      return this.connections.get(name);
    }
    
    // 存储连接配置
    this.connectionOptions.set(name, { url, options });
    
    // 创建新连接
    const connection = new SSE(url, {
      ...options,
      start: false // 延迟启动，由连接池控制
    });
    
    // 存储连接
    this.connections.set(name, connection);
    
    // 监听连接关闭事件，自动清理
    connection.addEventListener('close', () => {
      console.log(`连接 ${name} 已关闭`);
      this.connections.delete(name);
    });
    
    // 启动连接
    connection.stream();
    console.log(`创建新连接: ${name}`);
    
    return connection;
  }
  
  // 检查连接是否活跃
  isConnectionActive(name) {
    const connection = this.connections.get(name);
    return connection && connection.readyState === 1; // OPEN状态
  }
  
  // 关闭特定连接
  closeConnection(name) {
    if (this.connections.has(name)) {
      const connection = this.connections.get(name);
      connection.close();
      this.connections.delete(name);
      this.connectionOptions.delete(name);
      console.log(`已关闭连接: ${name}`);
    }
  }
  
  // 关闭所有连接
  closeAllConnections() {
    for (const [name, connection] of this.connections) {
      connection.close();
    }
    this.connections.clear();
    this.connectionOptions.clear();
    console.log('已关闭所有SSE连接');
  }
  
  // 重新连接所有连接
  reconnectAll() {
    const connectionList = Array.from(this.connectionOptions.entries());
    this.closeAllConnections();
    
    // 重新创建所有连接
    connectionList.forEach(([name, { url, options }]) => {
      this.getConnection(name, url, options);
    });
    
    console.log(`已重新连接所有 ${connectionList.length} 个连接`);
  }
}

// 使用连接池
const ssePool = new SSEPool();

// 获取不同功能的连接
const notificationStream = ssePool.getConnection('notifications', '/api/notifications', {
  headers: { 'Priority': 'high' }
});

const dataStream = ssePool.getConnection('realtime-data', '/api/data/stream', {
  method: 'POST',
  payload: JSON.stringify({ sources: ['metrics', 'logs'] })
});

// 监听通知
notificationStream.addEventListener('new_message', (e) => {
  showNotification(JSON.parse(e.data));
});

// 页面卸载时关闭所有连接
window.addEventListener('beforeunload', () => {
  ssePool.closeAllConnections();
});

常见故障排查：解决sse.js集成中的典型问题

核心要点：sse.js集成中常见问题包括连接建立失败、事件接收不完整、重连机制失效和跨域问题，通过系统排查和针对性解决方案可有效解决这些问题。

问题一：连接建立失败，控制台显示404错误

场景：尝试建立SSE连接时，浏览器控制台显示404 Not Found错误。

排查步骤：

确认服务端端点URL是否正确
检查服务器是否正确配置了SSE响应头
验证服务器是否支持对应HTTP方法（GET/POST）

解决方案：

// 问题诊断代码
const diagnosticStream = new SSE('/api/events', {
  debug: true, // 启用调试模式查看详细日志
  start: false
});

// 监听错误事件获取详细信息
diagnosticStream.addEventListener('error', (e) => {
  console.error('连接错误详情:', {
    status: e.responseCode,
    message: e.message,
    time: new Date().toISOString()
  });
});

// 尝试连接
diagnosticStream.stream();

服务端配置示例（Node.js/Express）：

// 正确的SSE端点配置
app.get('/api/events', (req, res) => {
  // 设置必要的响应头
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // 发送初始响应
  res.write('\n');
  
  // 后续事件发送逻辑...
});

问题二：事件数据接收不完整或被截断

场景：客户端收到的事件数据不完整，JSON解析时经常报错。

排查步骤：

检查服务器发送的事件格式是否符合SSE规范
验证数据是否正确使用data字段，且每条消息以空行结束
确认网络连接是否稳定，是否有数据包丢失

解决方案：

// 客户端增强错误处理
const dataStream = new SSE('/api/data/stream');

dataStream.addEventListener('message', (e) => {
  try {
    // 尝试解析JSON数据
    const data = JSON.parse(e.data);
    processData(data);
  } catch (error) {
    console.error('数据解析失败:', error);
    console.error('原始数据:', e.data);
    
    // 记录不完整数据以便分析
    logCorruptedData({
      id: e.id,
      data: e.data,
      error: error.message,
      timestamp: new Date().toISOString()
    });
  }
});

服务端正确发送事件示例：

// 正确的事件发送格式
function sendEvent(res, eventType, data) {
  // 确保数据正确序列化
  const jsonData = JSON.stringify(data);
  
  // 按SSE规范格式发送
  res.write(`event: ${eventType}\n`);
  res.write(`id: ${Date.now()}\n`);
  
  // 处理可能包含换行符的数据
  const lines = jsonData.split('\n');
  lines.forEach(line => {
    res.write(`data: ${line}\n`);
  });
  
  // 必须以空行结束事件
  res.write('\n');
}

问题三：自动重连功能失效

场景：网络中断后，sse.js没有按预期自动重连。

排查步骤：

检查是否正确启用了autoReconnect选项
验证maxRetries参数是否设置合理
查看是否有错误处理函数阻止了默认重连逻辑

解决方案：

// 正确配置重连参数
const reliableStream = new SSE('/api/reliable/stream', {
  autoReconnect: true,  // 确保启用自动重连
  reconnectDelay: 2000, // 初始重连延迟
  maxRetries: null,     // null表示无限重试
  useLastEventId: true  // 使用Last-Event-ID确保数据连续性
});

// 监听重连相关事件
reliableStream.addEventListener('error', (e) => {
  console.log(`连接错误: ${e.message}, 重试次数: ${reliableStream.retryCount}`);
});

// 添加重连状态监控
let reconnectInterval = setInterval(() => {
  if (reliableStream.readyState === 0) { // CONNECTING状态
    console.log(`正在尝试重连... (第${reliableStream.retryCount}次)`);
  }
}, 1000);

性能调优：提升sse.js应用的响应速度与稳定性

核心要点：sse.js性能优化可从连接管理、数据传输和事件处理三个层面入手，通过合理配置和代码优化，可显著提升实时通信质量。

优化一：减少连接建立时间

场景：SSE连接建立缓慢，影响用户体验。

优化策略：

预建立连接：在用户可能需要实时数据前提前建立连接
复用连接：多个功能共享同一连接，减少握手开销
压缩传输：启用响应压缩减少数据传输量

// 预建立连接示例
class SSEPreloader {
  constructor() {
    this.connections = new Map();
    // 监听页面交互，预测用户需求
    this.setupInteractionListeners();
  }
  
  // 设置用户交互监听器，预测连接需求
  setupInteractionListeners() {
    // 当用户悬停在可能需要实时数据的区域时预建立连接
    document.querySelectorAll('.realtime-section').forEach(element => {
      element.addEventListener('mouseenter', () => {
        const sectionId = element.dataset.section;
        this.preloadConnection(sectionId);
      });
    });
  }
  
  // 预加载连接
  preloadConnection(sectionId) {
    if (this.connections.has(sectionId)) return;
    
    console.log(`预加载 ${sectionId} 的SSE连接`);
    const connection = new SSE(`/api/stream/${sectionId}`, {
      // 初始不发送数据请求，只建立连接
      payload: JSON.stringify({ mode: 'standby' }),
      autoReconnect: true
    });
    
    this.connections.set(sectionId, connection);
    
    // 连接建立后保持待命状态
    connection.addEventListener('open', () => {
      console.log(`${sectionId} 连接已预建立`);
    });
  }
  
  // 获取预建立的连接
  getConnection(sectionId) {
    if (!this.connections.has(sectionId)) {
      this.preloadConnection(sectionId);
    }
    
    const connection = this.connections.get(sectionId);
    
    // 发送激活命令，开始接收实际数据
    connection.send(JSON.stringify({ mode: 'active' }));
    
    return connection;
  }
}

// 使用预加载器
const ssePreloader = new SSEPreloader();

// 当用户实际进入区域时获取连接
document.getElementById('live-dashboard').addEventListener('click', () => {
  const dashboardStream = ssePreloader.getConnection('dashboard');
  dashboardStream.addEventListener('data_update', handleDashboardUpdate);
});

优化二：减少客户端处理延迟

场景：高频事件导致客户端UI卡顿。

优化策略：

事件批处理：合并短时间内的多个事件
Web Worker处理：将复杂数据处理移至Web Worker
节流UI更新：限制UI更新频率，避免过度渲染

// 事件批处理与节流示例
class BatchedSSE extends SSE {
  constructor(url, options) {
    super(url, options);
    this.batchInterval = options.batchInterval || 100; // 批处理间隔(ms)
    this.eventBatch = new Map(); // 存储事件批次
    this.batchTimer = null; // 批处理定时器
  }
  
  // 重写事件分发方法
  dispatchEvent(event) {
    // 将事件添加到批次
    if (!this.eventBatch.has(event.type)) {
      this.eventBatch.set(event.type, []);
    }
    this.eventBatch.get(event.type).push(event);
    
    // 如果没有活跃的批处理定时器，创建一个
    if (!this.batchTimer) {
      this.batchTimer = setTimeout(() => {
        this.processBatch();
      }, this.batchInterval);
    }
  }
  
  // 处理事件批次
  processBatch() {
    // 遍历所有事件类型的批次
    for (const [eventType, events] of this.eventBatch.entries()) {
      // 创建批次事件
      const batchEvent = new CustomEvent(`batch_${eventType}`, {
        detail: {
          events: events.map(e => ({
            data: e.data,
            id: e.id,
            timestamp: Date.now()
          })),
          count: events.length
        }
      });
      
      // 分发批次事件
      super.dispatchEvent(batchEvent);
    }
    
    // 清空批次并重置定时器
    this.eventBatch.clear();
    this.batchTimer = null;
  }
}

// 使用批处理SSE
const batchedStream = new BatchedSSE('/api/high-frequency/stream', {
  batchInterval: 150 // 每150ms处理一次批次
});

// 监听批次事件
batchedStream.addEventListener('batch_price_update', (e) => {
  console.log(`处理 ${e.detail.count} 个价格更新事件`);
  // 批量更新UI，减少重绘
  updatePriceUIInBatch(e.detail.events);
});

优化三：网络不稳定环境下的鲁棒性提升

场景：在弱网络环境下，SSE连接频繁断开重连，影响数据完整性。

优化策略：

自适应重连策略：根据网络状况动态调整重连延迟
本地数据缓存：缓存关键数据，网络恢复后同步
增量数据传输：只传输变化的数据，减少传输量

// 网络感知型SSE连接
class NetworkAwareSSE extends SSE {
  constructor(url, options) {
    super(url, options);
    this.networkQuality = 'excellent'; // 网络质量初始值
    this.adjustReconnectBasedOnNetwork = true;
    
    // 监听网络状态变化
    this.setupNetworkMonitor();
  }
  
  // 设置网络监控
  setupNetworkMonitor() {
    // 监听在线/离线状态
    window.addEventListener('online', () => this.handleNetworkChange(true));
    window.addEventListener('offline', () => this.handleNetworkChange(false));
    
    // 使用navigator.connection监控网络质量
    if (navigator.connection) {
      navigator.connection.addEventListener('change', () => {
        this.updateNetworkQuality();
      });
      
      // 初始评估
      this.updateNetworkQuality();
    }
  }
  
  // 更新网络质量评估
  updateNetworkQuality() {
    const connection = navigator.connection;
    
    // 根据网络类型和下行速度评估网络质量
    if (connection.downlink < 1) {
      this.networkQuality = 'poor';
    } else if (connection.downlink < 5 || connection.rtt > 200) {
      this.networkQuality = 'fair';
    } else {
      this.networkQuality = 'excellent';
    }
    
    console.log(`网络质量评估: ${this.networkQuality} (${connection.downlink} Mbps, ${connection.rtt} ms)`);
    
    // 根据网络质量调整重连策略
    if (this.adjustReconnectBasedOnNetwork) {
      this.adjustReconnectParameters();
    }
  }
  
  // 根据网络质量调整重连参数
  adjustReconnectParameters() {
    switch (this.networkQuality) {
      case 'poor':
        this.reconnectDelay = 5000; // 弱网络下增加重连间隔
        this.maxRetries = 20;
        break;
      case 'fair':
        this.reconnectDelay = 3000;
        this.maxRetries = 15;
        break;
      default: // excellent
        this.reconnectDelay = 1000;
        this.maxRetries = 10;
    }
  }
  
  // 处理网络连接状态变化
  handleNetworkChange(isOnline) {
    if (isOnline) {
      console.log('网络已恢复，尝试重连');
      this.updateNetworkQuality();
      if (this.readyState === 2) { // 如果连接已关闭
        this.stream(); // 手动触发重连
      }
    } else {
      console.log('网络已断开');
    }
  }
}

// 使用网络感知型SSE
const robustStream = new NetworkAwareSSE('/api/critical/stream', {
  autoReconnect: true,
  useLastEventId: true
});