服务器发送事件（SSE）：前端实时通信的轻量解决方案

在Web实时通信场景中，开发者往往需要在服务端主动向客户端推送数据，服务器发送事件（Server-Sent Events，SSE）作为一种轻量级的单向通信技术，凭借其简单的实现方式、原生的浏览器支持，成为轮询、WebSocket之外的优质选择。本文将从协议概述、技术对比、应用场景、前端实现等维度，全面解析SSE技术的核心要点与实战价值。

一、SSE协议概述

SSE是一种基于HTTP的服务器到客户端的单向实时通信协议，属于HTML5的原生特性，其核心是让服务器能够持续向客户端推送事件流数据，而客户端仅负责接收和处理数据，无法反向向服务器发送事件。

SSE的核心技术载体是浏览器原生的EventSource接口，通过该接口客户端可与服务器建立持久的HTTP连接，服务器以text/event-stream的MIME类型向客户端传输UTF-8编码的文本数据流。事件流由若干消息组成，消息之间以双换行符（\n\n）分隔，支持event（事件类型）、data（数据内容）、id（事件ID）、retry（重连时间）四大核心字段，同时允许以冒号开头的注释行，可用于维持连接防止超时。

SSE具备原生的自动重连机制，当客户端与服务器的连接意外关闭时，浏览器会自动尝试重新建立连接，也可通过retry字段自定义重连间隔，开发者还能通过close()方法手动终止连接，灵活性较高。

二、与其他技术对比

在Web实时通信领域，SSE常与轮询（含长轮询） 、WebSocket形成竞争，三者各有技术特性和适用场景，核心对比如下：

技术特性	SSE	轮询/长轮询	WebSocket
通信方向	单向（服务端→客户端）	单向（客户端请求→服务端响应）	双向（全双工）
连接类型	持久HTTP连接，原生维持	短连接/伪长连接，频繁请求	独立于HTTP的TCP连接
实现复杂度	低，浏览器原生`EventSource`，服务端简单配置MIME类型	低，无特殊API依赖	高，需服务端单独实现WebSocket协议，处理握手、帧解析
自动重连	原生支持，可自定义重连时间	需开发者手动实现重连逻辑	需开发者手动实现重连、心跳检测
数据格式	限定UTF-8文本流，有固定字段规范	无限制，可自定义JSON/XML等	无限制，文本/二进制均可
连接限制	非HTTP/2环境下，浏览器单域6个连接限制	受HTTP连接池限制，频繁请求易造成资源浪费	无单域连接数限制

核心适用场景区分：

SSE适用于服务端单向推送的场景，如实时公告、数据监控、日志推送，无需客户端反向通信；
轮询适合对实时性要求低、服务端改造困难的简单场景，但其频繁的HTTP请求会带来额外的网络和服务器开销；
WebSocket适用于双向实时交互的场景，如在线聊天、实时游戏、协同编辑，但其实现和维护成本更高。

此外，SSE基于HTTP协议，可直接复用现有HTTP的缓存、认证、代理机制，而WebSocket需要单独处理这些特性，这也是SSE在轻量场景中的重要优势。

三、SSE在接口调用中的应用

SSE在接口调用中主要解决传统HTTP接口单向请求-响应模型的局限性，适用于需要服务端主动触发数据更新、无需客户端发起重复请求的接口场景，既覆盖常规业务接口需求，更是大模型AI接口实时交互的最优轻量方案，核心应用方向分为通用接口场景与大模型专属场景：

（一）通用接口场景

1. 异步任务结果推送

对于文件上传、数据导出、大数据计算等耗时的异步接口，传统方案需要客户端轮询调用"查询任务状态"接口，而通过SSE可让服务端在任务完成/进度更新时，主动向客户端推送结果和进度，减少无效的接口请求。例如：客户端发起大数据导出请求后，服务端建立SSE连接，实时推送导出进度（10%→50%→100%），完成后直接推送文件下载链接。

2. 接口状态实时同步

在分布式系统、微服务架构中，部分核心接口的运行状态（如接口调用量、错误率、响应时间）需要实时同步到监控端，通过SSE可将服务端的接口监控数据以事件流形式推送给前端，实现监控面板的实时更新，无需前端定时调用监控接口。

3. 跨端接口数据同步

