美文网首页
vue中使用websocket,实时更新数据

vue中使用websocket,实时更新数据

作者: 我是华华啊 | 来源:发表于2019-08-09 16:35 被阅读0次

项目中需要实时更新数据,马上就想到了websocket,以下是websocket使用方法,在此记录一下。

有不合理的地方,欢迎提出 !!

mounted:function(){    
    this.initWebSocket();  
},
destroyed: function() {
    //页面销毁时关闭
    this.websocket.onclose =  this.websocketclose();
},
methods:{  
    initWebSocket(){ //初始化 
        this.websocket = new WebSocket('');  
        var that = this.websocket;
        that.onopen = this.websocketonopen;
        that.onerror = this.websocketonerror;
        that.onmessage = this.websocketonmessage; 
        that.onclose = this.websocketclose;
    }, 
    websocketonopen() { //发送
        this.websocket.send(''); 
        console.log("WebSocket连接成功");
    },
    websocketonerror(e) { //错误
        console.log("WebSocket连接发生错误");
    },
    websocketonmessage(e){ //数据接收  
        //处理逻辑
    }, 
    websocketclose(e){ //关闭 
        console.log("connection closed (" + e.code + ")"); 
    }, 
}

相关文章

  • vue中使用webSocket更新实时天气

    前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块。 关于 webSocket 的操作及示...

  • vue中使用websocket,实时更新数据

    项目中需要实时更新数据,马上就想到了websocket,以下是websocket使用方法,在此记录一下。 有不合理...

  • 手机熄屏再唤醒后 websocket 的重连方法。

    使用websocket长连接进行实时通信,在制作客服聊天或是必要的数据实时更新需求中是很好的选择,毕竟轮询大家都懂...

  • 2019-10-16

    [Vue+WebSocket 实现页面实时刷新长连接] *最近vue项目要做数据实时刷新,折线图每秒重画一次,数据...

  • vue中this.$set()的作用

    在使用VUE中遇到要求实时更新视图数据,当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用th...

  • 足球即时比分 实时赔率

    bet365网站的数据是通过websocket协议实现数据的实时更新,所以需要通过websocket协议来建立客户...

  • vue + webSocket 实时任务信息通知

    vue + webSocket 实时任务信息通知 websocket WebSocket 协议在2008年诞生,2...

  • keep-alive使用后存在的问题

    使用vue2.0中的keep-alive来缓存页面,导致每次编辑页面保存后返回到list页的数据不会实时更新,接下...

  • WebSocket - iOS

    开发中要使用WebSocket,做到实时监控消息,需要用的技术是websocket。 Swift-WebSocke...

  • Websocket爬虫(初级)

    有些网站为了追求数据的实时更新,很多时候会采用 websocket 的方式,例如股票交易数据、数据货币交易数据等。...

网友评论

      本文标题:vue中使用websocket,实时更新数据

      本文链接:https://www.haomeiwen.com/subject/uwmhjctx.html