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


    参考:https://segmentfault.com/a/1190000019301545

     

    export default {
            data() {
                return {
                    websock: null,
                }
            },
            created(){
               //页面刚进入时开启长连接
                this.initWebSocket()
           },
           destroyed: function() {
            //页面销毁时关闭长连接
          this.websocketclose();
        },
       
        
        methods: { 
          initWebSocket(){ //初始化weosocket 
           
            const wsuri = 127.0.0.1:8080 + "/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);
               // 接收数据
            console.log(redata.value); 
          }, 
    
          websocketsend(agentData){//数据发送 
            this.websock.send(agentData); 
          }, 
    
          websocketclose(e){ //关闭 
            console.log("connection closed (" + e.code + ")"); 
         },
       }, 
      }
     
    

     

      

     

    做有积累的事~~
  • 相关阅读:
    转载 | float 清除浮动的7种方法
    转载 | CSS图片下面产生间隙的 6种解决方案
    (转载)内联元素设置宽高问题
    HTML/CSS:display:flex 布局教程
    HTML/CSS:block,inline和inline-block概念和区别
    上传文件
    分页查询 模糊查询 合体查询
    repeater的command用法
    窗体内的控制 跨窗体控制
    webform 跨窗体传值
  • 原文地址:https://www.cnblogs.com/robinunix/p/13534083.html
Copyright © 2020-2023  润新知