1、建立 websocket.js 檔案

// 定義 websocket
export default {
 ws: {},
 setWs: function(newWs) {
  this.ws = newWs
 },
}

2、在main.js 中引入
import wsk from './utils/websocket.js' // 引入 websocket
Vue.prototype.$wsk = wsk // 掛載

3、在App.vue元件或者父元件中初始化 websocket

-data中引數：
    ws: null,
   leave_page: false,
   is_first_in_page: 
 
true, // 判斷是否是第一次進入頁面，在 websocket 連線成功時判斷是否呼叫子路由

-methods 方法
  // 初始化 websocket
  initWebSocket() {
   if ('WebSocket' in window) {
    let url = `ws連結`
    this.ws = new WebSocket(url)
    this.ws.onopen = () => {
     this.$wsk.setWs(this.ws) // 連線成功後，賦值給全域性物件 websocket
     console.log('連線 websocket 成功')
     
 
if (this.is_first_in_page) return
     setTimeout(() => {
      console.log('重新呼叫元件中的方法進行傳送資訊')
      this.send_data()
     }, 100)
    }
    this.ws.onclose = e => {
     console.log('監聽到websocket斷開', e)
     // 如果是離開頁面或者重新整理的情況下，則不做重連，否則重連
     if (this.leave_page) {
      console.log('斷開連線', e)
     } 
 
else {
      console.log('正在重連中')
      this.is_first_in_page = false // 設定為 false, 這樣重連後就會呼叫元件中的方法來訂閱資訊
      this.initWebSocket()
     }
    }
   } else {
    // 瀏覽器不支援 WebSocket
    alert('您的瀏覽器不支援 WebSocket，建議使用谷歌瀏覽器')
   }
   setTimeout(() => {
    // 其他程式碼塊
    return this.send_data()
   }, 100)
  },
  // 傳送訊息
  send_data() {
   let data = {
    type: 'send_data',
   }
   this.$wsk.ws.send(JSON.stringify(data))
   this.$wsk.ws.onmessage = this.websocketonmessage
  },
websocketonmessage(e){
    console.log(e) // 接受訊息
}

-destroyed 方法
this.leave_page = true
  this.ws.close()
  this.ws = null
  this.$wsk.setWs(this.ws)