vue cli3 + sockjs + stompjs實現消息實時推送

1.安裝stompjs、sockjs-client

npm install sockjs-client --save
npm install stompjs --save

 

2.建立連接

initWebSocket() {
      const socket = new SockJS(this.socketUrl);
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect(
        // { 'token': this.token }, // 可帶參
        {},
        () => {
          this.successCallback(); // 連接成功
        },
        () => {
          this.disconnect(); // 斷開連接
        }
      );
    },        

3.連接成功

// 連接成功
    successCallback() {
      console.info("onConnected");
      this.stompClient.subscribe("/topic/send/error", (val) => {
        this.showData = val.body; // 接收到的數據
      });
    },

4.斷開連接

disconnect() {
      console.log("關閉連接");
      this.reconnect(this.socketUrl);
      if (this.stompClient != null) {
        this.stompClient.disconnect();
      }
    },

5.斷開重連

reconnect(socketUrl) {
      console.info("in reconnect function");
      const socket = new SockJS(socketUrl);
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect(
        {},
        () => {
          console.info("reconnected success");
          // 連接成功
          console.log("成功");
          this.successCallback();
        },
        () => {
          // 失敗
          console.log("失敗");
          setTimeout(() => {
            this.reconnect(this.socketUrl);
          }, 5000);
        }
      );
    },