vue项目中使用websocket对数据做实时更新的处理

websocket技术简介(摘自百度百科):

           WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocketAPI也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

websocket的用法(前端的):

mounted:function(){    
    this.initWebSocket();  
},
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 + ")"); 
    }, 
}
destroyed: function() {
    //页面销毁时关闭
    this.websocket.onclose =  this.websocketclose();
},

 

你可能感兴趣的:(websocket)