vue项目使用websocket连接问题及解决

import wsConnect from "@/assets/js/wsConnect";
Vue.prototype.$ws = wsConnect
 
new Vue({
  render: h => h(App),
  router,
  axios,
  store
}).$mount('#app')

import axios from "axios";
import store from "@/store";
 
//websocket
 
function initWebpack(){
    var url = store.state.url
    var wsurl = ''
    axios.get(`${url}/bcall/url`)  //这是我在从后端拿ws链接的地址
        .then((res) =>  {
            console.log(res.data.data)
            wsurl = res.data.data
            store.state.ws = new WebSocket(wsurl);
            store.state.ws.onopen = onopen;
            store.state.ws.onmessage = onmessage;
            store.state.ws.onclose = onclose;
            store.state.ws.onerror = onerror;
 
        }).catch((err)=> {
        console.log(err)
    })
 
}
function onopen() {
    console.log("连接websocket");
    var params = '{"reqtype":"Query","action":"allexts"}'
    store.state.ws.send(params)
    start();
}
function reconnect() {//重新连接
    var that = store.state;
    if(that.lockReconnect) {
        return;
    }
    that.lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    that.timeoutnum && clearTimeout(that.timeoutnum);
    that.timeoutnum = setTimeout(function () {
        //新连接
        initWebpack();
        that.lockReconnect = false;
        that.isFirstGet = true
    },5000);
}
function reset(){//重置心跳
    var that = store.state;
    //清除时间
    clearTimeout(that.timeoutObj);
    clearTimeout(that.serverTimeoutObj);
    //重启心跳
    start();
}
function start(){ //开启心跳
    console.log('开启心跳');
    var self = store.state;
    self.timeoutObj && clearTimeout(self.timeoutObj);
    self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
    self.timeoutObj = setTimeout(function(){
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.ws.readyState === 1) {//如果连接正常
            
            self.ws.send(heartbeat); //心跳包格式需要自己确定
 
        }else{//否则重连
            reconnect();
        }
        self.serverTimeoutObj = setTimeout(function() {
            //超时关闭
            self.ws.close();
            reconnect()
        }, self.timeout);
    }, self.timeout)
}
function onmessage(e) {
    console.log('接收数据',e)
    //处理数据的地方
    reset();
}
function onclose(e) {
    console.log('websocket 断开: ',e);
 
}
function onerror(e) {
    console.log("出现错误");
    //重连
    reconnect();
}
 
 
export default {
    initWebpack,
    onmessage,
    onclose,
    onopen,
    onerror
}

state: {
        permissions: false,
        url: '',
        //ws参数
        path: '',
        ws: null,//建立的连接
        lockReconnect: false,//是否真正建立连接
        timeout: 58*1000,//58秒一次心跳
        timeoutObj: null,//心跳心跳倒计时
        serverTimeoutObj: null,//心跳倒计时
        timeoutnum: null,//断开 重连倒计时
 
    },

mounted() {
    this.$ws.initWebpack()
  }

this.$store.state.ws.send(msg)

export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    },
    start(){// 发送心跳
        clearInterval(this.timeoutObj)
        this.timeoutObj = setInterval(() => {
            if (this.ws && this.ws.readyState == 1) {
                console.log('发送心跳')
                this.ws.send(JSON.stringify({
                    //后端需要接收的数据
                }));
            }
        }, 10 *1000)//十秒发一次
    },
    localSocket(userId) {//连接ws，根据连接服务器是否需要参数设置该方法是否需要接收参数
        if ("WebSocket" in window) {
            // console.log("您的浏览器支持 WebSocket!");
            // location.host
            this.ws = new WebSocket('这里要填连接服务器的地址');
            this.setWs(this.ws);
            this.ws.onopen = ()=>{
                console.log('websocket连接成功');
                //连接上之后要发心跳包
                this.start()
            };
            this.ws.onclose = function () {
                // 关闭 websocket
                console.log("连接已关闭...");
                //断线重新连接
                setTimeout(() => {
                    this.localSocket(userId);
                }, 2000);
            };
        } else {
            // 浏览器不支持 WebSocket
            console.log("您的浏览器不支持 WebSocket!");
            this.openNotificationWithIcon('error', '浏览器', '您的浏览器不支持显示消息请更换', 1,1)
        }
    },
} 

import global from './ws.js'
Vue.prototype.global = global

mounted(){
      this.global.localSocket(userId)
      //连上之后要接收服务器发来的消息
      this.global.ws.onmessage = (msg)=>{
          console.log(JSON.parse(msg.data))
       }
}