前面在Django中已經用到webSocket技術了，webSocket由服務端和客戶端組成。當客戶端（瀏覽器）與服務端（服務器）建立鏈接之後（持久性的），就可以在兩者之間進行雙向數據傳輸（客戶端可以發送消息到服務端，服務端也可將消息發送給客戶端）。WebSocket擴展了瀏覽器與服務端的通信功能，允許服務端主動向客戶端推送數據。利用WebSocket不僅可以節省服務器資源和帶寬，還能夠更實現實時通訊。隨着HTML5的普及現在大部分瀏覽器基本上都已經支持WebSocket了，特別是大數據時代的推動websocket更顯的尤為重要。

判斷瀏覽器是否支持WebSocket

雖然現在大部分瀏覽器基本上都已經支持WebSocket了，但還是有部分瀏覽器並不支持WebSocket功能。所以在使用之前我們還是要對瀏覽器進行檢測，看是否支持WebSocket。我們可以通過判斷window對象中是否包含WebSocket對象，但是在有些平台即使瀏覽器不支持 WebSocket也存在這個屬性，所以這裡我們再加個驗證看看是屬性中否存在send方法：
window.WebSocket.prototype.send，如果同時滿足那麼就說明我們的瀏覽器是支持WebSocket的。

初始化WebSocket

WebSocket 提供了用於創建和管理 WebSocket 連接以及可以通過該連接發送和接收數據的 API，我們可以通過WebSocket(url[, protocols]) 構造函數來構造一個WebSocket 。參數為url為WebSocket鏈接，protocols 為指定可接受子協議的可選參數，成果則返回一個 WebSocket 對象。WebSocket的鏈接是以ws或者wss開頭的，WSS（Web Socket Secure）是WebSocket的加密版。我們只要把websocket構建寫在一個方法中，然後把這個方法放掛載到mounted中調用（WebSocket長鏈接一般再頁面加載的時候就會自動調用，很少會再頁面中設置按鈕去手動調用，當然頁面關閉的時候即可銷毀鏈接）。

readyState屬性

WebSocket 提供了2個屬性分別是readyState和bufferedAmount，readyState中存儲了WebSocket 的鏈接狀態（4種狀態），分別通過0、1、2、3來表示連接尚未建立、連接已建立、鏈接正在關閉和鏈接已關閉。我們可以通過該屬性來判斷當前的WebSocket 是否已經建立了鏈接。

異常：readyState返回0

這裡遇到一個問題那就是服務端顯示連接成功，但是前端socket.readyState卻返回為0。打印了下返回結果，奇葩的發現返回結果中readyState值為0，可展開卻發現readyState值為1。第二天還彈出了警告提示：WebSocket connection to ‘
ws://localhost:1527/sockjs-node/694/xcl5ulim/websocket’ failed:WebSocket is closed before the connection is established，網上說是連接socket時需要通過IP獲取到對應主機的域名來進行連接，此過程會相當耗時前端有一個超時時間導致無法在規定時間內收到服務端消息而觸發超時操作。測試結果並不是因為我可以正常的接受到後台傳送過來的數據，所以個人覺得該值不可用！！！

實測效果

這裡我在redis客戶端直接寫入數據外面來觀察下Vue控制台是否接收到了數據，我在onmessage事件中將接收到的數據通過console.log打印在控制台。我們可以看到此時我們是完全可以及時的接受到數據庫中數據的更新的，但是在websocket對象中我們可以看到readyState的值一直是0。所以建議不要使用屬性readyState來判斷websocket的鏈接狀態，還不如直接用onerror事件監聽錯誤哦！

bufferedAmount

bufferedAmount 是用來記錄待發送的 UTF-8 文本位元組數，這個文本是被 send() 放入正在隊列中等待傳輸的文本。一旦隊列中的所有數據被發送至網絡，則該屬性值將被重置為0。但是在發送過程中連接被關閉，則該屬性值不會重置為0（一般情況下基本為0，除非遇到大量的數據請求需要列隊發送）。

webSocket事件

webSocket提供了幾個監聽事件，可以幫助我們快速地監聽到webSocket的特定事件發生。這幾個監聽事件分別是open（連接建立時觸發，可以在鏈接成功之後調用send方法來發送信息）、message（客戶端接收服務端數據時觸發，可以用來處理從後端接收到的數據）、error（通信發生錯誤時觸發，可以用來提示用戶鏈接錯誤）、close（連接關閉時觸發，可以在webSocket斷開時關閉webSocket），所以我們在初始化webSocket的時候最好將這幾個監聽事件也綁定相應的回調函數。當webSocket發生以上任意事件時就會去執行相應的方法，這時候我們只需要在相應的方法中指定處理邏輯即可。