【无标题】Vue-全局websocket 实现消息推送
Vue WebSocket 消息推送
·
websocket使用
websocket的使用主要就是初始化一个websocket实例,定义连接路径即请求后端的接口路径,之后就是绑定该websocket的onopen,onerror,onmessage,onsend,onclose方法。
onopen:连接成功之后执行的方法;
onerror:错误异常时执行方法;
onmessage:接收到后端推送的消息时执行的方法
onsend:前端向后端发送消息时执行的方法;
onclose:连接关闭时执行的方法。
created() {
this.initWebSocket()
},
watch:{
// 监听消息数组变化,
messageList: {
handler(newValue, oldValue) {
if (newValue !== oldValue) {
this.messageList = newValue
}
},
deep: true,
immediate: true,
},
},
methods:{
// 消息推送
initWebSocket() {
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
var userId = this.$store.getters.userInfo.id
var url =
window._CONFIG['domianURL'].replace('https://', 'ws://').replace('http://', 'ws://') + '/websocket/' + userId
this.websock = new WebSocket(url)
this.websock.onopen = this.websocketonopen
this.websock.onerror = this.websocketonerror
this.websock.onmessage = this.websocketonmessage
this.websock.onclose = this.websocketclose
},
websocketonopen() {
console.log('WebSocket连接成功')
},
websocketonerror(e) {
console.log('WebSocket连接发生错误')
},
// 接受后端返来的最新消息,并进行数据处理,推送到消息最前面
websocketonmessage(e) {
let that = this
let res = JSON.parse(e.data)
let data = {
createTime: res.date,
message: res.msgTxt,
id: res.msgId,
}
that.messageList.unshift(data)
},
websocketclose(e) {
console.log('connection closed (' + e.code + ')')
},
}
参考文章:
https://blog.csdn.net/qq_63312957/article/details/125375122
更多推荐
已为社区贡献2条内容
所有评论(0)