SSE服务器推送实现教程（JavaScript）

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript实现SSE服务器推送教程》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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

理论要掌握，实操不能落！以上关于《SSE服务器推送实现教程（JavaScript）》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！