Vue+WebSocket页⾯实时刷新长连接的实现
最近vue项⽬要做数据实时刷新，折线图每秒重画⼀次，数据每0.5秒刷新⼀次，说⽩了就是实时刷新，因为数据量较⼤，⽤定时器估计页⾯停留⼀会就会卡死。。。
与后台⼈员讨论过后决定使⽤h5新增的WebSocket来实现数据实时展⽰，记录⼀下过程以及碰到的问题；
注意：页⾯刷新长连接会被关闭，其实进⼊当前页⾯建⽴长连接的⽬的就是页⾯不⽤F5刷新，所有数据⾃动实时刷新，如果还是来回F5⼤刷页⾯那就没有意义了。。。
ps:　如果实在有这个需求的话，⽹上貌似有实现刷新页⾯长连接不断的⽅法，请⾃⾏百度。。。。
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
websock: null,
}
},
    created(){
//页⾯刚进⼊时开启长连接
this.initWebSocket()
},
    destroyed: function() {
    //页⾯销毁时关闭长连接
      this.websocketclose();
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = v.WS_API + "/websocket/threadsocket";//ws地址
        this.websock = new WebSocket(wsuri);
        pen = this.websocketonopen;
        r = this.websocketonerror;
        ssage = this.websocketonmessage;
        lose = this.websocketclose;
websocket和socket
      },
      websocketonopen() {
        console.log("WebSocket连接成功");
      },
      websocketonerror(e) { //错误
      console.log("WebSocket连接发⽣错误");
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
        　//注意：长连接我们是后台直接1秒推送⼀条数据，
//但是点击某个列表时，会发送给后台⼀个标识，后台根据此标识返回相对应的数据，
/
/这个时候数据就只能从⼀个出⼝出，所以让后台加了⼀个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
        console.log(redata.value);
      },
      websocketsend(agentData){//数据发送
        this.websock.send(agentData);
      },
      websocketclose(e){ //关闭
        console.log("connection closed (" + e.code + ")");
    　},
  　},
  }
</script>
到此这篇关于Vue+WebSocket页⾯实时刷新长连接的实现的⽂章就介绍到这了，更多相关Vue+WebSocket实时刷新长连接内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。