最近在開發(fā)小程序用到了WebSocket,小程序提供了相應的原生API,與H5的API使用方式上有一些區(qū)別,所以流行的H5的一些成熟的類庫使用起來有些困難,而原生API又存在一些缺陷,所以就自己實現(xiàn)了一套心跳重連機制。 慣例,先簡單介紹一下Websocket。 Websocket簡介Websocket是什么WebSocket 是一種網(wǎng)絡通信協(xié)議。RFC6455 定義了它的通信標準。 WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。 為什么需要WebsocketHTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應用層協(xié)議。它采用了請求/響應模型。通信請求只能由客戶端發(fā)起,服務端對請求做出應答處理。 所以當我們想服務器主動給客戶端發(fā)送消息,HTTP是做不到的,我們只能使用輪詢或者長輪詢來實現(xiàn)類似的功能,這樣的方式效率低并且浪費資源,為了解決這樣的問題,WebSocket誕生了。 小程序中的WebSocket小程序WebSocket的API把你給懶得!自己官網(wǎng)看去! 為什么要做心跳重連在使用原生WebSocket的時候,我們經(jīng)常會感覺不太穩(wěn)定,服務端發(fā)送的消息有時候客戶端接收不到,或者是客戶端發(fā)送的消息服務端接收不到,雖然WebSocket也提供了onError和onClose的方法,但是經(jīng)常會有各種未知情況導致斷開連接而并不觸發(fā)Error或Close事件。這樣就導致實際連接已經(jīng)斷開了,而客戶端和服務端卻不知道,還在傻傻的等著消息來。 所以我們要解決的問題就很清晰了: 保證連接狀態(tài),連接斷開時讓客戶端與服務端都能知道,進而重連。上代碼頁面載入后,我們連接socket先onLoad(){ this.linkSocket() }, linkSocket(){ let that = this wx.connectSocket({ url: app.globalData.wsUrl + 'websocket?' + this.data.taskId + '&' + this.data.userId, success() { console.log('連接成功') that.initEventHandle() } }) }, 復制代碼 綁定事件然后調(diào)用initEventHandle來綁定各種各樣的事件 initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 }) wx.onSocketOpen(()=>{ console.log('WebSocket連接打開') }) wx.onSocketError(function (res) { console.log('WebSocket連接打開失敗') }) wx.onSocketClose(function (res) { console.log('WebSocket 已關閉!') }) }, 復制代碼 這個先放在這我們一會往里填東西 斷線重連reconnect(){ if (this.lockReconnect) return; this.lockReconnect = true; clearTimeout(this.timer) if (this.data.limit<12){ this.timer = setTimeout(() => { this.linkSocket(); this.lockReconnect = false; }, 5000); this.setData({ limit: this.data.limit+1 }) } }, 復制代碼 我們設置一個鎖和最大的重連次數(shù),避免出現(xiàn)無限重連的情況,為了不給服務器太大的壓力我這里設置的是5秒重試一次,最多請求12次。 改造一下initEventHandle這樣我們就可以實現(xiàn)一般的觸發(fā)Error的斷線重連。 initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 }) wx.onSocketOpen(()=>{ console.log('WebSocket連接打開') }) wx.onSocketError((res)=>{ console.log('WebSocket連接打開失敗') this.reconnect() }) wx.onSocketClose((res)=> { console.log('WebSocket 已關閉!') this.reconnect() }) }, 復制代碼 關鍵的來的---心跳對象先擼為敬 let heartCheck = { timeout: 10000, timeoutObj: null, serverTimeoutObj: null, reset: function () { clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function () { this.timeoutObj = setTimeout(()=> { console.log("發(fā)送ping"); wx.sendSocketMessage({ data:"ping", // success(){ // console.log("發(fā)送ping成功"); // } }); this.serverTimeoutObj = setTimeout(() =>{ wx.closeSocket(); }, this.timeout); }, this.timeout); } }; 復制代碼 心跳對象內(nèi)timeout為每10秒發(fā)一次心跳,timeoutObj、serverTimeoutObj是清除定時器用的對象,reset方法重置定時器,start發(fā)送心跳。 繼續(xù)改造我們的initEventHandle initEventHandle(){ let that = this wx.onSocketMessage((res) => { //收到消息 if (res.data == "pong"){ heartCheck.reset().start() }else{ \\處理數(shù)據(jù) } }) wx.onSocketOpen(()=>{ console.log('WebSocket連接打開') heartCheck.reset().start() }) wx.onSocketError((res)=>{ console.log('WebSocket連接打開失敗') this.reconnect() }) wx.onSocketClose((res)=> { console.log('WebSocket 已關閉!') this.reconnect() }) }, 復制代碼 打開連接的時候調(diào)用start開始心跳,每隔10秒向服務端發(fā)送消息"ping",服務端接收到消息后給我們回個話"pong",就好像微信聊天。
別看在嗎很煩,至少能確定你們倆還是好友,要不他把你拉黑了你還不知道(有點跑題了) 如果超過10秒服務端還沒回復“pong”,則認為連接斷開的 我擦,敢刪我好友,我這東北爺們的暴脾氣這能忍?我把你也刪了 。。。。。。。。。。。然后趕緊重新申請好友 這是暴脾氣的客戶端直接把連接關閉,調(diào)用closeSocket,可是一關閉我們的onSocketClose事件又去重連了(渣男) 至此,心跳重連實現(xiàn)完畢 |