在多终端登录的场景中，当某一终端对数据进行修改（如修改用户信息、提交表单），服务端可通过SSE向其他在线终端推送接口数据更新事件，实现多终端数据的实时同步，例如：PC端修改个人资料后，手机端无需刷新页面，通过SSE接收数据更新事件并自动渲染最新内容。

4. 异常接口告警推送

对于核心业务接口，服务端可监控其运行异常（如超时、报错、熔断），当异常发生时，通过SSE向开发、运维人员的监控终端推送告警事件，实现异常的实时感知，相比传统的邮件、短信告警，时效性更强。

（二）大模型接口专属场景

大模型AI接口普遍存在响应耗时久、输出内容长的特点，传统一次性返回接口会导致前端长时间等待、用户体验极差，而SSE的流式推送特性完美适配大模型的逐字输出逻辑，成为AI对话类产品的标配技术，核心应用如下：

1. 流式文本生成

大模型生成文章、代码、文案、摘要等长文本时，服务端无需等待全部内容计算完成，而是通过SSE逐段、逐句甚至逐字推送生成结果，前端实时接收并渲染到页面，让用户直观看到内容生成过程，彻底告别加载等待。

代码说明（Node.js后端示例）

基于Express框架实现大模型流式文本生成的SSE接口，核心是设置正确的响应头，逐段推送大模型生成的内容，贴合SSE协议规范：

javascript 复制代码

// 引入依赖
const express = require('express');
const router = express.Router();
// 模拟大模型（实际项目替换为真实大模型API，如OpenAI、智谱等）
const mockLLM = {
  streamGenerate: async (prompt, callback) => {
    // 模拟大模型逐字生成内容（实际为模型实时输出）
    const content = "SSE是一种轻量级的实时通信技术，适用于服务端单向推送场景，尤其适合大模型流式输出。";
    for (let i = 0; i < content.length; i++) {
      // 每100ms推送一个字符，模拟流式生成
      await new Promise(resolve => setTimeout(resolve, 100));
      callback(content[i]);
    }
  }
};

// 大模型流式文本生成SSE接口
router.get('/api/llm/stream-generate', (req, res) => {
  // 1. 配置SSE响应头（核心，不可缺少）
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache'); // 禁用缓存，确保实时推送
  res.setHeader('Connection', 'keep-alive'); // 维持持久连接
  res.setHeader('Access-Control-Allow-Origin', '*'); // 跨域配置（根据实际调整）

  // 2. 获取前端传入的生成提示词
  const { prompt } = req.query;

  // 3. 调用大模型流式生成，逐段推送
  mockLLM.streamGenerate(prompt, (chunk) => {
    // 按SSE协议格式推送数据（data字段存储内容，双换行符分隔消息）
    res.write(`data: ${JSON.stringify({ type: 'stream', content: chunk })}\n\n`);
  }).then(() => {
    // 生成完成，推送结束标识
    res.write(`event: llm_end\ndata: {"msg": "生成完成"}\n\n`);
    // 结束响应
    res.end();
  }).catch((err) => {
    // 异常处理，推送错误信息
    res.write(`event: llm_error\ndata: {"msg": "${err.message}"}\n\n`);
    res.end();
  });
});

module.exports = router;

返回数据格式说明

服务端推送的SSE消息严格遵循text/event-stream格式，每条消息以双换行符\n\n分隔，核心分为"流式内容推送""生成结束""异常错误"三种消息类型，格式如下：

plain 复制代码

// 1. 流式内容推送（核心，逐段推送）
data: {"type": "stream", "content": "S"}

data: {"type": "stream", "content": "S"}

data: {"type": "stream", "content": "E"}

// 2. 生成完成（自定义event事件：llm_end）
event: llm_end
data: {"msg": "生成完成"}

// 3. 异常错误（自定义event事件：llm_error）
event: llm_error
data: {"msg": "生成失败，请重试"}

前端通过onmessage监听流式内容，通过addEventListener('llm_end')监听生成结束，通过addEventListener('llm_error')监听异常，与前文Vue3实现代码完全适配。

2. 实时对话与交互

AI智能客服、聊天机器人、智能助手等对话场景，需要大模型实时回应用户提问，SSE可建立持久连接，实现用户发送问题后，模型边思考边推送回复内容，模拟真人打字效果，提升对话沉浸感。支持自定义事件字段，区分普通回复、错误提示、结束标识等不同消息类型。

