WebSocket系列之如何建立和維護(hù)可靠的連接

BetaRabbit 發(fā)布于2019-08-22 16:03 / 1198人閱讀

摘要：與此同時(shí)，后端服務(wù)的中也有相關(guān)的長(zhǎng)連接維持時(shí)長(zhǎng)設(shè)置。如何快速的恢復(fù)連接根據(jù)上面的操作方案，我們會(huì)在網(wǎng)絡(luò)異常時(shí)斷開連接。

概述

通過(guò)前四篇博客，相信讀者對(duì)于WebSocket的使用和數(shù)據(jù)（不論是ArrayBuffer還是String）傳輸都有了一個(gè)深刻的了解。現(xiàn)在我們來(lái)介紹下，我在使用WebSocket時(shí)，連接相關(guān)模塊遇到的一些共性問(wèn)題，以及我們?nèi)绾谓鉀Q這些問(wèn)題。

本文作為WebSocket系列的第五篇文章，它的內(nèi)容不僅僅限于前端的WebSocket導(dǎo)致的問(wèn)題，而是結(jié)合一整套長(zhǎng)連接方案可能遇到的問(wèn)題來(lái)進(jìn)行說(shuō)明。其主要內(nèi)容為：

WebSocket建立連接共性問(wèn)題

WebSocket維護(hù)連接共性問(wèn)題

通過(guò)這篇博客，讀者能夠了解在WebSocket線上生產(chǎn)環(huán)境遇到的常見(jiàn)連接問(wèn)題以及對(duì)應(yīng)的解決方案，從而在自己遇到相關(guān)問(wèn)題時(shí)可以快速解決。
本文不涉及任何前端WebSocket使用方法或教程，只是作為相關(guān)經(jīng)驗(yàn)的總結(jié)博客。如果讀者對(duì)WebSocket相關(guān)使用還沒(méi)有具體的認(rèn)識(shí)，可以閱讀前四篇博客。

WebSocket系列之基礎(chǔ)知識(shí)入門篇

WebSocket系列之JavaScript中數(shù)字?jǐn)?shù)據(jù)如何轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)

WebSocket系列之字符串如何與二進(jìn)制數(shù)據(jù)進(jìn)行轉(zhuǎn)換

WebSocket系列之二進(jìn)制數(shù)據(jù)設(shè)計(jì)與傳輸

建立連接共性問(wèn)題 如何使用加密的WebSocket（WSS）

如果我們需要使用加密的WebSocket時(shí)，我們需要配置證書，以下幾點(diǎn)需要注意:

WebSocket地址不能使用IP，必須使用域名。因?yàn)樽C書是針對(duì)域名來(lái)進(jìn)行配置的。

證書必須符合新Chrome規(guī)范，否則會(huì)出現(xiàn)NET::ERR_CERT_COMMON_NAME_INVALID錯(cuò)誤，具體詳情見(jiàn)Chrome幫助。如果重新簽署后海是出現(xiàn)此問(wèn)題，需要按下證書中的DNS地址是否包含使用的域名。

如果是開發(fā)環(huán)境的自簽證書，需要配置到本地證書庫(kù)中，否則會(huì)出現(xiàn)NET::ERR_CERT_AUTHORITY_INVALID錯(cuò)誤。

不支持WebSocket的環(huán)境下如何降級(jí)

部分IE或者低版本Android手機(jī)的瀏覽器環(huán)境不支持WebSocket，同時(shí)Firefox38-41的部分版本W(wǎng)ebSocket也不支持傳輸ArrayBuffer數(shù)據(jù)。因此，在出現(xiàn)不支持WebSocket或者WebSocket連接失敗的情況時(shí)，我們需要制定相關(guān)的降級(jí)策略：

根據(jù)瀏覽器進(jìn)行判斷，如果是不支持WebSocket的瀏覽器或者低版本Android的WebView，直接切換到長(zhǎng)輪詢方案。

如果WebSocket連接失敗（初始化后立即觸發(fā)了close事件），則立即降級(jí)到長(zhǎng)輪詢方案。

維持連接共性問(wèn)題 如何維持長(zhǎng)連接不斷開

當(dāng)前瀏覽器對(duì)WebSocket建立的長(zhǎng)連接都有節(jié)能策略，即持續(xù)一段時(shí)間內(nèi)沒(méi)有數(shù)據(jù)傳輸時(shí)，瀏覽器會(huì)主動(dòng)斷開長(zhǎng)連接，根據(jù)當(dāng)前測(cè)試的數(shù)據(jù)（僅供參考）來(lái)看，Chrome瀏覽器的主動(dòng)斷開時(shí)間為300秒左右，而Firefox在120秒左右。

因此，我們?nèi)绻枰S持長(zhǎng)連接長(zhǎng)時(shí)間不斷開，需要設(shè)計(jì)特定的心跳來(lái)維持這條WebSocket連接。在一個(gè)特定的時(shí)間間隔中，客戶端向后端發(fā)送一條數(shù)據(jù)，同時(shí)后端也回復(fù)相關(guān)的數(shù)據(jù)（后端回復(fù)是用來(lái)檢測(cè)網(wǎng)絡(luò)和后端是否正常工作）。

