10分钟极速掌握！SpringBoot+Vue3整合SSE实现实时消息推送

一、为什么要用SSE？说起来，

在移动端和单页应用中。使用者常常期望即时反馈：聊天消息、订单状态、程序通知等。如果采用轮询，每秒请求一次既浪费网络又导致延迟；WebSocket虽然强大，但维护成本高，跨域和防火墙问题多。SSE提供了简单可靠的一路通道。兼容HTTP/1.1+，无须额外协议协商。

痛点：

• 者不熟悉事件流模型，导致频繁出现“连接断开”“数据丢失”问题。
• 浏览器兼容性担忧：老旧IE不支持EventSource。怎么说呢，
• 后端资源泄漏这方面。未及时关闭Emitter导致内存使用飙升。

二、技术快速概览

Spring Boot

轻量级配置、内置Tomcat、一键打包即可部署。我们只需添加 spring-boot-starter-web 与 sse-emitter 即可。

Vue 3 + Composition API

响应式根据数据调整 UI；老实说，@vue/cli 支持 Vite 或 webpack； Composition API 让事件处理逻辑更集中易读。 不过，

SSE

单向事件流的观点是。客户端打开连接后服务器持续 push；无需长轮询，低延迟且易调试。

三、环境搭建

后端 Spring Boot 快速启动

curl https://start.spring.io/starter.zip \
-d dependencies=web \
-d name=sse-demo \
-o sse-demo.zip
unzip sse-demo.zip
cd sse-demo
mvn spring-boot:run

前端 Vue 3 项目创建

npm create vite@latest sse-client -- --template vue-ts
cd sse-client
npm i
npm run dev

浏览器兼容提醒：

"如果你正在使用 IE11。请先确认其是否通过 polyfill 支持 EventSource，否则将无法接收推送。"

四、后端实现

创建 SseController.java

@RestController
public class SseController {
private final Map emitters = new ConcurrentHashMap<>;老实说，@GetMapping
public SseEmitter subscribe {
SseEmitter emitter = new SseEmitter;// 30秒超时
String clientId = UUID.randomUUID.toString;怎么说呢，emitters.put;// 自动清理
emitter.onCompletion -> emitters.remove);emitter.onTimeout -> emitters.remove);return emitter;说起来，}
@PostMapping
public ResponseEntity send(@RequestParam String clientId。@RequestParam String message) {
SseEmitter emitter = emitters.get;if return ResponseEntity.notFound.build;
try {
emitter.send
.name
.data);return ResponseEntity.ok.build;} catch {
emitter.completeWithError;emitters.remove;return ResponseEntity.status.build;}
}
}

避免泄漏的观点是。

"一定记得在 onCompletion / onTimeout 中移除 Emitter，否则长时间空闲会占满内存。"

五、前端实现

封装 SSE 服务类 – SseService.ts

export interface MessagePayload { data: string }
export class SseService {
private source: EventSource | null = null;private listeners: Array<=>void> =;constructor {
this.source = new EventSource;this.source.onmessage = e => this.listeners.forEach));按理说，this.source.onerror = err => console.error;}
addListener=>void): void {
this.listeners.push;}
再看close，void { this.source?.close，}
}

在 Vue 组件中使用 – App.vue 示例

错误处理建议的观点是。

"在 onerror 回调里可把错误信息写入 UI，让开发者及时发现网络或服务器异常。"

六、运行与验证

• # 后端启动： `mvn spring-boot:run` 或 `./mvnw spring-boot:run`。
• # 前端启动： `npm run dev` → 打开 .
• # 测试发送消息： Postman 或 curl 调用：

  curl -X POST http://localhost:8080/send \\
  -d clientId=xxxx \\
  -d message='Hello World!'
  }

• Acknowledge：页面即刻显示 “Hello World!”，
• Avoids common pitfalls:
  • No duplicated connections – use a unique clientId.
  • No memory leaks – always call `close` on component unmount.
  • No cross‑domain errors – ensure same-origin or CORS headers.

痛点回顾：

• SSE 浏览器支持有限 → 检查 polyfill 或降级方案。
• Efferent resource leak → 自动清理映射表。
• Error handling 混乱 → 在 Service 层统一捕获并传递给 UI。
• CORS / 同源策略 → 在 Spring Boot 添加 `@CrossOrigin` 或全局 CORS 配置。

此方案已被多家电商与社交项目验证。在仅十分钟内就可以完成集成，并在生产环境下稳定运行。祝你编码愉快 🚀