Vue使用WebSocket实现实时获取后端推送的数据
目录
Vue使用WebSocket实现实时获取后端推送的数据
Vue可以使用WebSocket实现实时获取后端推送的数据。
1.在Vue项目中安装WebSocket库
可以使用npm或 WebSocket库：
npm install --save websocket2.创建WebSocket连接
在Vue组件中创建WebSocket连接，连接到后端WebSocket服务器，代码如下：
data(){
return {
wsUrl: "ws://192.168.1.18:8088/websocket",
ws: null,
testSetinterval: null,
}
},
mounted() {
this.websocket()
},
methods: {
websocket() {
this.ws = new WebSocket(this.wsUrl)
if (typeof (WebSocket) === "undefined") {
alert("您的浏览器不支持socket")
} else {
this.ws.onopen = () => {
// Web Socket 已连接上，使用 send() 方法发送数据
// 设置定时器
this.testSetinterval = setInterval(() => {
setTimeout(() => {
this.ws.send('Holle')
}, 0)
}, 1000 * 2)
// 通过$once来监听生命周期beforeDestroy钩子，在组件销毁前清除定时器。
// 实现页面切换或者刷新时清除websocket连接
this.$once('hook:beforeDestroy', () => {
//清除定时器
clearInterval(this.testSetinterval)
//关闭websocket连接
this.ws.close()
console.log("定时器清除了")
})
}
this.ws.onmessage = evt => {
console.log("连接成功")
}
this.ws.onclose = e => {
// 关闭 websocket
console.log('websocket 断开')
console.log(e.code + ' ' + e.reason + ' ' + e.wasClean);
}
}
},
}上面的代码中，使用 WebSocket 连接到后端 WebSocket 服务器，通过监听 onmessage 事件，实时获取从后端推送来的数据。