資訊專欄INFORMATION COLUMN
摘要：與此同時，后端服務(wù)的中也有相關(guān)的長連接維持時長設(shè)置。如何快速的恢復(fù)連接根據(jù)上面的操作方案，我們會在網(wǎng)絡(luò)異常時斷開連接。
概述
通過前四篇博客，相信讀者對于WebSocket的使用和數(shù)據(jù)（不論是ArrayBuffer還是String）傳輸都有了一個深刻的了解。現(xiàn)在我們來介紹下，我在使用WebSocket時，連接相關(guān)模塊遇到的一些共性問題，以及我們?nèi)绾谓鉀Q這些問題。
本文作為WebSocket系列的第五篇文章，它的內(nèi)容不僅僅限于前端的WebSocket導(dǎo)致的問題，而是結(jié)合一整套長連接方案可能遇到的問題來進行說明。其主要內(nèi)容為：
WebSocket建立連接共性問題
WebSocket維護連接共性問題
通過這篇博客，讀者能夠了解在WebSocket線上生產(chǎn)環(huán)境遇到的常見連接問題以及對應(yīng)的解決方案，從而在自己遇到相關(guān)問題時可以快速解決。
本文不涉及任何前端WebSocket使用方法或教程，只是作為相關(guān)經(jīng)驗的總結(jié)博客。如果讀者對WebSocket相關(guān)使用還沒有具體的認識，可以閱讀前四篇博客。
WebSocket系列之基礎(chǔ)知識入門篇
WebSocket系列之JavaScript中數(shù)字數(shù)據(jù)如何轉(zhuǎn)換為二進制數(shù)據(jù)
WebSocket系列之字符串如何與二進制數(shù)據(jù)進行轉(zhuǎn)換
WebSocket系列之二進制數(shù)據(jù)設(shè)計與傳輸
建立連接共性問題 如何使用加密的WebSocket（WSS）如果我們需要使用加密的WebSocket時，我們需要配置證書，以下幾點需要注意:
WebSocket地址不能使用IP，必須使用域名。因為證書是針對域名來進行配置的。
證書必須符合新Chrome規(guī)范，否則會出現(xiàn)NET::ERR_CERT_COMMON_NAME_INVALID錯誤，具體詳情見Chrome幫助。如果重新簽署后海是出現(xiàn)此問題，需要按下證書中的DNS地址是否包含使用的域名。
如果是開發(fā)環(huán)境的自簽證書，需要配置到本地證書庫中，否則會出現(xiàn)NET::ERR_CERT_AUTHORITY_INVALID錯誤。
不支持WebSocket的環(huán)境下如何降級部分IE或者低版本Android手機的瀏覽器環(huán)境不支持WebSocket，同時Firefox38-41的部分版本W(wǎng)ebSocket也不支持傳輸ArrayBuffer數(shù)據(jù)。因此，在出現(xiàn)不支持WebSocket或者WebSocket連接失敗的情況時，我們需要制定相關(guān)的降級策略：
根據(jù)瀏覽器進行判斷，如果是不支持WebSocket的瀏覽器或者低版本Android的WebView，直接切換到長輪詢方案。
如果WebSocket連接失?。ǔ跏蓟罅⒓从|發(fā)了close事件），則立即降級到長輪詢方案。
維持連接共性問題 如何維持長連接不斷開當前瀏覽器對WebSocket建立的長連接都有節(jié)能策略，即持續(xù)一段時間內(nèi)沒有數(shù)據(jù)傳輸時，瀏覽器會主動斷開長連接，根據(jù)當前測試的數(shù)據(jù)（僅供參考）來看，Chrome瀏覽器的主動斷開時間為300秒左右，而Firefox在120秒左右。
因此，我們?nèi)绻枰S持長連接長時間不斷開，需要設(shè)計特定的心跳來維持這條WebSocket連接。在一個特定的時間間隔中，客戶端向后端發(fā)送一條數(shù)據(jù)，同時后端也回復(fù)相關(guān)的數(shù)據(jù)（后端回復(fù)是用來檢測網(wǎng)絡(luò)和后端是否正常工作）。
我目前使用的心跳間隔為45秒，即間隔45秒就像后端發(fā)送一個心跳包。當然，這個時間和相關(guān)的后端服務(wù)設(shè)置以及應(yīng)用場景相關(guān)。
與此同時，后端服務(wù)的Nginx中也有相關(guān)的長連接維持時長設(shè)置。如果你遇到前端建立的WebSocket連接在間隔比較短的時間就被后端主動斷開（即觸發(fā)close事件），而前端沒有觸發(fā)任何關(guān)閉操作，可以檢查下后端相關(guān)的時間配置項。在生產(chǎn)環(huán)境中，我遇到過由于Nginx的配置參數(shù)proxy_read_timeout時間設(shè)置小于心跳間隔導(dǎo)致的后端主動斷開連接。
如何處理斷網(wǎng)或者后端異常情況在瀏覽器網(wǎng)絡(luò)斷開的情況下，WebSocket是不會收到任何的事件的。由于WebSocket在斷網(wǎng)時的表現(xiàn)和在線時無消息收發(fā)的狀態(tài)無法區(qū)分，我們需要用其他的方法來進行判斷和區(qū)分。具體的方法有如下幾種：
使用心跳包。我們在發(fā)送心跳包后，會收到相關(guān)的返回數(shù)據(jù)。如果我們無法收到此數(shù)據(jù)，就認為目前網(wǎng)絡(luò)或者后端異常。
offline事件。瀏覽器會在斷網(wǎng)后給頁面發(fā)送一個offline事件（不準確，可以作為參考），我們可以根據(jù)此事件來斷開長連接，對用戶進行相關(guān)提示。
如何快速的恢復(fù)連接根據(jù)上面的操作方案，我們會在網(wǎng)絡(luò)異常時斷開連接。但是，當網(wǎng)絡(luò)恢復(fù)時，我們需要快速的恢復(fù)長連接。我們可以根據(jù)以下幾個方案，來恢復(fù)我們的WebSocket連接。
遞增重試的時長。當我們短卡網(wǎng)絡(luò)時，我們立即設(shè)置一個遞增的時長（如[1,2,3,5,10,20]秒）來嘗試恢復(fù)長連接。
online事件重置重試的時長。在瀏覽器網(wǎng)絡(luò)恢復(fù)時，會發(fā)送一個online事件（同樣不準確）。在監(jiān)聽到online事件時，我們只需要重置這個時長，立即嘗試恢復(fù)即可（因為online事件觸發(fā)時，網(wǎng)絡(luò)仍然有可能處于抖動狀態(tài)）。
檢測休眠重置重試的時長。當瀏覽器休眠時，JavaScript不會執(zhí)行。當電腦被喚醒時，如果online事件沒有觸發(fā)，那么重試的時長有可能由于多次嘗試變成一個較大的值。因此我們在檢測到休眠被喚醒后，需要立即重置重試的時長。具體方法為：設(shè)置一個setInterval，每次判斷上次執(zhí)行與本次執(zhí)行時長間隔。因為休眠時JavaScript不會執(zhí)行，因此，如果間隔時長較大（超過設(shè)置閾值），我們就認為電腦休眠被喚醒了。
總結(jié)本文通過總結(jié)我在線上生產(chǎn)環(huán)節(jié)中遇到的WebSocket相關(guān)的連接問題，給大家提供一些經(jīng)驗的總結(jié)合參考。
如果大家遇到相關(guān)的問題或者難題，可以根據(jù)上面方案進行嘗試，同時也歡迎留言或者私信進行探討。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94002.html
摘要：概述本文是系列的第一篇，主要介紹相關(guān)的基礎(chǔ)協(xié)議知識和?？蛻舳耸盏巾憫?yīng)后，立即發(fā)起下一次的請求。收到消息通過事件來接收消息。類型則需要傳遞一個對象作為參數(shù)，相關(guān)的內(nèi)容也將在本系列第二篇中進行介紹。 概述 本文是WebSocket系列的第一篇，主要介紹WebSocket相關(guān)的基礎(chǔ)協(xié)議知識和API。由于WebSocket的相關(guān)介紹在MDN中分布較亂，初學(xué)者不太容易入門，因此通過本文將相關(guān)基礎(chǔ)...
摘要：幀協(xié)議讓我們深入了解下幀協(xié)議。目前可用的值該幀接續(xù)前面一幀的有效載荷。該幀包含二進制數(shù)據(jù)。幀有以下幾類長度表示有效載荷的長度。數(shù)據(jù)分片有效載荷數(shù)據(jù)可以被分成多個獨立的幀。接收端會緩沖這些幀直到位有值。 原文請查閱這里，略有改動，本文采用知識共享署名 3.0 中國大陸許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原...
摘要：本文作為系列的第四篇內(nèi)容，將會用一個簡單的聊天應(yīng)用把整個傳輸二進制數(shù)據(jù)類型的內(nèi)容連接起來，讓用戶對整個傳輸二進制數(shù)據(jù)的方法有個了解。如何發(fā)送二進制數(shù)據(jù)通過如何設(shè)計一個二進制協(xié)議一章，我們知道了如何定義傳輸?shù)亩M制數(shù)據(jù)格式。 概述 通過前三篇博客，我們能夠了解在通過WebSocket發(fā)送數(shù)據(jù)之前，我們需要傳遞的數(shù)據(jù)是如何變成ArrayBuffer二進制數(shù)據(jù)的；在我們收到二進制數(shù)據(jù)之后，我...
摘要：面試網(wǎng)絡(luò)了解及網(wǎng)絡(luò)基礎(chǔ)對端傳輸詳解與攻防實戰(zhàn)本文從屬于筆者的信息安全實戰(zhàn)中滲透測試實戰(zhàn)系列文章。建議先閱讀下的網(wǎng)絡(luò)安全基礎(chǔ)。然而，該攻擊方式并不為大家所熟知，很多網(wǎng)站都有的安全漏洞。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門檻越來越高，很多開發(fā)者對于網(wǎng)絡(luò)知識這塊了解的不是很多，遇到這些面試題會手足無措。本篇文章知識主要集中在 HTTP 這塊。文中知識來自 《圖解 HTTP》與維基百科，若...
摘要：最后，消息成功抵達并顯示在頁面上。在中，所有的數(shù)據(jù)都使用數(shù)據(jù)報傳輸層安全性。如果應(yīng)用知識簡單的一對一文件傳輸，使用不可靠的數(shù)據(jù)通道將需要設(shè)計一定的響應(yīng)重傳協(xié)議。目前建議的最大塊大小為。 本文翻譯自WebRTC data channels 在兩個瀏覽器中，為聊天、游戲、或是文件傳輸?shù)刃枨蟀l(fā)送信息是十分復(fù)雜的。通常情況下，我們需要建立一臺服務(wù)器來轉(zhuǎn)發(fā)數(shù)據(jù)，當然規(guī)模比較大的情況下，會擴展成...
閱讀 609·2023-04-26 01:39
閱讀 4730·2021-11-16 11:45
閱讀 2688·2021-09-27 13:37
閱讀 967·2021-09-01 10:50
閱讀 3711·2021-08-16 10:50
閱讀 2287·2019-08-30 15:55
閱讀 3069·2019-08-30 15:55
閱讀 2323·2019-08-30 14:07
