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 = process.env.WS_API + "/websocket/threadsocket";
//ws地址
        this.websock = new WebSocket(wsuri); 
        this.websocket.onopen = this.websocketonopen;

        this.websocket.onerror = this.websocketonerror;

        this.websock.onmessage = this.websocketonmessage; 
        this.websock.onclose = this.websocketclose;
     },       
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>
上一篇:IDEA创建多个模块MavenSpringBoot项目


下一篇:SpringBoot+Vue+WebSocket 实现在线聊天