Vue+WebSocket 实现页面实时刷新长连接(项目实战)

initWebSocket(){  
    const wsuri = 'ws://xxxxxxxxxxx';//ws地址
    //注册实例
    this.websock = new WebSocket(wsuri); 
    //WebSocket连接成功
    this.websock.onopen = this.websocketonopen;
    //WebSocket连接发生错误
    this.websock.onerror = this.websocketonerror;
    //数据接收 
    this.websock.onmessage = this.websocketonmessage; 
    //关闭 
    this.websock.onclose = this.websocketclose;
    //这个是我为了全局使用  使用的vuex设置为全局的
    this.$store.state.websock = this.websock
}, 
websocketonopen() {
    console.log("WebSocket连接成功");
    this.btnxx()
},
websocketonerror(e) { //错误
    console.log("WebSocket连接发生错误");
},
websocketonmessage(e){ //数据接收 
    const redata = JSON.parse(e.data);
    //注意:长连接我们是后台直接1秒推送一条数据, 
    //但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据,
    //这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分
    // console.log(redata); 
}, 
websocketsend(agentData){//数据发送 
    this.websock.send(agentData); 
}, 
websocketclose(e){ //关闭 
    console.log("socket已经关闭")
},
//我是开始直接注册   连接   看个人需求
created(){
    this.initWebSocket()
},
//关闭websock连接   
// this.websock.close();
// this.$store.state.websock.close();
btnxx(){
    let a = {}
    a.type = xxxxxxxxxxxxxxxx
    a.content = JSON.stringify(xxxxxxxxxxxx)
    let b = JSON.stringify(a)
    this.websocketsend(b)
},
发布了209 篇原创文章 · 获赞 38 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/weixin_43953710/article/details/103611424