代码说明（Node.js后端示例）

实现大模型实时对话的SSE接口，支持接收用户提问（通过请求参数传入），流式推送对话回复，同时区分"回复内容""对话结束"两种消息：

javascript 复制代码

const express = require('express');
const router = express.Router();

// 模拟大模型对话（实际替换为真实大模型对话API）
const mockChatLLM = {
  streamChat: async (question, callback) => {
    // 模拟大模型思考后逐句回复
    const replies = [
      "你好！",
      "我是基于SSE实现的智能助手，",
      "很高兴为你解答问题。",
      "请问你还有其他疑问吗？"
    ];
    for (const reply of replies) {
      // 每500ms推送一句，模拟真人打字节奏
      await new Promise(resolve => setTimeout(resolve, 500));
      callback(reply);
    }
  }
};

// 大模型实时对话SSE接口
router.get('/api/llm/stream-chat', (req, res) => {
  // 配置SSE响应头（必选）
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  // 获取用户提问（前端传入的对话内容）
  const { question } = req.query;
  if (!question) {
    res.write(`event: llm_error\ndata: {"msg": "请输入提问内容"}\n\n`);
    return res.end();
  }

  // 流式推送对话回复
  mockChatLLM.streamChat(question, (replyChunk) => {
    // 推送对话片段，携带对话ID（用于前端关联上下文）
    res.write(`data: ${JSON.stringify({
      type: 'chat',
      chatId: Date.now(), // 唯一对话ID，用于多轮对话关联
      content: replyChunk
    })}\n\n`);
  }).then(() => {
    // 对话结束，推送结束标识
    res.write(`event: chat_end\ndata: {"chatId": Date.now(), "msg": "对话结束"}\n\n`);
    res.end();
  }).catch((err) => {
    res.write(`event: llm_error\ndata: {"msg": "对话失败：${err.message}"}\n\n`);
    res.end();
  });
});

module.exports = router;

返回数据格式说明

实时对话场景的SSE消息，增加了chatId字段用于关联多轮对话上下文，便于前端区分不同对话的回复内容，核心格式如下：

plain 复制代码

// 1. 对话回复片段（默认message事件）
data: {"type": "chat", "chatId": 1710678901234, "content": "你好！"}

data: {"type": "chat", "chatId": 1710678901234, "content": "我是基于SSE实现的智能助手，"}

// 2. 对话结束（自定义event事件：chat_end）
event: chat_end
data: {"chatId": 1710678901234, "msg": "对话结束"}

// 3. 错误提示（自定义event事件：llm_error）
event: llm_error
data: {"msg": "请输入提问内容"}

前端可通过chatId将同一轮对话的所有回复片段拼接在一起，实现完整的对话展示，同时通过chat_end事件提示用户对话已结束，提升交互体验。

3. 任务进度监控

大模型执行复杂任务（如多轮推理、文档解析、数据集训练、模型微调）时，会分阶段执行多个子任务，通过SSE可实时推送任务节点进度、执行状态、中间结果，让前端清晰展示任务全貌。比如用户上传文档让大模型分析，SSE会依次推送"文档解析中→关键词提取中→内容总结中→任务完成"等阶段进度，搭配进度条、状态文案实时更新，用户可全程掌控任务执行情况，避免因任务耗时过长产生焦虑。

代码说明（Node.js后端示例）

实现大模型复杂任务进度监控的SSE接口，实时推送任务阶段、进度百分比、中间结果，支持任务取消（通过前端主动关闭SSE连接）：

javascript 复制代码

const express = require('express');
const router = express.Router();

// 模拟大模型复杂任务（文档解析+关键词提取+内容总结）
const mockLLMTask = {
  runTask: async (taskId, callback) => {
    // 任务阶段及对应进度
    const taskStages = [
      { stage: "文档解析中", progress: 20, middleResult: "已读取文档1000字" },
      { stage: "关键词提取中", progress: 50, middleResult: "已提取关键词15个" },
      { stage: "内容总结中", progress: 80, middleResult: "总结已完成60%" },
      { stage: "任务完成", progress: 100, middleResult: "文档总结已生成" }
    ];

    for (const stage of taskStages) {
      // 每1秒推送一次进度，模拟任务执行过程
      await new Promise(resolve => setTimeout(resolve, 1000));
      callback(stage);
    }
  }
};

