WebSocket的簡單使用
ws_ht() {
let url = window._CONFIG['wsURL']
//console.log('后臺WS開始連接')
// 實體化socket
this.socket_ht = new WebSocket(url)
// 監聽socket連接
this.socket_ht.onopen = this.wsopen_ht
// 監聽socket錯誤資訊
this.socket_ht.onerror = this.wserror_ht
// 監聽socket訊息
this.socket_ht.onmessage = this.wsgetMessage_ht
// 關閉socket連接
this.socket_ht.onclose = this.wsclose_ht
},
wsopen_ht(){
//console.log('后臺ws連接成功')
}
wserror_ht(){
//console.log('后臺ws連接錯誤')
this.reconnect()//重連的方法
}
wsgetMessage_ht(wsMessage){
//console.log('wsMessage')
if(wsMessage.data =https://www.cnblogs.com/FAIGEL/archive/2022/10/25/='0xA'){
//收到訊息后重新設定心跳檢測
setTimeout(() => {
this.heartCheck()
}, 30000)
}
}
wsclose_ht(){
//console.log('后臺ws連接成功')
this.reconnect()//重連的方法
}
//ws重連功能
reconnect(){
let that = this
if (that.lockReconnect) return
that.lockReconnect = true
//沒連接上會一直重連，設定延遲避免請求過多
setTimeout(function() {
that.ws_ht()
that.lockReconnect = false
}, 6000)
}
//心跳檢測
heartCheck(){、
let that = this
let sendTimeoutObj = null
let serverTimeoutObj = null
//清空定時器
sendTimeoutObj && clearTimeout(sendTimeoutObj)
serverTimeoutObj && clearTimeout(serverTimeoutObj)
sendTimeoutObj = setTimeout(function() {
that.socket_ht.send(that.ping_str)
serverTimeoutObj = setTimeout(function() {
that.socket_ht.onclose
}, 3000)
}, 3000)
}
一、實際需要的引數只有url，為后端建立ws的地址，
二、列印出websocket的實體可以看出里面自帶有四個屬性：onopen=>onmessage=>onerror=>onclose
WebSocket.onclose
用于指定連接關閉后的回呼函式，
WebSocket.onerror
用于指定連接失敗后的回呼函式，
WebSocket.onmessage
用于指定當從服務器接受到資訊時的回呼函式，
WebSocket.onopen
用于指定連接成功后的回呼函式，
三、另外還有一個readyState,值有0\1\2\3，
0 (WebSocket.CONNECTING) |
正在連接中 |
|---|---|
1 (WebSocket.OPEN) |
已經連接并且可以通訊 |
2 (WebSocket.CLOSING) |
連接正在關閉 |
3 (WebSocket.CLOSED) |
連接已關倍訓者沒有連接成功 |
四、方法有兩個，
WebSocket.close([code[, reason\]])
關閉當前鏈接，
WebSocket.send(data)
對要傳輸的資料進行排隊，
五、保證鏈接穩定性
1、進行重連：
在出現error后呼叫重連函式，進行重連，
2、心跳機制：
websocket規范定義了心跳機制，一方可以通過發送ping（opcode 0x9）訊息給另一方，另一方收到ping后應該盡可能快的回傳pong（0xA），
心跳機制是用于檢測連接的對方在線狀態，因此如果沒有心跳，那么無法判斷一方還在連接狀態中，一些網路層比如 nginx 或者瀏覽器層會主動斷開連接，檢測到 open 事件后，啟動一個定時任務，比如瀏覽器中，每次發送資料 0x9 給服務端，而服務端回傳 0xA 作為回應；心跳的定時任務一般是相隔 15-20 秒發送一次，
本文來自博客園，?????作者：FAIGEL，打字創作不易，如轉載請注明原文鏈接：https://www.cnblogs.com/FAIGEL/p/16824318.html，謝謝?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519306.html
標籤：其他
上一篇：從0搭建vue3組件庫: 如何完整搭建一個前端腳手架?
下一篇：css命名