JavaScriptSSE实时推送技术全解析

本文深入解析了JavaScript中基于HTTP的服务器推送技术——Server-Sent Events（SSE），从前端EventSource API的简洁接入、后端text/event-stream格式的数据流构建，到自定义事件监听、智能断线重连与Last-Event-ID断点恢复机制，全面覆盖核心实现细节；同时结合日志监控、行情推送等典型场景，客观剖析其轻量高效、自动重连、兼容性好等优势，也坦诚指出不支持二进制、IE缺失及代理缓冲等实际限制，为开发者提供了一站式、可落地的实时单向通信实践指南。

服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器通过HTTP连接将数据“推送”到浏览器的技术。与WebSocket不同，SSE是单向的——仅从服务器到客户端，适合用于实时更新场景，比如股票行情、新闻推送、日志监控等。JavaScript中的EventSource API为实现SSE提供了原生支持，使用起来简单高效。

基本用法：建立SSE连接

在前端JavaScript中，只需创建一个EventSource实例并指向后端提供的SSE接口即可：

const eventSource = new EventSource('/api/stream');

eventSource.onmessage = function(event) {
  console.log('收到消息:', event.data);
  // 更新页面内容
  document.getElementById('output').innerText += event.data + '\n';
};

eventSource.onerror = function(err) {
  console.error('SSE连接出错:', err);
};

只要服务器保持连接，后续推送的消息都会触发onmessage回调。

后端实现：发送符合格式的数据

SSE要求服务器返回的内容类型为text/event-stream，并且消息需遵循特定格式。每条消息可以包含以下字段：

• data: 消息正文
• id: 事件ID，用于断线重连时定位位置
• event: 自定义事件名称（可选）
• retry: 重连间隔（毫秒）

例如Node.js（Express）后端示例：

app.get('/api/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  const sendEvent = (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // 模拟定时推送
  const interval = setInterval(() => {
    sendEvent({ time: new Date().toISOString(), value: Math.random() });
  }, 2000);

  // 客户端断开时清理
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

处理自定义事件和断线重连

除了默认的message事件，服务器还可以发送自定义事件：

// 后端发送
res.write('event: notification\ndata: {"msg": "新通知"}\n\n');

前端监听该事件：

eventSource.addEventListener('notification', function(event) {
  const data = JSON.parse(event.data);
  alert('提醒：' + data.msg);
});

浏览器会自动尝试重连（默认约3秒），可通过retry字段调整：

res.write('retry: 5000\n');

若设置了id，浏览器会在重连请求中携带Last-Event-ID头，可用于恢复断点。

适用场景与注意事项

SSE适用于服务端频繁推送、客户端只读的场景，优势在于基于HTTP、兼容性好、自动重连、轻量。但注意以下几点：

• 每个EventSource连接对应一个HTTP/1.1长连接，过多连接可能影响服务器性能
• 不支持二进制数据，只能传输UTF-8文本
• IE和旧版浏览器不支持EventSource，必要时可用polyfill
• 反向代理（如Nginx）需配置关闭缓冲，防止延迟输出

基本上就这些，SSE是一种简单实用的实时通信方案，尤其适合不需要双向交互的推送需求。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~