vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
分类:vue
在线即时聊天项目,最重要的就是要实时收到消息,这里实现了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,则不进行重连;否则,如果重连次数大于最大重连次数,则不进行重连;
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu