关于在Vue中使用WebScoket的随笔

声明：请勿直接复制粘贴抄袭文章，若有需要，请规范转载，注明出处，谢谢！

---------------------------------------------------------------------------------------------------------

最近项目中使用到了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，尝试重连没有问题，最后稳定连接，对接收消息判断，也没有问题！）