JavaScriptSSE事件应用全解析

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript SSE服务器事件应用详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

SSE是服务器向浏览器单向推送数据的技术，基于HTTP、使用EventSource API实现，适合实时更新场景。1. 前端通过new EventSource()连接后端接口，onmessage接收数据；2. 后端返回Content-Type为text/event-stream，按格式发送data、event、id、retry字段；3. 支持自定义事件监听与断线重连，浏览器自动携带Last-Event-ID恢复；4. 适用于日志监控、行情推送等服务端频繁推送场景，但不支持二进制和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学习网！更多关于文章的相关知识，也可关注golang学习网公众号。