<think>嗯，用户想了解如何在
Spring Boot后端和Vite+Vue3+TS前端中
使用Server-Sent Events（
SSE）。我需要先回忆一下
SSE的基本概念和用途。
SSE是一种服务器向客户端
实时推送数据的技术，基于HTTP协议，适用于单向通信，比如
实时通知、股票价格更新等场景。与WebSocket不同，
SSE是单向的，只能服务器向客户端发送消息，但
实现起来相对简单。
首先，
后端的
Spring Boot部分。我记得
Spring MVC或者WebFlux都支持
SSE。需要创建一个控制器，返回
SseEmitter对象。每个客户端连接会生成一个
SseEmitter实例，用于发送事件。可能需要处理跨域问题，所以得加上@CrossOrigin注解或者配置全局CORS。此外，需要保持连接，定期发送
数据，否则连接可能会超时断开。还要考虑异常处理和资源释放，比如在客户端断开时关闭emitter。
然后是前端部分，Vite+Vue3+TypeScript的环境。前端需要
使用EventSource API来建立连接，监听服务器发送的事件。在Vue3中，可以在组件的onMounted钩子中创建
EventSource，指定
后端接口的URL。需要注意跨域问题，如果前
后端域名不同，
后端必须正确配置CORS。
EventSource有open、message、error等事件需要处理，特别是错误处理可能需要重连机制。另外，在组件卸载时，应该关闭
EventSource连接，避免内存泄漏。
可能用户的实际需求是做一个
实时应用，比如消息
推送或者
数据监控。需要确保
后端能够处理多个客户端的连接，管理好每个
SseEmitter实例，避免内存泄漏。前端部分可能需要展示
实时数据，
使用Vue3的响应式变量来更新界面。TypeScript的类型定义也需要考虑，比如定义事件的
数据结构。
用户可能还关心如何传递
数据格式，比如发送JSON
数据，
后端需要设置media type为“application/json”或者“text/event
-stream”，前端解析
数据。此外，可能需要处理不同的event类型，或者重试时间等
SSE特性。还有身份验证的问题，比如如何在
SSE连接中传递token，可能需要
使用URL参数或者cookie，因为
EventSource默认不支持设置请求头。
需要提醒用户注意
SSE的兼容性，虽然现代浏览器都支持，但某些环境下可能需要polyfill。另外，连接断开后的重连策略，
EventSource默认会自动重连，但有时候可能需要手动处理。最后，给出一个简单的示例代码，让用户能够快速上手，并指出常见问题和解决方案，比如跨域、超时、
数据格式等。</think>在
后端 Spring Boot 和前端 Vite + Vue3 + TypeScript 中
使用 Server-Sent Events (SSE) 实现实时通信的完整方案如下：
---
### 一、
后端 Spring Boot 实现
#### 1. 添加依赖
```xml
<dependency>
<groupId>org.
springframework.
boot</groupId>
<artifactId>
spring-boot-starter
-web</artifactId>
</dependency>
```
#### 2. 创建
SSE 控制器
```
java
import org.
springframework.http.MediaType;
import org.
springframework.web.bind.annotation.GetMapping;
import org.
springframework.web.bind.annotation.RequestParam;
import org.
springframework.web.bind.annotation.RestController;
import org.
springframework.web.servlet.mvc.method.annotation.
SseEmitter;
@RestController
@CrossOrigin
(origins = "*"
) // 处理跨域
public class
SseController {
private final Map<String,
SseEmitter> emitters = new ConcurrentHashMap<>
();
// 前端连接入口
@GetMapping
(path = "/
sse/connect", produces = MediaType.TEXT_EVENT_STREAM_VALUE
)
public
SseEmitter connect
(@RequestParam String userId
) {
SseEmitter emitter = new
SseEmitter
(60_000L
); // 1分钟超时
emitters.put
(userId, emitter
);
emitter.onCompletion
(() -> emitters.remove
(userId
));
emitter.onTimeout
(() -> emitters.remove
(userId
));
return emitter;
}
// 发送消息方法（可被其他服务调用）
public void sendEvent
(String userId, String data
) {
SseEmitter emitter = emitters.get
(userId
);
if
(emitter != null
) {
try {
emitter.send
(SseEmitter.event
()
.data
(data
)
.id
(UUID.randomUUID
().toString
())
.comment
("
SSE Event"
));
} catch
(IOException e
) {
emitters.remove
(userId
);
}
}
}
}
```
#### 3. 配置项（可选）
在 `application.properties` 中调整：
```properties
# 增加异步超时时间
spring.mvc.async.request
-timeout=60000
```
---
### 二、前端 Vue3 + TS
实现
#### 1. 封装
SSE 工具类
```typescript
// src/utils/
sse.ts
interface
SSEOptions {
onMessage:
(data: string
) => void;
onError?:
(event: Event
) => void;
}
export class
SSEClient {
private
eventSource:
EventSource | null = null;
constructor
(private url: string, private options:
SSEOptions
) {}
connect
(): void {
this.
eventSource = new
EventSource
(this.url
);
this.
eventSource.onmessage =
(event: MessageEvent
) => {
this.options.onMessage
(event.data
);
};
this.
eventSource.onerror =
(error: Event
) => {
this.options.onError?.
(error
);
this.close
();
};
}
close
(): void {
this.
eventSource?.close
();
}
}
```
#### 2. 在 Vue 组件中
使用
```vue
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import {
SSEClient } from '@/utils/
sse'
const messages = ref<string[]>
([]
)
let
sseClient:
SSEClient | null = null
onMounted
(() => {
// 连接
SSE（假设用户 ID 为 123）
sseClient = new
SSEClient
('http://localhost:8080/
sse/connect?userId=123', {
onMessage:
(data
) => {
messages.value.push
(data
)
},
onError:
(err
) => {
console.error
('
SSE Error:', err
)
}
}
)
sseClient.connect
()
}
)
onUnmounted
(() => {
sseClient?.close
()
}
)
</script>
<template>
<div>
<h2>
实时消息：</h2>
<ul>
<li v
-for="
(msg, index
) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
```
---
### 三、关键注意事项
1. **跨域处理**：
- 后端需配置 `@CrossOrigin` 或全局 CORS 配置
- 前端开发时在 `vite.config.ts` 配置代理：
```ts
export default defineConfig
({
server: {
proxy: {
'/
sse': 'http://localhost:8080'
}
}
}
)
```
2. **
数据传输格式**：
- 发送 JSON
数据时
后端使用：
```
java
emitter.send
(SseEmitter.event
().data
(objectMapper.writeValueAsString
(yourObject
)));
```
- 前端解析：
```ts
onMessage:
(data
) => {
const parsed = JSON.parse
(data
)
}
```
3. **心跳机制**：
```
java
// 在
后端定期发送空注释保持连接
emitter.send
(SseEmitter.event
().comment
(""
));
```
4. **错误处理**：
- 前端自动重连策略：
```ts
onError:
() => {
setTimeout
(() => this.connect
(), 3000
)
}
```
---
### 四、扩展场景示例
#### 发送结构化
数据：
```
java
//
后端发送对象
emitter.send
(SseEmitter.event
()
.data
(new MessageDto
("系统通知", "您有新消息"
), MediaType.APPLICATION_JSON
));
```
```ts
// 前端定义类型
interface Message {
title: string
content: string
}
onMessage:
(data
) => {
const msg = JSON.parse
(data
) as Message
//
使用 msg.title / msg.content
}
```
---
通过以上
实现，您可以建立稳定的
SSE 通信通道。典型应用场景包括
实时通知、股票报价、日志
推送等需要服务器主动
推送的场景。
最低0.47元/天 解锁文章
扫一扫
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
