前端开发中如何优雅地使用 Server-Sent Events（SSE）实现实时推送

作者：小彭努力中
日期：2025-06-24
技术栈：Vue3 + TypeScript + Node.js + SSE
关键词：实时推送、SSE、Vue3、前端优化、消息通知系统

---

一、前言

在前端开发中，实时通讯的需求越来越广泛，无论是即时消息系统、任务进度追踪还是金融数据大屏，实时性都极其关键。

除了 WebSocket，SSE（Server-Sent Events） 是一种更轻量、原生、易于部署的实时通信方案。本篇文章将带你系统学习 SSE 的原理，并通过一个完整的 Vue3 + Node 后端实践案例，实现一个“实时任务进度推送系统”。

---

二、什么是 SSE？

SSE（Server-Sent Events） 是一种浏览器原生支持的客户端-服务器单向通信机制。

特点概览：

• ✅ 基于 HTTP 协议（text/event-stream）

• ✅ 服务器主动推送消息

• ✅ 客户端自动重连

• ✅ 支持事件 ID 断点续传

• ❌ 单向通信（只支持服务端 → 客户端）

• ❌ 不支持二进制数据（仅文本）

✅ 适合的场景：

• 实时数据流（股票、监控）

• 实时进度通知（任务队列）

• 后台消息推送（公告提醒）

---

三、SSE 原理 + 报文格式详解

报文格式：

data: 这是第一条消息
id: 1
event: message

data: 第二条消息
id: 2

<两个换行表示消息结束>

自动重连机制：

断开连接后，浏览器会自动携带 Last-Event-ID 请求重新连接：

Last-Event-ID: 2

服务器可从该 ID 开始恢复推送。

---

四、完整实践案例：任务进度实时推送系统（Vue3 + Node）

项目结构

sse-demo/
├── backend/       # Node服务端
├── frontend/      # Vue3前端

---

Step 1：服务端实现（Node.js + Express）

// backend/index.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

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

  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    res.write(`data: ${JSON.stringify({ progress })}\n\n`);

    if (progress >= 100) {
      clearInterval(interval);
      res.end();
    }
  }, 1000);

  req.on('close', () => {
    clearInterval(interval);
    console.log('客户端断开连接');
  });
});

app.listen(3001, () => {
  console.log('SSE服务启动：http://localhost:3001/sse');
});

---

Step 2：前端实现（Vue3 Composition API）

✅ 安装基本项目

npm init vue@latest sse-demo
cd sse-demo
npm install

✅ 实现 useSSE.ts 封装

// src/hooks/useSSE.ts
import { ref, onUnmounted } from 'vue';

export function useSSE(url: string) {
  const progress = ref(0);
  const source = new EventSource(url);

  source.onmessage = (event) => {
    const data = JSON.parse(event.data);
    progress.value = data.progress;
  };

  source.onerror = (err) => {
    console.error('SSE连接错误', err);
    source.close();
  };

  onUnmounted(() => {
    source.close();
  });

  return { progress };
}

✅ 页面中使用

---

五、SSE 与 WebSocket 的实际对比与选型建议

项目	SSE	WebSocket
通信方向	单向	双向
协议	HTTP/1.1	自定义（需 WS 握手）
适配场景	简单实时推送	聊天、游戏
断点续传	✅ 支持	❌ 需自实现
兼容性	❌ IE 不支持	✅ 支持广泛

✅ 如果你的需求只是“服务器 → 客户端”的实时数据更新，SSE 更轻量、部署更简单。

---

六、注意事项

• ✅ 跨域请求时，服务端需配置 Access-Control-Allow-Origin

• ✅ 前端不能用 fetch 替代，需要用 new EventSource()

• ✅ 若部署到 nginx 记得关闭缓存，启用 X-Accel-Buffering: no

• ❌ 不适合发送图片、视频等二进制内容

• ❌ IE/部分低版本浏览器不支持（可使用 polyfill）

---

七、结语

本文从原理讲起，结合 Vue3 实现了一个完整的任务进度实时推送系统，帮助你在实际项目中快速落地 SSE。

---

有用的话不妨点个赞

如果你喜欢这篇文章，欢迎 点赞、⭐收藏、评论！

我会继续更新更多关于前端工程化、Vue3、Three.js、OpenLayers、WebSocket 的实战教程，敬请关注！