1）首先建立一個全域性 js 檔案，如 global.js ，用於定義全域性變數 ws 和方法 setWs()

// global.js
export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    }
}

2）在 main.js 中引入 global.js

// main.js
import global from './xx/global.js'
Vue.prototype.global = global

3）在 app.vue 中初始化 webSocket ,並在 created() 方法中呼叫

//app.vue
localSocket() {
  let that = this;
  if ("WebSocket" in window) {
    console.log("您的瀏覽器支援 WebSocket!");
    
    that.ws = new WebSocket(`wss://echo.websocket.org/`);
    that.global.setWs(that.ws);
    that.ws.onopen = that.onopen();

    that.ws.onclose = function() {
      // 關閉 websocket
      console.log("連線已關閉...");
      setTimeout(() => {
        that.localSocket();
      }, 2000);
    };
  } else {
    // 瀏覽器不支援 WebSocket
    console.log("您的瀏覽器不支援 WebSocket!");
  }
},
 

4）在其他頁面傳送和接收 socket 訊息

//pageA.vue

// 傳送和接收訊息
handdleMsg(msg) {
  let that = this;
  console.log(that.global.ws);
  if (that.global.ws && that.global.ws.readyState == 1) {
    console.log("傳送資訊", msg);
    that.global.ws.send(msg);
  }
  that.global.ws.onmessage = function(res) {
    console.log("收到伺服器內容", res);
  };
}