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