vue中使用WebSocket

原创于 2021-01-08 16:31:53 发布 · 198 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #jquery #javascript #html5 #html

vue 专栏收录该内容

4 篇文章

订阅专栏

该博客详细介绍了如何在Vue应用中初始化并管理WebSocket连接。在`created`钩子中建立连接，`destroyed`钩子中关闭连接，确保生命周期内的资源有效管理。`initWebSocket`方法设置监听事件，包括`websocketonopen`发送测试消息，`websocketonerror`进行重连，`websocketonmessage`接收并解析数据，以及`websocketsend`方法用于发送数据。整个过程展示了WebSocket的基本使用和错误处理策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
	data(){
		return {}
	},
	created(){
	  this.initWebSocket();
	},
	destroyed(){
	  this.websock.close() //离开路由之后断开websocket连接
	},
	methods:{
	  initWebSocket() { //初始化weosocket
            const wsuri = "ws://172.16.26.133:8080/xcdpWK/"; // websocked url地址
       
            this.websock = new WebSocket(wsuri);
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onclose = this.websocketclose;
            console.log('weosocket已连接')
        },
        websocketonopen() { //连接建立之后执行send方法发送数据
            let actions = {
                "test": "12345"
            };
            this.websocketsend(JSON.stringify(actions));
            console.log('消息发送成功！')
        },
        websocketonerror() { //连接建立失败重连
            console.log('weosocket连接建立失败')
            this.initWebSocket();
        },
        websocketonmessage(e) { //数据接收
            console.log('weosocket数据接收')
            const redata = JSON.parse(e.data);
            console.log(redata)
        },
        websocketsend(Data) { //数据发送
            this.websock.send(Data);
        },
        websocketclose(e) { //关闭
            console.log('断开连接', e);
        },
	}
}