zoukankan      html  css  js  c++  java
  • vue websocket长连接

        created() {
          //页面刚进入时开启长连接
          this.initWebSocket();
        },
        destroyed: function () {
          //页面销毁时关闭长连接
          this.websocketclose();
        },
        methods: {
          initWebSocket() { //初始化weosocket
            const wsuri = 'ws://xx.xx.xx.xx:xxxx/websocket';//ws地址
            this.websock = new WebSocket(wsuri);
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
            // this.websock.addEventListener('open', function () {  //监听
            // });
    
          },
    
          websocketonopen(e) {
            this.websock.send('sifinitediff,' + e);// 连接完成后发送信息
          },
    
          websocketonerror(e) { //错误
            console.log("WebSocket连接发生错误");
          },
    
          websocketonmessage(e) { //数据接收
            // console.log(e);
            // const redata = JSON.parse(e.data);
            //注意:长连接我们是后台直接1秒推送一条数据,
            //但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据,
            //这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分
    
            let data = JSON.parse(e.data);
             console.log(data);
    
          },
    
          websocketclose(e) { //关闭
    
            this.websock.close(); //关闭websock
    
          },
        }
    

      

  • 相关阅读:
    cookie
    手写Promise/Promise.all/promise.race
    Hbuilder如何真机调试?
    什么是深拷贝?什么是浅拷贝?如何实现深拷贝?
    Vue.set()?怎么用?
    vueRouter怎么用?
    Vue如何实现组件间通信?
    reduce()累加器
    filter()数组遍历
    map()数组遍历
  • 原文地址:https://www.cnblogs.com/luzt/p/14431078.html
Copyright © 2011-2022 走看看