前端 二维码弹出框扫码 websocket 长连接思路

----只提供相关思路----

1.在 window.sessionStorage 中存储三个标志位

token：当前用户的token

status：当前弹出框的websocket连接状态

totalStatus：系统的websocket总体连接状态

注：使用session是因为浏览器关闭后websocket会清掉，同是websocket的标志位相关session也会清掉

2.心跳检测，定时器，rxjs

3.用户操作需要区分三种情况

①用户初次登录，尚未建立websocket连接  ：this.webSocket = new WebSocket(this.url);

② websocket连接建立，当前二维码弹出框处于关闭状态 等待再次打开：进行心跳检测

③ websocket连接建立，当前二维码弹出框处于开启状态 : 连接上之前的websocket连接

4.websocket的状态判断

saveSessionStotage(token, status: ’success’|’error, totalStatus: ‘open’|’closed’){

window.sessionStorage.setItem(‘websocket’,JSON.stringify({token:token,status:status,totalStatus:totalStatus}))

}

① this.webSocket.onopen : 

this.saveStotage(token,’success’,’open’)

② this.webSocket.onmessage :

this.saveStotage(token,’success’,’open’)

③ this.webSocket.onclose :

this.saveStotage(token,’error’,’open’)  // 对于后台关闭的连接要继续心跳检测

④ this.webSocket.onerror :

this.saveStotage(token,’error’,’closed’)

⑤心跳检测的相关操作也需要按情况更新

5.用户账号密码登录时无须建立websocket连接，当业务内进行操作打开二维码弹出框后再建立websocket连接，用户退出系统后必须要销毁websocket连接

6.可能存在打开了二维码弹出框，但是并没有扫码而是直接关闭弹出框的再次打开的情况

主要注意心跳检测的定时器，需要清理，否则会存在多个定时器一直发送消息