SpringBoot SSE(Server-Sent Events)详解：从基础到高级实践

<think>好的，用户想了解Vue和Spring Boot结合使用SSE的实现原理及用法，需要详细的教程和示例代码。首先，我需要回忆一下SSE的基本概念。SSE是服务器发送事件，允许服务器主动向客户端推送数据，基于HTTP长连接，适用于实时更新场景，比如股票价格、新闻推送等。 接下来，用户提到Vue和Spring Boot的结合，所以需要分两部分考虑：后端Spring Boot如何实现SSE，以及前端Vue如何接收和处理这些事件。根据引用[1]，Spring Boot 3中使用响应式编程可以更高效地实现SSE，可能涉及WebFlux模块。但用户提供的引用中没有直接提到SSE的具体实现步骤，可能需要结合常规的Spring Boot知识。 首先，后端部分。Spring Boot中实现SSE通常使用SseEmitter类，这个类在Spring Web模块中。需要创建一个控制器，返回SseEmitter对象，并通过它发送事件。可能需要参考引用[2]中的依赖，比如Spring Web和可能涉及的安全性Spring Security，但用户的问题主要关注SSE，所以重点在创建控制器和发送事件。 然后前端Vue部分，需要使用EventSource API来连接SSE端点，监听消息事件。Vue组件中在生命周期钩子如mounted()中建立连接，处理接收到的数据，并更新响应式数据以触发视图更新。同时要注意在组件销毁时关闭连接，避免内存泄漏。 示例代码方面，后端需要创建一个REST控制器，返回SseEmitter，并异步发送数据。前端在Vue组件中使用EventSource，处理onmessage事件，将数据绑定到data属性，并在模板中渲染。可能需要处理错误和连接关闭的情况，保证稳定性。 用户可能还会关心跨域问题，所以后端需要配置CORS，或者在Spring Security中允许相关端点。引用[2]提到了Spring Security的依赖，可能需要配置安全策略，但用户的问题可能不需要深入安全部分，除非特别提到。 另外，引用[3]提到Vue+Spring Boot的运行原理，开发流程是后端接口MVC开发，前端处理后端请求和渲染。SSE属于后端主动推送，所以前端需要持续监听，而不是传统的请求-响应模式。 总结步骤：后端创建SSE端点，使用SseEmitter发送事件；前端Vue使用EventSource连接，处理事件并更新界面。需要确保依赖正确，比如Spring Web，以及处理可能的跨域问题。示例代码需要展示基本实现，包括后端控制器的创建和前端Vue组件的集成。</think>### Vue与Spring Boot整合SSE实现详解 #### 一、技术原理 SSE（Server-Sent Events）基于HTTP协议实现服务器到客户端的单向通信，采用长连接机制保持通信通道。与WebSocket相比，SSE更轻量且天然支持断线重连[^1]。 技术实现流程： 1. 客户端通过`EventSource`建立SSE连接 2. Spring Boot使用`SseEmitter`对象管理连接 3. 服务器通过`send()`方法主动推送数据 4. Vue接收数据后触发响应式更新 #### 二、Spring Boot实现 1. 添加依赖（pom.xml） ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 2. SSE控制器实现 ```java @RestController @RequestMapping("/sse") public class SseController { private final Map<String, SseEmitter> emitters = new ConcurrentHashMap<>(); @GetMapping("/connect") public SseEmitter connect() { SseEmitter emitter = new SseEmitter(3600_000L); // 设置1小时超时 String clientId = UUID.randomUUID().toString(); emitters.put(clientId, emitter); emitter.onCompletion(() -> emitters.remove(clientId)); emitter.onTimeout(() -> emitters.remove(clientId)); return emitter; } @Async public void sendData(String data) { emitters.forEach((id, emitter) -> { try { emitter.send(SseEmitter.event() .data(data) .id(id) .reconnectTime(5000)); } catch (IOException e) { emitter.complete(); emitters.remove(id); } }); } } ``` #### 三、Vue前端实现 1. 创建SSE连接组件 ```vue <template> <div> <h3>实时数据：{{ message }}</h3> </div> </template> <script> export default { data() { return { message: '', eventSource: null } }, mounted() { this.eventSource = new EventSource('http://localhost:8080/sse/connect'); this.eventSource.onmessage = (event) => { this.message = event.data; }; this.eventSource.onerror = (error) => { console.error('SSE连接错误:', error); this.eventSource.close(); }; }, beforeUnmount() { if (this.eventSource) { this.eventSource.close(); } } } </script> ``` #### 四、关键配置要点 1. 跨域处理（Spring Boot配置） ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/sse/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET"); } } ``` 2. 心跳机制（防止连接超时） ```java @Scheduled(fixedRate = 30000) public void sendHeartbeat() { sendData("SYSTEM_HEARTBEAT:" + System.currentTimeMillis()); } ``` #### 五、应用场景示例 1. 实时股票行情推送 2. 物流状态跟踪 3. 即时新闻推送 4. 在线考试计时系统 $$ \text{通信可靠性公式：} R = 1 - \prod_{i=1}^{n}(1 - p_i) $$ 其中$p_i$表示单个消息的到达概率，$n$为消息重试次数