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

到此这篇关于在Vue中使用WebScoket 的文章就介绍到这了,更多相关Vue使用WebScoket 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！