介绍利用 Server-Sent Events (SSE) 技术实现 Web 端零成本实时数据推送的轻量级方案。通过 EventSource Polyfill 解决浏览器兼容性问题，对比轮询与 WebSocket 的优劣，提供 Node.js 服务端搭建及客户端连接示例。重点涵盖性能优势、跨域配置及常见陷阱处理，适用于股票行情监控等单向数据推送场景。
在现代 Web 开发中，实时数据更新已成为提升用户体验的关键需求。EventSource Polyfill 作为一款基于 W3C 标准 Server-Sent Events (SSE) 技术的浏览器兼容库，通过提供统一接口解决了不同浏览器对原生 EventSource 支持不一致的问题，让开发者能以最小成本实现高效的服务器到客户端实时数据推送，兼顾浏览器兼容性与开发效率双重优势。
传统轮询技术通过定期发送 HTTP 请求获取数据，存在明显的延迟问题。例如每 30 秒轮询一次的系统，用户最多可能等待 30 秒才能看到新数据，这种延迟在实时通讯场景中难以接受。
长轮询虽然比普通轮询有所改进，但仍然会产生大量无效请求。当服务器没有新数据时，连接会保持一段时间后超时关闭，这种方式会占用大量服务器连接资源和带宽，尤其在用户量较大时问题更为突出。
不同浏览器对实时推送技术的支持程度不一，原生 EventSource 在一些旧版浏览器中存在兼容性问题，而 WebSocket 虽然功能强大，但在某些网络环境下可能被防火墙阻止，实现跨浏览器兼容需要额外的开发成本。
SSE（Server-Sent Events）是一种服务器向客户端单向推送数据的技术，就像订阅报纸一样，客户端一旦建立连接，服务器就可以随时发送新的数据。EventSource Polyfill 实现了这一协议，并解决了浏览器兼容性问题。
eventsource.js 体积小巧，不依赖任何框架，可无缝集成到任何前端项目中。| 技术类型 | 连接方式 | 资源消耗 | 延迟 | 适用场景 |
|---|---|---|---|---|
| 短轮询 | 频繁建立 HTTP 连接 | 高 | 高 | 简单数据更新 |
| 长轮询 | 保持连接等待数据 | 中 | 中 | 消息通知 |
| WebSocket | 全双工 TCP 连接 | 中 | 低 | 实时游戏、聊天 |
| SSE | 服务器单向推送 | 低 | 低 | 股票行情、实时监控 |
性能测试数据：在相同服务器配置下，SSE 比长轮询减少约 40% 的服务器资源占用，同时延迟降低约 30%，特别适合数据单向推送场景。
通过 SSE 可以实时推送系统运行状态、错误日志等信息，开发团队能够及时发现并处理问题。
在数据可视化场景中，SSE 可以将实时计算结果推送到前端，展示动态变化的数据图表。
虽然 SSE 是单向推送技术，但通过结合客户端定期发送状态更新，可以实现简单的多人游戏状态同步，相比 WebSocket 更节省服务器资源。
确保开发环境已安装 Node.js 和 npm 包管理工具。
git clone <repository_url>
cd EventSource
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('无法获取实时行情，请稍后重试');
};
确保服务器端正确设置 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 应用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online