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)