H5 WebSocket 项目初实践

最新推荐文章于 2024-07-12 10:47:32 发布

小弟不柴

最新推荐文章于 2024-07-12 10:47:32 发布

阅读量394

点赞数 1

分类专栏： H5 文章标签： H5

本文链接：https://blog.csdn.net/yin516121/article/details/99455083

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前文：

H5 WebSocket 只需跟后台提交一个链接，就会一直保持链接状态，可同时在线多个角色，相当于多个人在同一个房间内，当后台有数据返回会同时通知到房间内的所有人，所有人都会是同一时间收到消息的。此处用于解决项目中普通的定时发送接口获取数据后执行一个事件，当用户只是一人定时器只开启一个是没问题的，当多用户的时候每个用户的浏览器会开启一个定时器而因开启的时间不同所有返回的数据时间也不同，会导致谁先接收到消息谁的音频播放会先播报，随后的几个用户再播报，这就导致用户不能统一时间的接收到实时的数据。

需注意的是当WebSocket链接成功后不主动关闭是会一直保持链接状态，所以需要在关键的位置将链接关闭

//实时推送(项目此处用于播报音频)
webSocket(){
 //判断浏览器是否支持webSocket
 if ("WebSocket" in window){
  let URL = this.$store.state.socketURL+'?roomName=orderReminder&userId='+this.userId         
            +'&senderType=GROUP',
       _this = this,
       postData = JSON.stringify({
          messageType:'sendTips',
          messageContent:'exmaine'
       }),
       audioExamineCount_id=document.getElementById('audioExamineCount'),
       audioDistributionCount_id=document.getElementById('audioDistributionCount');

  //new WebSocket(路径)后在回调函数onmessage成功连接后就会一直保持在线状态
  //如果再次new就会打开一个新的连接，代表的是一个新的在线角色
  this.socket = new WebSocket(URL);

  //WebSocket的角色连接成功时触发的回调，此处一般用于传递参数
  //定时传递参数的定时器需写在回调里面，不是定时执行onopen回调
  //连接成功后就是保持连线状态，回调onopen会一直有效，所以参数只需要在里面定时发送就可以了
  this.socket.onopen = function(){
    var send = function(){
      _this.socket.send(postData);
    }
    clearInterval(_this.socketTime);
    _this.socketTime = setInterval(send, 3000);
  }

  //WebSocket链接成功并返回数据的时候触发，此回调接收后台返回的数据
  //当项目上线，多人使用的时候后台数据也能返回一致的时间，音频播报会同时响起
  this.socket.onmessage = function(res) {
    let getData = JSON.parse(res.data).data;
    if(getData && getData.code == 0){
      _this.grabSingleData = getData.data;
      let endTime = new Date();
      endTime.setTime(endTime.getTime() + 600000);
      if(getData.data.examineCount > 0){
        audioExamineCount_id.play();
      }
      if(getData.data.distributionCount > 0){
        if(_this.$cookie.get('audioDistributionCount') != 
          getData.data.distributionCount){
            _this.U.setCookie({
               setName: 'audioDistributionCount',
               setValue: getData.data.distributionCount,
               setDate: endTime.toGMTString()
            });
          audioDistributionCount_id.play();
         }
       }
    }
  }

  //WebSocket通信发生错误时触发
  this.socket.onerror = function(err) {
    console.log(err);
  }
}else{
  alert("您的浏览器不支持 WebSocket!");
 }
}


//关闭webSocket
this.socket.close();