// 大模型任务进度监控SSE接口
router.get('/api/llm/task-monitor', (req, res) => {
  // 配置SSE响应头
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  // 获取任务ID（前端传入，用于唯一标识任务）
  const { taskId } = req.query;
  if (!taskId) {
    res.write(`event: task_error\ndata: {"msg": "任务ID不能为空"}\n\n`);
    return res.end();
  }

  // 推送任务进度
  mockLLMTask.runTask(taskId, (stageInfo) => {
    res.write(`data: ${JSON.stringify({
      taskId,
      stage: stageInfo.stage,
      progress: stageInfo.progress, // 进度百分比（0-100）
      middleResult: stageInfo.middleResult, // 中间结果
      timestamp: Date.now() // 时间戳，用于前端排序
    })}\n\n`);
  }).then(() => {
    // 任务完成，推送结束标识
    res.write(`event: task_complete\ndata: {"taskId": "${taskId}", "msg": "任务执行完成"}\n\n`);
    res.end();
  }).catch((err) => {
    res.write(`event: task_error\ndata: {"taskId": "${taskId}", "msg": "任务执行失败：${err.message}"}\n\n`);
    res.end();
  });

  // 监听前端关闭连接（用户取消任务）
  req.on('close', () => {
    console.log(`用户取消任务：${taskId}`);
    res.end();
  });
});

module.exports = router;

返回数据格式说明

任务进度监控的SSE消息，核心包含任务ID、阶段、进度百分比、中间结果，便于前端展示进度条和实时状态，格式如下：

plain 复制代码

// 1. 任务进度推送（默认message事件）
data: {
  "taskId": "task_123456",
  "stage": "文档解析中",
  "progress": 20,
  "middleResult": "已读取文档1000字",
  "timestamp": 1710679001234
}

data: {
  "taskId": "task_123456",
  "stage": "关键词提取中",
  "progress": 50,
  "middleResult": "已提取关键词15个",
  "timestamp": 1710679002234
}

// 2. 任务完成（自定义event事件：task_complete）
event: task_complete
data: {"taskId": "task_123456", "msg": "任务执行完成"}

// 3. 任务错误（自定义event事件：task_error）
event: task_error
data: {"taskId": "task_123456", "msg": "任务执行失败：文档读取错误"}

前端可根据progress字段渲染进度条，根据stage字段展示当前任务阶段，根据middleResult字段展示中间过程，实现任务进度的可视化监控。

四、技术实现（前端，Vue3+JavaScript实现）

SSE前端核心基于浏览器原生EventSource接口，在Vue3中可结合**组合式API（Setup）**实现，支持跨域配置、默认事件监听、自定义事件监听、错误处理和手动关闭连接，针对大模型流式输出场景，还可优化消息拼接与渲染逻辑，以下是完整的实战实现代码，包含核心功能和最佳实践。

1. 环境准备

无需额外安装依赖，直接使用浏览器原生EventSource，Vue3项目可基于Vite/CLI搭建，确保服务端已开启CORS跨域支持（若前后端不同源），且服务端响应头配置为Content-Type: text/event-stream；大模型接口需额外配置流式输出、禁用缓存，保证数据逐段推送。

2. 完整实现代码（Vue3组件）

js 复制代码

