vue项目使用websocket连接

前景： 公司做一个包含websocket的项目，我用的是vue做的，开始只有一个组件的要求demo，就将websocket的配置直接放在组件方法中，组件挂载时直接初始化ws，但是后续组件增加，开始出现多个websocket链接的情况，是不允许的。刚开始的做法是将websocket的方法配置等封装为一个js文件给各个组件调用，当离开组件页面进入新页面时会断连旧的ws新建一个ws，以为做到了独立，但是实际上确实多次的断连链接，十分不便。思考了挺久找到了解决方法，在此记录加深记忆

---

解决过程：

要求整个vue项目使用一个ws链接，在各组件都要求可以接受发送消息

首先想到的就是在app.vue下创建我是链接，然后给各个小的组件使用ws，做到统一，很简单的解决思路，我是这么做的

前期已经将ws封装成一个wsconnect.js文件了，那么是否可以将wsconnect注册为全局的方法呢，试了一下果真可行，只需要在main.js中配置：

import wsConnect from "@/assets/js/wsConnect";
Vue.prototype.$ws = wsConnect


new Vue({
  render: h => h(App),
  router,
  axios,
  store
}).$mount('#app')

说明一下，在wsconnect.js文件中我封装了方法，但是把ws对象放在了vuex的state中，相关配置如下：

wsconnect.js:

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

}

store.state:

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

    },

配置之后我在app.vue挂载之后直接初始化ws链接：

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

发现是成功的，已经将ws链接上了，接着就是在各个组件测试一下发送数据的功能：

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

神奇的发现，也成功了！

之所以这么简单，前期的封装也是占功劳的嘛，至此我的vue只需要一个ws链接就可以供整个项目使用，虽然不知道别人的做法是怎么样，如果有更好的方法也希望大家讲解下😀

---

---

补充知识    Vue.prototype

添加实例 property — Vue.js