Vue+WebSocket 实现页面实时刷新长连接

最近vue项目要做数据实时推送的消息模块。


<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>

推荐阅读更多精彩内容

  • 上海,一个又爱又恨的城市。。。 偶然间看到了这个app,看了一些文章,感觉又回到了那个有点抑郁的我,早上的我还信心...
    ozZ杀手88阅读 86评论 0 0
  • 1、营养全面 能满足4-6月龄婴幼儿生长发育的需要,与消化相适应,不增加负担。 2、含优质蛋白质 总含量<牛乳,但...
    育儿解忧铺阅读 178评论 2 4