vue中全局websocket

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)