亲宝软件园·资讯

展开

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,尝试重连没有问题,最后稳定连接,对接收消息判断,也没有问题!)

加载全部内容

相关教程
猜你喜欢
用户评论