SpringBoot整合SSE，实现后端主动推送DEMO

前言

说起服务端主动推送，大家第一个想到的一定是WEBSOCKET 。

作为软件工程师，不能无脑使用一种技术，要结合实际情况，择优选取。

SSE（Server-Sent Events）相比于WEBSOCKET

1、轻量化、兼容性基于传统的HTTP协议，所以浏览器兼容性比较好

2、只支持单向通讯。（服务器->客户端）

服务端测试代码

@RestController
public class SseController {private final ConcurrentHashMap<String, SseEmitter> emitters = new ConcurrentHashMap<>();@GetMapping("/subscribe/{id}")@CrossOrigin(origins = "*")public SseEmitter subscribe(@PathVariable String id) {SseEmitter emitter = new SseEmitter(Long.MAX_VALUE);emitters.put(id, emitter);emitter.onCompletion(() -> emitters.remove(id));emitter.onError(e -> emitters.remove(id));System.out.println(emitter);return emitter;}@GetMapping("/unbind/{id}")public R deleteItem(@PathVariable String id) {this.emitters.remove(id);return R.ok(true);}@GetMapping("test/send")public void test(){this.broadcastMessage("hello world");}@Asyncpublic void broadcastMessage(String message) {List<String> keysToDelete = new ArrayList<>();emitters.forEach((k, v) -> {try {v.send(message);} catch (Throwable t) {keysToDelete.add(k);}});keysToDelete.forEach(emitters::remove);}
}

这边是群发消息，也可以根据特定id，发送消息，发送消息可采用异步方式。

订阅消息接口需支持跨域

设置SSE过期时间为Long的max_value

当建立连接后，访问test/send 发送hello world

前端代码

<template><div id="app"><div>{{chartStr}}</div><div v-for="(item,index) in sseMessage" :key="index">{{item}}</div></div>
</template>
<script>export default {name: 'App',data() {return {sseMessage: [],chartStr: '',eventSource: undefined,}},mounted() {this.getChartStr()this.initSSE()},beforeUnload() {this.unbindSSE();},methods: {/*** 初始化服务器发送事件（SSE）连接** 此方法创建一个新的 EventSource 对象，连接到后端服务器的指定 URL，* 并添加一个 message 事件监听器，用于接收服务器发送的消息。*/initSSE() {// 创建一个SSE对象，连接到后端接口this.eventSource = new EventSource("http://192.168.0.198:8089/subscribe/" + this.chartStr);// 监听message事件，接收后端发送的消息// this.eventSource.addEventListener("message", (event) => {//   //将返回data插入元素   //   this.sseMessage.push(event.data)// });this.eventSource.onmessage = (event) => {this.sseMessage.push(event.data)};this.eventSource.onerror = function (event) {if (event.target.readyState === EventSource.CLOSED) {console.log('Connection closed');} else {console.error('Error occurred', event);}}},/*** 取消订阅 SSE 事件源并解绑图表** 这个方法首先检查是否存在有效的 SSE 对象。如果存在，它将关闭这个 SSE 连接。*/unbindSSE() {if (this.eventSource) {this.eventSource.close();}fetch('http://192.168.0.198:8089/unbind/' + this.chartStr, {method: 'GET'}).catch(error => {console.error('Error unsubscribing:', error);});},/*** 获取唯一的图表字符串** 此方法用于获取一个随机生成的、唯一的图表字符串。* */getChartStr() {let array = new Uint32Array(1);crypto.getRandomValues(array);let randomHex = array[0].toString(16);let paddedHex = randomHex.padStart(8, '0'); // 确保32位长度this.chartStr = paddedHex},},}
</script>
<style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}
</style>