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

前端 潘老师 3个月前 (12-06) 62 ℃ (0) 扫码查看



本文主要讲解关于如何使用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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12150.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】