一次点击触发两次sendevent事件导致异常的情况

David六六

BUG说明：在页面A，点击接听按钮后打开页面B，在B页面成功打开后向服务端发送sendevent事件时，连续发送了两次。不是必现的

Bug出现后，第一时间考虑在A页面给按钮加锁，代码如下

1.     async onAccept() {
   
2.       if (this.callCancel) {
   
3.         return
   
4.       }
   
5.       if(this.answerLock){
   
6.         console.log(this.answerLock+"接听锁开启中")
   
7.         return
   
8.       }
   
9.       //防止锁未关闭
   
10.       this.answerLock = true
    
11.       this.lockTimer = setTimeout(() => {
    
12.         if (this.answerLock) {
    
13.           this.answerLock = false
    
14.         }
    
15.       }, 2000)
    
16.       const videoCallInfo = await Api.get(`video_calls/${this.videoCallId}`)
    
17.       if (videoCallInfo.status === 'canceled') {
    
18.         toast('对方已取消通话')
    
19.         this.pageExit()
    
20.         return
    
21.       }
    
22. 
    
23.       clearInterval(this.callTimer)
    
24.       window.api.stopPlay()
    
25.       window.api.openWin({
    
26.         name: 'video-call',
    
27.         url: './call-index.html',
    
28.         slidBackEnabled: false,
    
29.         pageParam: {
    
30.           target: {
    
31.             id: this.fromUser.id,
    
32.             name: this.fromUser.name,
    
33.             avatar_url: this.fromUser.avatar_url,
    
34.             is_anchor: this.fromUser.is_anchor,
    
35.             type: 'receive',
    
36.           },
    
37.           video_call_id: this.videoCallId,
    
38.         },
    
39.       })

复制代码

实际测试，连续点击，加锁也是成功了

1. [2022-9-17 19:32:16][INFO] true接听锁开启中
   
2. [2022-9-17 19:32:16][INFO] true接听锁开启中
   
3. [2022-9-17 19:32:16][INFO] true接听锁开启中

复制代码

但是后续在用户使用过程中还是有出现同时收到两条消息

1. [2022-08-08 21:01:42][123253637]Action: accept-video-call
   
2. [2022-08-08 21:01:42][123253637]Action: accept-video-call
   
3. [2022-08-08 21:01:43][123253637]Push message video_call_accepted success.
   
4. [2022-08-08 21:01:44][123253637]Push message video_call_stopped success.

复制代码

B页面打开后只是简单的执行了

1.       window.api.sendEvent({
   
2.         name: 'sendActionEvent',
   
3.         extra: {
   
4.           action: 'accept-video-call',
   
5.           video_call_id: this.videoCallId,
   
6.         },
   
7.       })

复制代码

这个是对sendActionEvent的监听

1.   initSendActionEventListener() {
   
2.     window.api.addEventListener(
   
3.       {
   
4.         name: 'sendActionEvent',
   
5.       },
   
6.       (ret) => {
   
7.         const data = ret.value
   
8. 
   
9.         this.send(data)
   
10.       }
    
11.     )
    
12.   }

复制代码

这个是this.send方法

1.   // 发送数据
   
2.   send(data) {
   
3.     let message = typeof data === 'object' ? JSON.stringify(data) : data
   
4.     let res =**.**monWebSocket.send({
   
5.       msg: message,
   
6.     })
   
7.     if (res) {
   
8.       log('commonWebSocket 发送成功:' + message)
   
9. 
   
10.       // 重置重试次数
    
11.       if (this.sendRetryCount < 3) {
    
12.         this.sendRetryCount = 3
    
13.       }
    
14.     } else {
    
15.       log('commonWebSocket 发送失败:' + message)
    
16. 
    
17.       // 发送失败重试
    
18.       if (this.sendRetryCount > 0) {
    
19.         this.sendRetryCount--
    
20.         setTimeout(() => {
    
21.           this.send(data)
    
22.         }, 1000)
    
23.       }
    
24.     }
    
25.   }

复制代码

后续应该怎么优化，或者问题出现在哪里，求大佬们解答一下

勇可可【1161277121】

连续接收多次的间隔是多少呢

David六六

勇可可 · 2022-9-18 09:19连续接收多次的间隔是多少呢

[2022-08-08 21:01:42][123253637]Action: accept-video-call
[2022-08-08 21:01:42][123253637]Action: accept-video-call
[2022-08-08 21:01:43][123253637]Push message video_call_accepted success.
[2022-08-08 21:01:44][123253637]Push message video_call_stopped success.

看后台日志是同一秒

勇可可【1161277121】

David六六 · 2022-9-18 16:58[2022-08-08 21:01:42][123253637]Action: accept-video-call
[2022-08-08 21:01:42][123253637]Action: accept-video-call
[2022-08-08 21:01:43][123253637]Push message video_call_accepted success.

可以在接收的时候写个定时器 1秒内只接收一次

David六六

勇可可 · 2022-9-19 10:11可以在接收的时候写个定时器 1秒内只接收一次

我们目前是这样临时解决的，但是后端那边说最好前端把bug解决掉

勇可可【1161277121】

David六六 · 2022-9-19 16:24我们目前是这样临时解决的，但是后端那边说最好前端把bug解决掉

和后台也没啥关系吧。  我是说你在addEventListener的时候

David六六

勇可可 · 2022-9-19 17:00和后台也没啥关系吧。  我是说你在addEventListener的时候

明白了，我针对addEventListener中name为sendActionEvent的情况，每秒只处理一次试试

勇可可【1161277121】

David六六 · 2022-9-19 17:23明白了，我针对addEventListener中name为sendActionEvent的情况，每秒只处理一次试试

可以的 发送可以随便 接收多少时间内只接收一次即可