摘要：先看看兼容性創(chuàng)建連接構(gòu)造函數(shù)接收兩個參數(shù)這里的不能是或者而是對應的或者和是定義的兩種方案，類似于類似于協(xié)議名稱，是可選的。服務端和客戶端的協(xié)議名稱必須一致。協(xié)議有三種注冊協(xié)議，開放協(xié)議，自定義協(xié)議。限制以內(nèi)就是在構(gòu)造函數(shù)中選傳的參數(shù)。

愿天下所有的情侶，都是失散多年的兄妹
　　　　　　　　　　　　　　　　　　——好妹妹
webScoket是html5提出的一個協(xié)議，咱們用的http是無狀態(tài)的，且只能由客戶端向服務端發(fā)起，并且服務端返回結(jié)果之后就宣告此次連接結(jié)束。為了解決這種問題，出現(xiàn)了輪詢(polling)和comet技術(shù)。
輪詢：
客戶端設置一個間隔時間不斷的去向服務端發(fā)起請求，頻繁的查詢數(shù)據(jù)有沒有改動，這樣增加了請求次數(shù)，浪費流量和服務器資源。
comet：
又可以分為長輪詢和流技術(shù)，長輪詢就是指為需要更新的數(shù)據(jù)設置一個過期時間，過期了才去發(fā)起請求，這樣就不會很頻繁的去發(fā)起求情，但服務器仍然是被動的。流技術(shù)就是指客戶端使用一個隱藏的窗口(iframe)與服務器建立一個http長連接，服務器會不斷的更新狀態(tài)，保持連接的存活，這樣做的弊端是在高并發(fā)的情況下比較考驗服務器的性能。

而webScoket很不一樣，基于TCP協(xié)議，與http協(xié)議兼容、卻不會融入http協(xié)議，僅僅作為html5的一部分。與http協(xié)議不同的請求/響應模式不同，Websocket在建立連接之前有一個Handshake（Opening Handshake）【握手】過程，在關(guān)閉連接前也有一個Handshake（Closing Handshake）過程，
建立連接之后，雙方即可雙向通信。

以上參考自很多博客，這里就不一一貼出了。

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

創(chuàng)建連接

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

構(gòu)造函數(shù)接收兩個參數(shù)：
url： 這里的url不能是http://或者https:// 而是對應的ws://或者wss:// ws和wss是webScoket定義的兩種url方案，ws類似于http wss類似于https
protocols：協(xié)議名稱，是可選的。服務端和客戶端的協(xié)議名稱必須一致。協(xié)議有三種:注冊協(xié)議，開放協(xié)議，自定義協(xié)議。

webScoket的屬性
webScoket就仨屬性：

readyState
代表連接的狀態(tài)有以下四種： 0 表示未連接 1 連接已經(jīng)建立 2 連接即將關(guān)閉 3 連接關(guān)閉或不可用

bufferedAmount
有時候需要檢查傳輸數(shù)據(jù)的大小，尤其是客戶端傳輸大量數(shù)據(jù)的時候。雖然send()方法會馬上執(zhí)行，但數(shù)據(jù)并不是馬上傳輸。瀏覽器會緩存應用流出的數(shù)據(jù)，你可以使用bufferedAmount屬性檢查已經(jīng)進入隊列但還未被傳輸?shù)臄?shù)據(jù)大小。這個值不包含協(xié)議框架、操作系統(tǒng)緩存和網(wǎng)絡軟件的開銷。

var THRESHOLD = 10240; //限制10k以內(nèi)
if (ws.bufferedAmount < THRESHOLD) {
        ws.send("heheheheeheh");
    }

3.protocol： 就是在構(gòu)造函數(shù)中選傳的參數(shù)。

webScoket的事件
這里的事件，指的是webScoket的狀態(tài)open、message、error、close。

open
在握手完成是觸發(fā)，對應的回調(diào)函數(shù)是onopen，當打開后要做的操作在onopen中添加

ws.onopen = function () {
    console.log("連接成功");
}

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

ws.onmessage = function(res) { // res為接收到的數(shù)據(jù)
    console.log(res)
}

error：
如果發(fā)生意外的失敗會觸發(fā)error事件，相應的函數(shù)稱為onerror,錯誤會導致連接關(guān)閉，同時觸發(fā)關(guān)閉事件。

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

4.close
close：當連接關(guān)閉的時候觸發(fā)的時間，對用一個onclose方法。

ws.onclose = function(e) { // e為關(guān)閉的原因
    console.log("Connection closed", e);
};
 

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

send
用于向服務端發(fā)送一條消息，需要注意的是，此方法應該在onopen事件的回調(diào)中執(zhí)行，因為連接打開之后才能進行數(shù)據(jù)的傳輸。只接收一個參數(shù)，就是你要傳輸?shù)臄?shù)據(jù)。

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

close
關(guān)閉連接，如果連接已經(jīng)關(guān)閉了 那就什么都不會做。接收兩個參數(shù)code、reason

code： 狀態(tài)碼，如果不傳默認就是1000 表示正常關(guān)閉 狀態(tài)碼參考https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
reason： 關(guān)閉的原因

ws.close(1000,"沒事關(guān)一下");

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