vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
2023-03-07 09:42:43 时间
在线即时聊天项目,最重要的就是要实时收到消息,这里实现了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,则不进行重连;否则,如果重连次数大于最大重连次数,则不进行重连;
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的