Server-Sent Events消息及时推送怎么搭建

### Server-Sent Events (SSE) 实现与配置 #### SSE 基本概念 SSE 是一种允许服务器主动向浏览器推送事件的技术，这有助于提高 Web 应用程序的实时性和响应性[^1]。 客户端可以通过 `EventSource` API 来订阅来自服务器的数据流。 #### 工作原理 客户端发起带有特定头部 (`Accept: text/event-stream`) 的 HTTP GET 请求至服务器，告知其希望接收到的是 SSE 数据流。一旦建立连接并返回成功状态码，则该链接会一直维持开启直到被显式关闭或者发生错误。在此期间，服务器可随时发送新的消息给前端而无需等待额外请求到来[^3]。 #### 配置HTTP请求和响应头 为了使 SSE 正常运作，在创建 SSE 连接时需正确设置 HTTP 请求中的接受媒体类型为 `text/event-stream`；而在服务端回应里则应指定 Content-Type 同样为此值，并加上必要的缓存控制指令防止代理存储这些动态产生的内容： ```http Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` #### Spring Boot 中的应用实践 在 Spring Boot 项目中集成 SSE 主要涉及定义一个 REST 控制器方法用于处理 `/streamFlux` 路径下的 GET 请求，并通过 Flux<SseEmitter> 返回多个 SseEmitter 对象实例来管理各个独立用户的长连接关系。对于每一个新接入者都会分配一个新的 emitter 并保存起来以便后续广播通知使用[^4]。 ```java @GetMapping("/streamFlux") public Flux<SseEmitter> streamFlux() { final var emitters = new CopyOnWriteArrayList<SseEmitter>(); return Flux.<SseEmitter>create(sink -> { final var emitter = new SseEmitter(); sink.next(emitter); emitters.add(emitter); emitter.onCompletion(() -> emitters.remove(emitter)); emitter.onError((e) -> emitters.remove(emitter)); emitter.onTimeout(() -> emitters.remove(emitter)); emitter.send(SseEmitter.event() .id(UUID.randomUUID().toString()) .name("hello") .data("Welcome to the server-sent events stream!") ); }).share(); // Share this flux among all subscribers. } ``` 上述代码片段展示了如何在一个简单的 Spring Boot 应用程序中构建支持 SSE 功能的服务端逻辑部分。请注意这里还包含了当某个 client 断开连接后的清理操作以释放相应资源。 #### 浏览器端JavaScript交互方式 最后一步是在网页上编写 JavaScript 使用 EventSource 构造函数监听来自后端发出的通知信息。每当有新数据到达就会触发 onmessage 回调函数执行自定义业务逻辑处理流程: ```javascript if (!!window.EventSource) { const eventSource = new EventSource('/streamFlux'); eventSource.addEventListener('open', function(e) { console.log("Connection was opened."); }, false); eventSource.addEventListener('error', function(e) { if (eventSource.readyState === EventSource.CLOSED) { console.error("The connection has been closed by the server."); } else { console.warn(`An error occurred, retrying... (${e.target})`); } }, false); eventSource.addEventListener('hello', function(e) { console.info(`New message received from server: ${e.data}`); }); } else { console.error("Your browser doesn't support Server Sent Events"); } ``` 此段脚本实现了对 SSE 事件源对象的基础初始化以及针对不同类型事件作出适当反应的功能模块化设计思路。