vue2.0開發聊天程序(五) 客戶端的webScoket

願天下全部的情侶，都是失散多年的兄妹
　　　　　　　　　　　　　　　　　　——好妹妹
webScoket是html5提出的一個協議，我們用的http是無狀態的，且只能由客戶端向服務端發起，而且服務端返回結果以後就宣告這次鏈接結束。爲了解決這種問題，出現了輪詢(polling)和comet技術。
輪詢：
客戶端設置一個間隔時間不斷的去向服務端發起請求，頻繁的查詢數據有沒有改動，這樣增長了請求次數，浪費流量和服務器資源。
comet：
又能夠分爲長輪詢和流技術，長輪詢就是指爲須要更新的數據設置一個過時時間，過時了纔去發起請求，這樣就不會很頻繁的去發起求情，但服務器仍然是被動的。流技術就是指客戶端使用一個隱藏的窗口(iframe)與服務器創建一個http長鏈接，服務器會不斷的更新狀態，保持鏈接的存活，這樣作的弊端是在高併發的狀況下比較考驗服務器的性能。

而webScoket很不同，基於TCP協議，與http協議兼容、卻不會融入http協議，僅僅做爲html5的一部分。與http協議不一樣的請求/響應模式不一樣，Websocket在創建鏈接以前有一個Handshake（Opening Handshake）【握手】過程，在關閉鏈接前也有一個Handshake（Closing Handshake）過程，
創建鏈接以後，雙方便可雙向通訊。

以上參考自不少博客，這裏就不一一貼出了。

webScoket的使用方法
在客戶端使用webScoket是很是簡單的一件事情。
先看看兼容性：

建立鏈接

var ws = new WebSocket('ws://localhost:3333');

構造函數接收兩個參數：
url： 這裏的url不能是http://或者https:// 而是對應的ws://或者wss:// ws和wss是webScoket定義的兩種url方案，ws相似於http wss相似於https
protocols：協議名稱，是可選的。服務端和客戶端的協議名稱必須一致。協議有三種:註冊協議，開放協議，自定義協議。

webScoket的屬性
webScoket就仨屬性：

1. readyState
   表明鏈接的狀態有如下四種： 0 表示未鏈接 1 鏈接已經創建 2 鏈接即將關閉 3 鏈接關閉或不可用

2. bufferedAmount
   有時候須要檢查傳輸數據的大小，尤爲是客戶端傳輸大量數據的時候。雖然send()方法會立刻執行，但數據並非立刻傳輸。瀏覽器會緩存應用流出的數據，你可使用bufferedAmount屬性檢查已經進入隊列但還未被傳輸的數據大小。這個值不包含協議框架、操做系統緩存和網絡軟件的開銷。

var THRESHOLD = 10240; //限制10k之內
if (ws.bufferedAmount < THRESHOLD) {
        ws.send('heheheheeheh');
    }

3.protocol： 就是在構造函數中選傳的參數。

webScoket的事件
這裏的事件，指的是webScoket的狀態open、message、error、close。

1. open
   在握手完成是觸發，對應的回調函數是onopen，當打開後要作的操做在onopen中添加

ws.onopen = function () {
    console.log('鏈接成功');
}

1. message
   當消息被接收時就會觸發此事件，對應的回調是onmessage,webScoket消息機制只支持字符串和二進制(blob和ArrayBuffer)

ws.onmessage = function(res) { // res爲接收到的數據
    console.log(res)
}

1. error：
   若是發生意外的失敗會觸發error事件，相應的函數稱爲onerror,錯誤會致使鏈接關閉，同時觸發關閉事件。

ws.onerror = function(e) { // e爲錯誤信息
    console.log("WebSocket Error: " , e);
};

4.close
close：當鏈接關閉的時候觸發的時間，對用一個onclose方法。

ws.onclose = function(e) { // e爲關閉的緣由
    console.log("Connection closed", e);
};

webScoket的方法
就倆方法send和close。

send
用於向服務端發送一條消息，須要注意的是，此方法應該在onopen事件的回調中執行，由於鏈接打開以後才能進行數據的傳輸。只接收一個參數，就是你要傳輸的數據。

ws.send('你是狗吧？'); // 記得放在onopen方法裏面

close
關閉鏈接，若是鏈接已經關閉了 那就什麼都不會作。接收兩個參數code、reason

code： 狀態碼，若是不傳默認就是1000 表示正常關閉 狀態碼參考https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
reason： 關閉的緣由

ws.close(1000,'沒事關一下');

以上客戶端的webScoket就介紹完了。真正複雜的是服務端的webScoket，這個還在研究中。下一節再說。