【JS】- stompjs在vue中的集成使用

1、安裝依賴

yarn add stompjs
yarn add sockjs-client

2、引入

import Stomp from "stompjs";
import SockJS from "sockjs-client";

3、完整項目代碼

// 其實代碼本身自帶了心跳，但是有點小問題（忘了是什么），最后還是決定自己來監聽error並重新發起鏈接
let socketTimer = null

export default {
  name: "App",
  data() {
    return {
      stompClient: null,
    };
  },
  created() {
    this.initWebsocket();
  },
  destroyed() {
    // 頁面銷毀后記得關閉定時器
    clearInterval(socketTimer)
    this.closeWebsocket();
  },
  methods: {
    initWebsocket() {
      let socket = new SockJS("/socket/ws");
      this.stompClient = Stomp.over(socket);
      this.stompClient.debug = null
      this.stompClient.connect(
        { Author: "頭部信息" }, // 傳遞token
        () => {
          // 我們是gps項目，通過socket接收gps信息
          this.stompClient.subscribe("/topic/gps", (res) => {
            const row = JSON.parse(res.body)
            // 處理邏輯
            fn(row)
          });
          // 發送信息
          this.stompClient.send(
            "/app/test",
            {},
            JSON.stringify({ user: "user" })
          );
        },
        (err) => {
          // 監聽報錯信息，手動發起重連
          console.log("socketErr: ", err)
          if (socketTimer) {
            clearInterval(socketTimer)
          }
          // 10s后重新連接一次
          socketTimer = setTimeout(() => {
            console.log("開始重聯")
            this.initWebsocket();
          }, 10000);
        }
      );
      // this.stompClient.heartbeat.outgoing = 10000;
      // 若使用STOMP 1.1 版本，默認開啟了心跳檢測機制（默認值都是10000ms）
      // this.stompClient.heartbeat.incoming = 0;
      // 客戶端不從服務端接收心跳包
    },
    closeWebsocket() {
      if (this.stompClient !== null) {
        this.stompClient.disconnect(() => {
          console.log("關閉連接");
        });
      }
    },
  },
};

4、別忘了進行代理

// IP PORT 配置
const baseUrl = process.env.BASEURL
if (process.env.NODE_ENV === 'development') {
  // 實際代理轉發表
  exports.proxy = {
    '/api': {
      target: baseUrl,
      ws: true,
      pathRewrite: {
        '^/api': '/'
      }
    },
    '/socket': {
      target: baseUrl,
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        '^/socket': '/'
      }
    },
  }
}
// 改成本地 IP
exports.host = process.env.HOST
exports.port = process.env.PORT

5、發布至線上之后

location ^~ /socket/ {
    proxy_pass http://127.0.0.1:1080/;
    # 增加Upgrade協議頭和Connection協議頭，使http連接升級到websocket連接
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

 

結尾：在實際使用的過程中，遇到了socket動不動就斷開重連的情況，雖然照目前看來不影響使用，但是還是決定使用mqtt