如何使用webSocket接收对应页面消息通知

文
章
目
录

• 前言
• 实现

本文主要讲解关于如何使用webSocket接收对应页面消息通知相关内容，让我们来一起学习下吧！

前言

做项目的时候就遇到有一些数据是后端使用websoket实时返回的，我需要在对应的页面上拿到这个数据做处理使用，一开始是想要全部存缓存直接拿的，但是在场景上我是必须要拿到这个数据才能进行下一步，如果是存缓存我不知道什么时候拿，总不能隔一会就去拿一下，看回没回来，就想着能不能做一下监听

实现

 methods：{
 initWebSocket() {
  this.webSocket = null
  if (\'WebSocket\' in window) {
     this.webSocket = new WebSocket(\'ws://192.168.2.104:9676\')
    this.webSocket.onopen = this.webSocketOnOpen
    this.webSocket.onmessage = this.webSocketOnMessage
    this.webSocket.onerror = this.webSocketOnError
    this.webSocket.onclose = this.webSocketOnClose
  } else {
    this.$message.error(\'当前浏览器不支持 websocket\')
  }
},
webSocketOnOpen() {
  console.log(\'---连接建立成功---\')
},
closeWs() {
  this.webSocket.close();
},

webSocketOnError() {
  console.log(\'webSocketOnError\')
},
webSocketOnMessage(e) {
  // 数据接收
  this.redata = JSON.parse(e.data)
  const webSocketInfo = this.webSocketInfo
  
 //自定义事件挂载在window上  
 //需要注意的一点就是存进去的数据一定要放在detail里面，不然是挂不上去的
  window.dispatchEvent(new CustomEvent(\'onmessageWS\', {
    detail: {
      //需要拿到的数据
    }
  }))

},
websocketsend(Data) {
  // 数据发送
  this.webSocket.send(Data)
},
webSocketOnClose(e) {
  console.log(\'断开连接\', e)
},
 }
  mounted(){
  this.initWebSocket()
  }
 
 
 
 在需要使用的页面监听事件
 mounted(){
    window.addEventListener(\'onmessageWS\', (res)=>{
    //res就是传过来的数据res.detail就可以拿到了
})
 }
 
 
 
 

以上就是关于如何使用webSocket接收对应页面消息通知相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！