1. 
         
         
         



      1.     


      2. 狗万官网酒店 > 狗万官网下载 > vue利用websocket的主意实例分析_vue.js

        vue利用websocket的主意实例分析_vue.js

        来源: 2019-08-04 19:43 我来投稿 参与评论
        这篇文章主要介绍了vue利用websocket的主意,构成实例形式对比分析了vue.js利用websocket的相关操作技能与注意事项,要求的爱人可以参考下

        本文实例讲述了vue利用websocket的主意。分享给大家供大家参考,实际如下:

        近些年项目需要采取到websocket 但是框架是vue  地上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的硬件了,直接利用原生的websocket  我这边需求是 只要求接受就好 不需要发送 代码如下:

        爬坑之路:vue其中this指向问题

        成人版 利用原生js

        mounted(){
         console.log(this)----------------------------------------------------------this指向vue
         this.initWebpack();
        },
        methods: {
          initWebpack() {
            let websocket = '';
            if ('WebSocket' in window) {
              websocket = new WebSocket("ws://192.168.1.99:8080/tv/websocket");
            } else {
              alert('目前浏览器 Not support websocket')
            } //连片成功建立之回调方法 websocket.onopen = function () { console.log("WebSocket连片成功")
            console.log(this)----------------------------------------------------------this指向websocket
          };
        //接到到消息的回调方法
        websocket.onmessage = function (event) {
        console.log(this)
        console.log(event);
         this.productinfos=JSON.parse(event.data);//websocket呼吁过来的是string 要求格式
         if(demo.offsetHeight<demo1.offsetHeight){//其中比外部高度大的时光滑动
        this.upScroll()//这是this指向websocket 故而没有此方法 会报错
        }
        this.sliceArray() }
         }
         };
        //连片关闭的回调方法 websocket.onclose = function () {
        console.log("WebSocket连片关闭");
        };
        //连片发生错误的回调方法 websocket.onerror = function () {
        console.log("WebSocket连片发生错误");
        };
        //监听窗口关闭事件,顶窗口关闭时,积极去关闭websocket连片,防止连接还没断开就关闭窗口,server头会抛异常。
         window.onbeforeunload = function () {
        websocket.close();
        //关闭WebSocket连片 };
         },
        sliceArray(){//截取数组的下四位 },
         upScroll(){ },
        }
        
        

        老二版:正解

        methods:{
         initWebpack(){//初始化websocket
          const wsuri = "ws地方";
          this.websock = new WebSocket(wsuri);//这其中的this都指向vue
          this.websock.onopen = this.websocketopen;
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onclose = this.websocketclose;
          this.websock.onerror = this.websocketerror;
         },
         websocketopen(){//开辟
          console.log("WebSocket连片成功")
         },
         websocketonmessage(e){ //多少接收
          console.log(e)
          this.productinfos = JSON.parse(e.data);
         },
         websocketclose(){ //关闭
          console.log("WebSocket关闭");
         },
         websocketerror(){ //失败
          console.log("WebSocket连片失败");
         },
        }
        
        

        this.websock.onopen  的 this指向的是websocket 如果想要送vue其中的data其中的日产量赋值 就要求 this指向vue 故而需要对websocket的主意赋值

        瞩望本文所述对大学者vue.js程序设计有所帮助。

        义务编辑:狗万官网酒店
         
         
        0% (0)
         
         
        0% (0)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?