WebSocket系列之如何創建和維護可靠的鏈接

概述

經過前四篇博客，相信讀者對於WebSocket的使用和數據（不管是ArrayBuffer仍是String）傳輸都有了一個深入的瞭解。如今咱們來介紹下，我在使用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相關的鏈接問題，給你們提供一些經驗的總結合參考。

若是你們遇到相關的問題或者難題，能夠根據上面方案進行嘗試，同時也歡迎留言或者私信進行探討。