惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
Microsoft Azure Blog
Microsoft Azure Blog
I
InfoQ
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
人人都是产品经理
人人都是产品经理
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Tailwind CSS Blog
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
WordPress大学
WordPress大学
量子位
美团技术团队
大猫的无限游戏
大猫的无限游戏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Last Week in AI
Last Week in AI
博客园 - 司徒正美
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
小众软件
小众软件
C
Check Point Blog
博客园 - 三生石上(FineUI控件)
N
Netflix TechBlog - Medium
Recent Announcements
Recent Announcements
有赞技术团队
有赞技术团队
月光博客
月光博客

博客园 - 我的bug

项目引入同一jar包不同版本处理 【笔记】redis实现类 【笔记】websockt一对一聊天java部分 【笔记】MySQL删除重复记录保留一条 oss上传实例 jquery实现图片点击旋转 IDEA卡顿解决方法 斐波那契数列 【笔记】接口发送数据及接收 【笔记】获取新浪财经最新的USDT-CNY的汇率 【笔记】Java 信任所有SSL证书(解决PKIX path building failed问题) 【笔记】jquery判断两个日期之间相差多少天 【笔记】spring定时器时间配置实例 【笔记】jquery加减乘除及科学计算法处理 string 日期相加和相减 sql查询慢原因及优化 java小算法复习 找出一组数字中出现最多的字符 【转载】js清空cookie
【笔记】vue中websocket心跳机制
我的bug · 2019-10-22 · via 博客园 - 我的bug
data () {
      return {
        ws: null,//建立的连接
        lockReconnect: false,//是否真正建立连接
        timeout: 28*1000,//30秒一次心跳
        timeoutObj: null,//心跳心跳倒计时
        serverTimeoutObj: null,//心跳倒计时
        timeoutnum: null,//断开 重连倒计时
      }
    },
    created() {
      this.initWebpack();
    },  
    methods: {
      initWebpack(){
        this.ws = new WebSocket(process.env.SOCKET_OTC);
        this.ws.onopen = this.onopen;
        this.ws.onmessage = this.onmessage;
        this.ws.onclose = this.onclose;
        this.ws.onerror = this.onerror;
      },
      reconnect() {//重新连接
        var that = this;
        if(that.lockReconnect) {
          return;
        };
        that.lockReconnect = true;
        //没连接上会一直重连,设置延迟避免请求过多
        that.timeoutnum && clearTimeout(that.timeoutnum);
        that.timeoutnum = setTimeout(function () {
          //新连接
          that.initWebpack();
          that.lockReconnect = false;
        },5000);
      },
      reset(){//重置心跳
        var that = this;
        //清除时间
        clearTimeout(that.timeoutObj);
        clearTimeout(that.serverTimeoutObj);
        //重启心跳
        that.start();
      },
      start(){//开启心跳
        var self = this;
        self.timeoutObj && clearTimeout(self.timeoutObj);
        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
        self.timeoutObj = setTimeout(function(){
          //这里发送一个心跳,后端收到后,返回一个心跳消息,
          if (self.ws.readyState == 1) {//如果连接正常
            self.ws.send("heartCheck");
          }else{//否则重连
            self.reconnect();
          }
          self.serverTimeoutObj = setTimeout(function() {
            //超时关闭
            self.ws.close();
          }, self.timeout);

        }, self.timeout)
      },  
    onopen() {
        var msg = JSON.stringify({cmd: 'enter_chatting', token:this.COOKIE.getCookie("token")});
        this.ws.send(msg);
        console.log("open");
        this.getNoReadRecords();
        //开启心跳
        this.start();
      },
      onmessage(e) {
        this.mydata = JSON.parse(e.data);
        if(this.mydata.fromID == this.states.customerId){
          this.mydata.chatType = 2;
        }else{
          this.mydata.chatType = 1;
        }
        var content =this.getContentTypes(this.mydata.content,this.mydata.chatType);
        this.records.push(this.mydata);
        //收到服务器信息,心跳重置
        this.reset();
      },
      onclose(e) {
        console.log("连接关闭");
        console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
        var msg = JSON.stringify({cmd: 'out_chatting', token:this.COOKIE.getCookie("token")});
        this.ws.send(msg);
        //重连
        this.reconnect();
      },
      onerror(e) {
        console.log("出现错误");
        //重连
        this.reconnect();
      }
}