<template>
  <div class="sse-demo">
    <h3>SSE实时消息推送（含大模型流式输出）</h3>
    <button @click="startSSE" :disabled="sseConnected">开启SSE连接</button>
    <button @click="closeSSE" :disabled="!sseConnected">关闭SSE连接</button>
    <div class="message-list">
      <h4>通用消息：</h4>
      <ul v-for="(msg, index) in defaultMessages" :key="index">{{ msg }}</ul>
      <h4>大模型流式输出：</h4>
      <div class="stream-content">{{ streamText }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

// 状态管理：是否已建立SSE连接
const sseConnected = ref(false)
// 存储通用消息
const defaultMessages = ref([])
// 存储大模型流式文本
const streamText = ref('')
// 定义EventSource实例，方便全局操作
let eventSource = null

// 开启SSE连接（适配大模型接口）
const startSSE = () => {
  try {
    // 配置SSE连接：同源直接传URL，跨域传配置对象（withCredentials: true表示携带cookie）
    // 大模型SSE接口地址示例
    const sseUrl = 'http://localhost:3000/api/llm/stream'
    eventSource = new EventSource(sseUrl, { withCredentials: true })

    // 连接成功回调（open事件）
    eventSource.onopen = () => {
      console.log('SSE连接成功')
      sseConnected.value = true
      defaultMessages.value.push('SSE连接成功，开始接收消息...')
      // 清空上次流式内容
      streamText.value = ''
    }

    // 监听默认message事件（通用推送+大模型流式输出均适用）
    eventSource.onmessage = (e) => {
      console.log('收到消息：', e.data)
      // 处理大模型流式数据：直接拼接文本
      try {
        // 若为JSON格式数据（大模型常用），解析后拼接
        const res = JSON.parse(e.data)
        if (res.type === 'stream') {
          streamText.value += res.content
        } else {
          defaultMessages.value.push(e.data)
        }
      } catch (err) {
        // 纯文本消息直接展示
        streamText.value += e.data
      }
    }

    // 监听自定义事件（如大模型任务结束、错误事件）
    eventSource.addEventListener('llm_end', (e) => {
      defaultMessages.value.push('大模型生成任务已完成')
      console.log('大模型任务结束')
    })

    // 错误处理（onerror事件）
    eventSource.onerror = (e) => {
      if (e.readyState === EventSource.CLOSED) {
        console.error('SSE连接被关闭')
        defaultMessages.value.push('SSE连接被关闭，正在尝试重连...')
      } else {
        console.error('SSE连接发生错误：', e)
        defaultMessages.value.push(`SSE连接错误：${e.message || '未知错误'}`)
      }
      sseConnected.value = false
    }
  } catch (err) {
    console.error('开启SSE连接失败：', err)
    defaultMessages.value.push(`开启SSE失败：${err.message}`)
  }
}

// 关闭SSE连接
const closeSSE = () => {
  if (eventSource && eventSource.readyState !== EventSource.CLOSED) {
    eventSource.close()
    eventSource = null
    sseConnected.value = false
    defaultMessages.value.push('手动关闭SSE连接')
    console.log('手动关闭SSE连接')
  }
}

// 组件卸载时关闭SSE连接，防止内存泄漏
onUnmounted(() => {
  closeSSE()
})
</script>

<style scoped>
.sse-demo {
  width: 800px;
  margin: 20px auto;
}
button {
  margin: 0 10px 20px 0;
  padding: 8px 16px;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.message-list {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
}
.stream-content {
  min-height: 100px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
  white-space: pre-wrap;
}
ul {
  list-style: none;
  padding-left: 0;
  line-height: 1.8;
}
</style>

3. 核心实现要点

跨域配置 ：通过EventSource的第二个参数设置withCredentials: true，实现跨域携带Cookie，需服务端配合开启CORS；
事件监听 ：默认消息通过onmessage监听，自定义事件（如大模型结束、告警）通过addEventListener监听，与服务端event字段一一对应；
状态管理 ：通过readyState判断连接状态（0：正在连接，1：已连接，2：已关闭）；
大模型流式优化：采用文本拼接方式渲染流式内容，支持JSON/纯文本两种数据格式解析，适配主流大模型接口输出规范；
内存泄漏防护 ：在Vue3组件的onUnmounted钩子中手动关闭SSE连接，避免组件卸载后连接仍存在；
错误处理 ：在onerror中区分连接关闭和异常错误，提升用户体验。

五、SSE的局限性

尽管SSE优势明显，但仍存在一些技术限制，使其在部分场景中无法替代WebSocket，主要局限性包括：

通信单向性：仅支持服务端向客户端推送数据，若需要客户端反向通信，需配合传统HTTP接口，无法实现真正的双向交互；
连接数限制：在非HTTP/2环境下，浏览器对单域名的SSE连接数限制为6个，当打开多个页面/标签时，易触发连接数上限，Chrome、Firefox已明确该问题"不会解决"；
数据格式限制：仅支持UTF-8编码的文本数据，无法直接传输二进制数据，若需传输二进制，需先进行Base64编码，增加数据体积；
浏览器兼容 ：虽然主流浏览器（Chrome、Firefox、Edge）均原生支持，但IE浏览器完全不支持，若需兼容IE，需引入第三方polyfill；
服务端压力：SSE基于持久HTTP连接，当客户端数量过多时，会占用服务端大量的文件描述符，对服务端的连接管理能力要求较高。