JavaScript实现SSE实时推送方法

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript实现SSE服务器推送方法》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

SSE是服务器向浏览器单向推送数据的技术，使用EventSource建立连接，通过text/event-stream格式持续发送消息，适合实时通知等场景。

服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器通过HTTP连接向浏览器推送数据的技术。与WebSocket不同，SSE是单向通信，只允许服务器向客户端推送消息，适合用于实时通知、动态更新等场景，比如股票行情、新闻推送或日志监控。

前端如何使用JavaScript建立SSE连接

在浏览器中，使用EventSource对象可以轻松连接支持SSE的服务器。

示例代码：

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

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

eventSource.onerror = function(event) {
  console.error('SSE连接出错', event);
  // 浏览器会自动尝试重连
};

后端如何实现SSE响应（以Node.js为例）

SSE要求服务器返回特定格式的内容类型，并保持连接长期打开。以下是使用Express的简单实现。

关键点：

Node.js + Express 示例：

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

  // 每隔3秒推送一条消息
  const interval = setInterval(() => {
    const data = { time: new Date().toISOString() };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 3000);

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

SSE消息格式和自定义事件

SSE支持发送标准消息和自定义事件，服务器可以通过不同的字段控制消息行为。

常见字段：

服务器发送自定义事件：

res.write('event: notification\ndata: {"msg": "新消息提醒"}\nid: 101\n\n');

前端监听：

eventSource.addEventListener('notification', function(event) {
  console.log('收到通知:', event.data);
});

基本上就这些。SSE使用简单，兼容性好，适合不需要双向通信的推送场景。只要注意保持连接稳定、合理处理错误和重连，就能实现实时更新功能。不复杂但容易忽略细节，比如头部设置和换行格式。

好了，本文到此结束，带大家了解了《JavaScript实现SSE实时推送方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！