vue.js客服系统实时聊天项目开发（十六）连接websocket实时处理消息，断线重连，处理服务端关闭指令...

本文链接：https://blog.csdn.net/taoshihan/article/details/128826046

在线即时聊天项目，最重要的就是要实时收到消息，这里实现了vue.js下的websocket，实现了断线重连，并且可以根据收到的消息进行对应的处理

            /**
             * 连接websocket
             */
            connect () {
                var _this=this;
                let ws = new WebSocket(this.WebsocketHost+`/ws_visitor?visitor_id=${this.visitor.visitor_id}&to_id=${this.visitor.to_id}`);
                ws.onopen = function () {
                    console.log('WebSocket 连接已打开');
                    //_this.reconnectTimes = 0;
                };
                ws.onerror = function () {
                    console.log('WebSocket 连接错误');
                    // 尝试重连
                    _this.reconnect();
                };
                ws.onclose = function () {
                    console.log('WebSocket 连接已关闭');
                    // 尝试重连
                    _this.reconnect();
                };
                ws.onmessage = function (event) {
                    console.log(`收到服务器的消息：${event.data}`);
                    let result=event.data;
                    let serverMessage=JSON.parse(result);
                    let type=serverMessage.type;
                    let data=serverMessage.data;
                    if(type=="message"){
                        _this.receiveMessage(data);
                    }
                    if(type=="close"||type=="force_close"){
                        _this.websocket.serverReturnClose=true;
                        _this.websocket.instance.close();
                    }
                };
                _this.websocket.instance=ws;
            },
            // 尝试重连
            reconnect(){
                var _this=this;
                if (_this.websocket.serverReturnClose) {
                    console.log('停止重连,服务端close指令');
                    return;
                }
                if (_this.websocket.RECONNET_TIMES >= _this.websocket.MAX_RECONNECT_TIMES) {
                    console.log('重连失败');
                    return;
                }
                _this.websocket.RECONNET_TIMES++;
                console.log(`正在尝试重连(第 ${_this.websocket.RECONNET_TIMES} 次)`);
                setTimeout(function () {
                    _this.connect();
                }, _this.websocket.RECONNECT_INTERVAL); 
            }

这段代码是 Vue.js 组件中用于实现 WebSocket 的代码。它有三个方法：

connect：连接 WebSocket。它使用 WebSocket 对象创建了一个新的 WebSocket 连接，并为该连接设置了 onopen、onclose、onmessage 三个事件的回调。
onopen：连接 WebSocket 成功的回调。它会在 WebSocket 连接建立成功时被调用，在控制台输出 'WebSocket 连接已打开'。
onclose：WebSocket 连接关闭的回调。它会在 WebSocket 连接关闭时被调用，在控制台输出 'WebSocket 连接已关闭'，并且会调用 reconnect 方法进行重连。
onmessage：WebSocket 接收到服务器消息的回调。它会在收到服务器发送的消息时被调用，在控制台输出 '收到服务器的消息：' 和消息内容。该方法会对收到的消息进行分类，如果消息类型是 message，则调用 receiveMessage 方法进行处理；如果是 close 或者 force_close，则设置 websocket.serverReturnClose 为 true，并调用 close 方法关闭 WebSocket 连接。
reconnect：WebSocket 重连方法。当 WebSocket 连接关闭时，如果 websocket.serverReturnClose 为 true，则不进行重连；否则，如果重连次数大于最大重连次数，则不进行重连；