[网络协议]vue2全局使用websocket记录

1. 考虑到登录之后要始终连接服务器接收消息，所以把websocket实例对象作为模块抛出，在main.js中引入，使全局都可以获得ws并且使用相关方法。
2. 由于刷新页面时，ws会自动断开连接，所以在App.vue组件挂载时再次连接服务器。

新建ws模块文件

该文件位置任意，引入的时候注意路径即可

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)
        }
    },
} 

在main.js中引用ws模块文件

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

App.vue挂载时再次连接服务器并且接收消息

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

通过以上方法，任何组件都可以通过this.global.ws获得websocket实例对象并且使用相关方法，可能会有些问题，但是我别的问题太多了，这个先放一下吧。