前端 二維碼彈出框掃碼 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.可能存在打開了二維碼彈出框，但是並沒有掃碼而是直接關閉彈出框的再次打開的情況

主要注意心跳檢測的定時器，需要清理，否則會存在多個定時器一直發送消息