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

news2024/9/20 10:53:31

前言

说起服务端主动推送，大家第一个想到的一定是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");
    }


    @Async
    public 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>