最近在開發(fā)小程序用到了WebSocket，小程序提供了相應(yīng)的原生API，與H5的API使用方式上有一些區(qū)別，所以流行的H5的一些成熟的類庫使用起來有些困難，而原生API又存在一些缺陷，所以就自己實現(xiàn)了一套心跳重連機制。
慣例，先簡單介紹一下Websocket。
Websocket簡介Websocket是什么WebSocket 是一種網(wǎng)絡(luò)通信協(xié)議。
RFC6455 定義了它的通信標準。
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。
為什么需要WebsocketHTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。
它采用了請求/響應(yīng)模型。
通信請求只能由客戶端發(fā)起，服務(wù)端對請求做出應(yīng)答處理。
所以當我們想服務(wù)器主動給客戶端發(fā)送消息，HTTP是做不到的，我們只能使用輪詢或者長輪詢來實現(xiàn)類似的功能，這樣的方式效率低并且浪費資源，為了解決這樣的問題，WebSocket誕生了。
小程序中的WebSocket小程序WebSocket的API把你給懶得！自己官網(wǎng)看去!為什么要做心跳重連在使用原生WebSocket的時候，我們經(jīng)常會感覺不太穩(wěn)定，服務(wù)端發(fā)送的消息有時候客戶端接收不到，或者是客戶端發(fā)送的消息服務(wù)端接收不到，雖然WebSocket也提供了onError和onClose的方法，但是經(jīng)常會有各種未知情況導(dǎo)致斷開連接而并不觸發(fā)Error或Close事件。
這樣就導(dǎo)致實際連接已經(jīng)斷開了，而客戶端和服務(wù)端卻不知道，還在傻傻的等著消息來。
所以我們要解決的問題就很清晰了：
保證連接狀態(tài)，連接斷開時讓客戶端與服務(wù)端都能知道，進而重連。
上代碼頁面載入后,我們連接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 已關(guān)閉！'
) }
) }
,這個先放在這我們一會往里填東西斷線重連 reconnect(){
if (this.lockReconnect) return;
this.lockReconnect = true;
clearTimeout(this.timer) if (this.data.limit this.timer = setTimeout(() => {
this.linkSocket();
this.lockReconnect = false;
}
, 5000);
this.setData({
limit: this.data.limit+1 }
) }
}
,我們設(shè)置一個鎖和最大的重連次數(shù)，避免出現(xiàn)無限重連的情況，為了不給服務(wù)器太大的壓力我這里設(shè)置的是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 已關(guān)閉！'
) this.reconnect() }
) }
,關(guān)鍵的來的---心跳對象先擼為敬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 已關(guān)閉！'
) this.reconnect() }
) }
,打開連接的時候調(diào)用start開始心跳,每隔10秒向服務(wù)端發(fā)送消息"ping",服務(wù)端接收到消息后給我們回個話"pong",就好像微信聊天。
在嗎?在在嗎?在在嗎?滾別看在嗎很煩，至少能確定你們倆還是好友，要不他把你拉黑了你還不知道（有點跑題了）如果超過10秒服務(wù)端還沒回復(fù)“pong”，則認為連接斷開的我擦，敢刪我好友，我這東北爺們的暴脾氣這能忍？我把你也刪了 。
。
。
。
。
。
。
。
。
。
。
然后趕緊重新申請好友這是暴脾氣的客戶端直接把連接關(guān)閉，調(diào)用closeSocket，可是一關(guān)閉我們的onSocketClose事件又去重連了（渣男）至此，心跳重連實現(xiàn)完畢總結(jié)Socket心跳重連在H5中可以有類似的實現(xiàn)，也有成熟的第三方庫，比如說stomp+websocket+sockjs可以實現(xiàn)更加完整的更兼容的socket連接方案,可以下次給大家分享(看我心情)。
如果覺得還行就點個贊鼓勵一下我。
如果覺得寫得什么垃圾，點個贊懲罰一下我把。
推薦教程：
《微信小程序》以上就是用微信小程序?qū)崿F(xiàn)WebSocket心跳重連的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序開發(fā)經(jīng)驗的總結(jié)
下一篇：
微信小程序能被收藏嗎？相關(guān)文章相關(guān)視頻微信小程序 絕對路徑 require微信小程序必須買域名嗎微信小程序502是什么意思自學(xué)微信小程序從零到一：
項目構(gòu)建后http請求封裝用微信小程序?qū)崿F(xiàn)WebSocket心跳重連微信小程序開發(fā)工具的安裝初識微信小程序(1)深入了解微信小程序(一) [溫州做小程序]