实时数据推送并非只有WebSocket一种选择( 二 ) _WebSocket

前端开发前端比较简单就是一个index.html页面
<html><head><title>SSE</title></head><body><button type="button" onclick="closeSse()">Close</button><hr style="margin: 2px; padding: 0px 0px;"/><ul id="list"></ul></body><script>const evtSource = new EventSource(`/sse/events/${Date.now()}`) ;evtSource.onmessage = (event) => {const newElement = document.createElement("li") ;const eventList = document.getElementById("list") ;newElement.innerHTML = "接收到消息: " + event.data ;eventList.appendChild(newElement) ;};evtSource.onopen = (event) => {console.log('建立连接...')};evtSource.onerror = (event) => {console.error("发生错误：", event) ;};function closeSse() {evtSource.close() ;}</script></html>以上就是前后端的开发，代码非常的简单；也就简单的实现了由服务端实时数据推送。
EventSource对象的readyState有3个状态值：
0 — connecting
1 — open
2 — closed
测试

文章插图
图片
调用消息发送接口

文章插图
图片

文章插图
图片
自定义事件类型修改消息发送接口

@GetMapping("/sender/{id}")public String sender(@PathVariable("id") String id) throws Exception {SseEmitter emitter = this.sse.get(id) ;if (emitter != null) {SseEventBuilder builder = SseEmitter.event() ;// 指定事件类型builder.name("chat") ;String msg = "随机消息 - " + new Random().nextInt(10000000);builder.data(msg) ;try {emitter.send(builder) ;} catch (Exception e) {e.printStackTrace();}}return "success" ;}

前端监听具体事件类型消息

// 监听指定事件类型消息evtSource.addEventListener("chat", (event) => {const newElement = document.createElement("li");const eventList = document.getElementById("list");newElement.innerHTML = "chat message: " + event.data;eventList.appendChild(newElement);});

注意：默认是“message”事件，因为它可以捕获没有 event 字段的事件，* 以及具有特定类型 `event：message` 的事件。* 它不会触发任何其他类型的事件。