vue websocket 加心跳

<template>

  <div>

  </div>

</template>

<script>

  export default {

    data() {

      return {

        websock: null,

        over:"",

        endtime:"",

        starttime:""

      }

    },

    created() {

      this.initWebSocket();

    },

    destroyed() {

      this.websock.close() //离开路由之后断开websocket连接

    },

    methods: {

      initWebSocket(){ //初始化weosocket

        const wsuri = "ws://127.0.0.1:8080";

        this.websock = new WebSocket(wsuri);

        this.websock.onmessage = this.websocketonmessage;

        this.websock.onopen = this.websocketonopen;

        this.websock.onerror = this.websocketonerror;

        this.websock.onclose = this.websocketclose;

      },

      websocketonopen(){ //连接建立之后执行send方法发送数据

        let actions = {"test":"12345"};

        this.over = setInterval(() => {

        this.websocketsend(JSON.stringify(actions));

        this.starttime = new Date()

        // console.log(this.starttime,"开始")

        if(this.endtime != "") {

          // console.log(this.starttime - this.endtime,"时间差")

          if(this.starttime - this.endtime >=6000) {

            this.starttime=""

            this.endtime=""

            clearInterval(this.over);

            this.initWebSocket();

          }

        }

        // }

      }, 5000);

      },

      websocketonerror(){//连接建立失败重连

        this.initWebSocket();

        this.starttime=""

        this.endtime=""

        clearInterval(this.over);

        this.initWebSocket();

      },

      websocketonmessage(e){ //数据接收

        const redata = JSON.parse(e.data);

        if(redata.test == 12345) {

          this.endtime = new Date()

        }

      },

      websocketsend(Data){//数据发送

        this.websock.send(Data);

      },

      websocketclose(e){  //关闭

        console.log('断开连接',e);

      },

    },

  }

</script>

<style scoped>

</style>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容