Vue使用WebScoket
橙序员 人气:0最近项目中使用到了webscoket
,这个东西吧,用起来也很简单。
但是我发现,这个东西会因为网络的不稳定而断开连接,断开就断开吧,关键是断开了,webscoket
不会出现异常。
于是就要自己去检测,这个有没有掉线。
我的想法是,每隔30秒向服务器发送信息,
每隔32秒去判断有没有收到消息,如果没有则判断为断开连接,进行重新连接。
因为我的技术能力还不是很强,所有代码在写法上有些不足,或许有些冗余,
但是功能的实现是没有问题的,
话不多说,上代码:
export default { data(){ return { path:'', // WebSocket的地址 socket:'', // WebSocket实例 times:0, // 短线重新连接次数 isConn:true, // 配合次数进行自动重连 heart:0, // 接收定时器,用来检测WebScoket是否断线 Tim:0, // 用于判断是否接收消息的定时器 } }, mounted(){ this.path = 'ws://82.157.123.54:9010/ajaxchattest'; // 测试地址,百度上可以搜索到 //this.path = 'ws://' + window.location.hostname + '/devices/history'; // 获取浏览器当前地址,因为后台ip可能不固定,如果固定可以写死,就像上面那样,但是如果ip动态,则可以使用这个,上线使用 this.Init(this.path); // 挂载时,初始化数据,建立连接等 }, methods: { Init(path){ this.socket = new WebSocket(path); // 进行连接,连接的结果和状态在下面的onopen、onmessage、onclose let that = this; // 因为下面使用了普通函数,存在this指向问题,所以我就把vue的当前实例给that了,that的使用和this一样,就看成this就行 this.socket.onopen = function() { console.log("WebScoket已经成功连接!"); this.heart = setInterval(()=>{ that.socket.send('hello')},1000*30); // 每隔30秒就向服务器发送消息 that.times = 0; // 在连接成功的时候改变成初始状态,如果重连就会增加 that.isConn = true; // 同上,与上面的次数共同控制是否重连,我不可能一直尝试重连,连接几百次吧 }; this.socket.onmessage = function() { // 接收消息,触发此回调 console.log("接收到的消息为:hello"); if(that.Tim){ // 初始值为0,也就是false,第一次不会执行清理定时器 clearTimeout(that.Tim); } that.Tim = setTimeout(()=>{ that.socket.onclose=()=>{ that.socket.close() }; },1000*33) // 只要接收到消息就会创建一个定时器,定时器的内容是在33秒后关闭webscoket,但是如果在该时间内接收到消息,那么就会再次执行,会进入上面的if, }; this.socket.onclose = function() { console.log("WebScoket已经断开连接"); if(this.heart !== 0){ clearInterval(this.heart) } if(that.times < 5 && that.isConn){ // 每隔5秒就会重新连接,未连接成功就会次数增加,连接成功就会清零 that.isConn = false; // 在定时器结束前,不允许再次执行该函数,这里应该可以优化 setTimeout(function(){ that.times ++; console.log(`尝试第${that.times}次重连!`) that.isConn = true; that.Init(that.path) // 执行尝试重新连接 },5000) }else{ this.isConn = false; // 貌似可以优化 this.socket.close(); // 彻底关闭 } }; this.socket.onerror = function() { // 这个删了也不会报错 console.log('WebSocket连接发生异常!'); }; }, } }
逻辑其实很简单,就是有一点绕,声明的变量稍微有点多,看懂了还是很简单,
这些变量就像是一堆水龙头,它是否放水,得要判断,并且在不同的时候,给它不同的值。
如果不想搞懂也可以直接拿来用,关于时间地址改改就能用!
测试的话,需要在vue文件里面写,打开控制台,然后断网联网模拟真实情况,就可以调试了
结果:
(报错是因为我手动开关了wifi,尝试重连没有问题,最后稳定连接,对接收消息判断,也没有问题!)
加载全部内容