我目前使用的心跳間隔為45秒，即間隔45秒就像后端發(fā)送一個(gè)心跳包。當(dāng)然，這個(gè)時(shí)間和相關(guān)的后端服務(wù)設(shè)置以及應(yīng)用場(chǎng)景相關(guān)。

與此同時(shí)，后端服務(wù)的Nginx中也有相關(guān)的長(zhǎng)連接維持時(shí)長(zhǎng)設(shè)置。如果你遇到前端建立的WebSocket連接在間隔比較短的時(shí)間就被后端主動(dòng)斷開（即觸發(fā)close事件），而前端沒(méi)有觸發(fā)任何關(guān)閉操作，可以檢查下后端相關(guān)的時(shí)間配置項(xiàng)。在生產(chǎn)環(huán)境中，我遇到過(guò)由于Nginx的配置參數(shù)proxy_read_timeout時(shí)間設(shè)置小于心跳間隔導(dǎo)致的后端主動(dòng)斷開連接。

如何處理斷網(wǎng)或者后端異常情況

在瀏覽器網(wǎng)絡(luò)斷開的情況下，WebSocket是不會(huì)收到任何的事件的。由于WebSocket在斷網(wǎng)時(shí)的表現(xiàn)和在線時(shí)無(wú)消息收發(fā)的狀態(tài)無(wú)法區(qū)分，我們需要用其他的方法來(lái)進(jìn)行判斷和區(qū)分。具體的方法有如下幾種：

使用心跳包。我們?cè)诎l(fā)送心跳包后，會(huì)收到相關(guān)的返回?cái)?shù)據(jù)。如果我們無(wú)法收到此數(shù)據(jù)，就認(rèn)為目前網(wǎng)絡(luò)或者后端異常。

offline事件。瀏覽器會(huì)在斷網(wǎng)后給頁(yè)面發(fā)送一個(gè)offline事件（不準(zhǔn)確，可以作為參考），我們可以根據(jù)此事件來(lái)斷開長(zhǎng)連接，對(duì)用戶進(jìn)行相關(guān)提示。

如何快速的恢復(fù)連接

根據(jù)上面的操作方案，我們會(huì)在網(wǎng)絡(luò)異常時(shí)斷開連接。但是，當(dāng)網(wǎng)絡(luò)恢復(fù)時(shí)，我們需要快速的恢復(fù)長(zhǎng)連接。我們可以根據(jù)以下幾個(gè)方案，來(lái)恢復(fù)我們的WebSocket連接。

遞增重試的時(shí)長(zhǎng)。當(dāng)我們短卡網(wǎng)絡(luò)時(shí)，我們立即設(shè)置一個(gè)遞增的時(shí)長(zhǎng)（如[1,2,3,5,10,20]秒）來(lái)嘗試恢復(fù)長(zhǎng)連接。

online事件重置重試的時(shí)長(zhǎng)。在瀏覽器網(wǎng)絡(luò)恢復(fù)時(shí)，會(huì)發(fā)送一個(gè)online事件（同樣不準(zhǔn)確）。在監(jiān)聽(tīng)到online事件時(shí)，我們只需要重置這個(gè)時(shí)長(zhǎng)，立即嘗試恢復(fù)即可（因?yàn)?b>online事件觸發(fā)時(shí)，網(wǎng)絡(luò)仍然有可能處于抖動(dòng)狀態(tài)）。

檢測(cè)休眠重置重試的時(shí)長(zhǎng)。當(dāng)瀏覽器休眠時(shí)，JavaScript不會(huì)執(zhí)行。當(dāng)電腦被喚醒時(shí)，如果online事件沒(méi)有觸發(fā)，那么重試的時(shí)長(zhǎng)有可能由于多次嘗試變成一個(gè)較大的值。因此我們?cè)跈z測(cè)到休眠被喚醒后，需要立即重置重試的時(shí)長(zhǎng)。具體方法為：設(shè)置一個(gè)setInterval，每次判斷上次執(zhí)行與本次執(zhí)行時(shí)長(zhǎng)間隔。因?yàn)樾菝邥r(shí)JavaScript不會(huì)執(zhí)行，因此，如果間隔時(shí)長(zhǎng)較大（超過(guò)設(shè)置閾值），我們就認(rèn)為電腦休眠被喚醒了。

總結(jié)

本文通過(guò)總結(jié)我在線上生產(chǎn)環(huán)節(jié)中遇到的WebSocket相關(guān)的連接問(wèn)題，給大家提供一些經(jīng)驗(yàn)的總結(jié)合參考。

如果大家遇到相關(guān)的問(wèn)題或者難題，可以根據(jù)上面方案進(jìn)行嘗試，同時(shí)也歡迎留言或者私信進(jìn)行探討。