vue前后端实现WebSocket的连接,数据库变化后后端推送的消息在前端主动推送,同时实现页面的部分更新
实现目标:前后端通过WebSocket建立连接,当数据库发生变化后后端向前端推送消息,前端将展示后端推送的消息,同时实现页面部分数据的更新。实现方法:vue文件中:data中:wsUrl: 'xxxx/ws/xxxx/ws/dem/',methods中:// ---- WebSocket连接start ----initWebSocket() {let randomNum = Math.round(
·
实现目标:前后端通过WebSocket建立连接,当数据库发生变化后后端向前端推送消息,前端将展示后端推送的消息,同时实现页面部分数据的更新。
实现方法:
vue文件中:
data中:
wsUrl: 'xxxx/ws/xxxx/ws/dem/',
methods中:
// ---- WebSocket连接start ----
initWebSocket() {
let randomNum = Math.round(Math.random() * 100)
//初始化weosocket
const wsuri = 'ws://' + this.wsUrl + randomNum
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
},
// 连接建立之后执行send方法发送数据
websocketonopen() {
},
//连接建立失败重连
websocketonerror() {
console.log('连接失败,重新连接')
this.initWebSocket()
},
//数据接收
websocketonmessage(e) {
console.log(e)
if (e.data != '连接成功') {
this.msgShow = true // 提示信息的弹框展示,弹框样式本文不再赘述
this.msg = JSON.parse(e.data).msg // 前端弹框展示的内容为后端返回的信息,具体内容具体分析
this.date = JSON.parse(e.data).date // 前端弹框展示的内容为后端返回的信息,具体内容具体分析
setTimeout(() => {
this.getInfo() // 某某某接口的调用方法
console.log('收到数据')
}, 3000)
}
},
//数据发送
websocketsend(Data) {
this.websock.send(Data)
},
//关闭 websocket
websocketclose(e) {
console.log('断开连接,重新连接', e)
}
// ---- WebSocket连接end ----
用后及时销毁:
script中:
destroyed() {
// 离开路由之后断开websocket连接
this.websock.close()
},
几点说明:
1. setTimeout(() => {
this.getInfo() // 某某某接口的调用方法
console.log('收到数据')
}, 3000)
此处代码为webSocket接收到信息后触发页面其他接口的调用方法,实现页面的局部更新,延迟3秒展示的原因为给数据库更新数据的时间,避免因数据库更新不及时导致页面的局部更新失败。
2.let randomNum = Math.round(Math.random() * 100)
该行代码为设置0-100之间的随机数,拼接在wsurl中,避免多人同时登录同一账号导致WebSocket的信息发送失败。
这样就实现了WebSocket连接,并可以同时对页面进行局部更新。
更多推荐
已为社区贡献15条内容
所有评论(0)