基于 EventSource Polyfill 的 Web 实时推送方案

实践篇：构建股票行情实时推送系统

准备工作

确保开发环境已安装 Node.js 和 npm 包管理工具。

搭建服务器环境

1. 克隆项目仓库

git clone <repository-url>
cd EventSource

2. 安装依赖并启动示例服务器

npm install
node tests/server.js

客户端实现

引入核心库

<script src="src/eventsource.min.js"></script>

创建连接并处理行情数据

// 创建连接实例，设置重连参数
const stockSource = new EventSourcePolyfill('/stock-updates', { retryDelay: 2000, heartbeatTimeout: 45000 });

// 监听股票行情事件
stockSource.addEventListener('stock', function(event) {
  const data = JSON.parse(event.data);
  updateStockPrice(data.symbol, data.price, data.change);
});

// 处理连接错误
stockSource.onerror = function(error) {
  console.error('行情连接错误:', error);
  showErrorNotification('无法获取实时行情，请稍后重试');
};

服务器端实现要点

• 设置正确的响应头，包括 Content-Type 和 CORS 相关头信息
• 实现数据推送逻辑，定期发送股票行情更新
• 处理客户端断开连接的情况，释放资源

常见陷阱与解决方案

跨域配置技巧

确保服务器端正确设置 CORS 响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Cache-Control, Pragma

诊断连接中断问题

• 检查网络连接是否稳定
• 验证服务器端是否正确处理连接超时
• 使用浏览器开发工具查看网络请求状态和错误信息

处理大数据推送

对于大量数据推送，考虑实现分块发送或压缩数据，避免客户端处理压力过大。

总结

EventSource Polyfill 为 Web 开发者提供了一种简单高效的实时推送解决方案，通过解决浏览器兼容性问题和提供简洁的 API，降低了实时应用开发的门槛。无论是构建实时监控系统、数据可视化面板还是创新的游戏应用，它都能以较低的资源消耗提供稳定的实时数据推送服务。

选择合适的实时推送技术应根据具体应用场景和需求，SSE 在单向数据推送场景中表现出色，而 WebSocket 更适合需要双向通信的应用。通过合理使用 EventSource Polyfill，可以在保证兼容性的同时，实现高效的实时 Web 应用。