websocket 断线重连

1、新建websocket.js文件

export const wsConnection = {
    websock: null, // socket实例
    timeout:50000,// 心跳倒计时
    setoutObj:100000,// 心跳发送超出一定时长断开连接
    heartObj:{// 心跳固定参数
        version:'1.0',
        driveName:'windows',
        appName:'amicoPC'
    },
    lockReconnect:false,// 是否已经建立链接
    timeoutObj:null,// 心跳
    timeoutClose:null,// 关闭
    timeoutnum:null,// 断线重连
    setoutObjnum:null,//心跳超时时间
    Isasync: true,// 是否为异步
    meetDto:[// 接收到的消息类型
        'HeartbeatRpsDto',// 心跳
        'SingleChatRpsDto',// 单聊
        'GroupChatRpsDto',// 群聊
    ],
    init(type){//初始化Socket

        // console.log('初始化socket')
        // this.websock = new WebSocket(`${wsUrl}?userId=4334443`);// 初始化ws
        this.websock = new WebSocket(`ws:后台地址`);// 初始化ws
        // console.log(this.websock)
        this.websock.onmessage = this.wsMessage;
        this.websock.onopen = this.wsOpen;
        this.websock.onerror = this.wsError;
        this.websock.onclose = this.wsClose;
      
    },
    wsOpen(){// 链接Socket
        wsConnection.wsHeartbeat();
    },
    wsSend(imData,type){// Socket发送
        this.websock.send('我是发送的消息')
    },
    wsMessage(data){// 接收到的消息
		console.log(data)
    },
    wsError(){// Socket断线重连
        console.log('断线----准备重连')
        this.initWebSocket();//失败断线重连
    },
    wsClose(e){// Socket链接失败【断开】
        console.log('Socket链接失败【断开】')

        // wsConnection.websock.close()

        if(wsConnection.lockReconnect){
            return
        }

        store.commit('setNetWork',false)
        let timeoutClose =  setTimeout(()=>{
            console.log('关闭')
            wsConnection.wsReconnect();
            wsConnection.lockReconnect = false;
        },3000)
        console.log('断开连接',e);
    },
    wsReconnect(){// 断线重连
        console.log('判断是否正处于断线重连')
        // 判断是否正处于断线重连
        if(wsConnection.lockReconnect){
            return
        }
        // 设置断线重连
        wsConnection.timeoutnum = setTimeout(()=>{
            console.log('开始重连！！！')
            wsConnection.init();
            wsConnection.lockReconnect = false;
        },5000)
    },
    wsReset(){// 重置心跳
        console.log('收到信息重置心跳')
        clearTimeout(wsConnection.timeoutObj);
        clearTimeout(wsConnection.timeoutnum);
        clearTimeout(wsConnection.setoutObjnum);
        //重启心跳
        wsConnection.wsHeartbeat();
        wsConnection.setoutObj = wsConnection.timeout
    },
    wsHeartbeat(){// 保持心跳
        let _this = this;
        wsConnection.timeoutObj = setTimeout(()=>{
            console.log('❤')
            
            // 链接状态正常
            if(_this.websock.readyState == 1){// 发送信息
                wsConnection.wsSend(wsConnection.heartObj,1).then(res=>{
                    store.commit('setNetWork',true)
                    wsConnection.setoutObjnum = setTimeout(function(){// 心跳超时断开网络
                        store.commit('setNetWork',false)
                    },wsConnection.setoutObj)

                    console.log('心跳发送成功')
                }).catch(err=>{
                    console.log('心跳发送失败')
                })
                
            }
        },wsConnection.timeout)
    }
}

2、引入以及使用

import { wsConnection } from './websocket.js'


wsConnection.websock.send('发送的消息')