SSE 服务器推送技术

SSE协议（Server-Sent Events）是一种基于HTTP的服务器推送技术，主要用于实现服务器向客户端的单向、持续数据流传输。

用途

1. 实时数据推送

适用于股票行情更新、新闻推送、社交媒体通知等需要服务器主动推送数据的场景‌。 例如，服务器可实时将最新股价或新闻推送给客户端，无需客户端轮询。

2. 大模型交互

在AI对话平台（如ChatGPT）中，SSE用于实时传输模型生成的文本，实现流畅的对话体验‌

3. 文件处理与进度反馈

支持文件上传/下载进度的实时更新，如进度条动态显示‌

SSE 与 WebSocket 对比

• SSE仅支持服务器到客户端的单向通信，适合无需客户端回传数据的场景‌
• 与WebSocket相比，SSE更简单
• 基于标准HTTP协议，轻量且易实现‌

客户端代码

1.基础api

• EventSource对象：用于创建SSE连接，监听服务器发送的事件。

• onmessage事件：当服务器发送消息时触发，可在事件处理函数中处理消息数据。每个消息包含以下属性：

  • data：服务器发送的消息数据（字符串格式）
  • event：事件类型（可选，默认值为message）
  • id：消息 ID（可选，用于标识消息，服务器可在后续消息中引用该 ID）
  • retry：重连时间（可选，单位：毫秒，用于指定客户端在连接中断后重新连接的时间间隔）

2.代码

const eventSource = new EventSource('http://localhost:3000/sse-endpoint');

eventSource.onmessage = (event) => {
  event
  console.log('收到服务器消息:', event.data);
};

服务端代码

nodejs 代码

const express = require('express');
const app = express();

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

  let counter = 0;
  const interval = setInterval(() => {
    counter++;
    res.write(`data: ${counter}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});