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

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

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

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

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

創(chuàng)建連接

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

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

webScoket的屬性
webScoket就仨屬性：

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

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

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ā)，對(duì)應(yīng)的回調(diào)函數(shù)是onopen，當(dāng)打開后要做的操作在onopen中添加

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

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

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

error：
如果發(fā)生意外的失敗會(huì)觸發(fā)error事件，相應(yīng)的函數(shù)稱為onerror,錯(cuò)誤會(huì)導(dǎo)致連接關(guān)閉，同時(shí)觸發(fā)關(guān)閉事件。

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

4.close
close：當(dāng)連接關(guān)閉的時(shí)候觸發(fā)的時(shí)間，對(duì)用一個(gè)onclose方法。

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

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

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

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

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

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

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

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