WebSocket協(xié)議可以為網(wǎng)站和應(yīng)用提供真正的雙向通信，具有控制開銷、保持連接狀態(tài)、更強(qiáng)實(shí)時(shí)性、更好的壓縮效果等優(yōu)點(diǎn)，是當(dāng)下低延時(shí)應(yīng)用最常采用的一種技術(shù)協(xié)議。

1.使用websocket 場(chǎng)景

websocket作為用于雙向通信的實(shí)用協(xié)議，在筆者最近做的全平臺(tái)私信系統(tǒng)進(jìn)行了應(yīng)用。本次開發(fā)的私信系統(tǒng)與普遍理解的“發(fā)送-接受-發(fā)送”三個(gè)流程分開不一樣，實(shí)現(xiàn)的是類似于QQ與微信的實(shí)時(shí)通信系統(tǒng)，需要做到收發(fā)消息實(shí)時(shí)化。

進(jìn)行通信協(xié)議選定的時(shí)候，不能由服務(wù)器主動(dòng)聯(lián)系客戶端，又因?yàn)槊看瓮ㄐ哦夹枰?jīng)過(guò)握手請(qǐng)求、響應(yīng)步驟進(jìn)行連接重建的http協(xié)議只能通過(guò)輪詢進(jìn)行偽雙向通信，所以http協(xié)議首先被我們排除了，在HTML5下的協(xié)議websocket映入了我們的眼簾。

WebSocket能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊，它的優(yōu)勢(shì)：

?    較少的控制開銷。在連接創(chuàng)建后，服務(wù)器和客戶端之間交換數(shù)據(jù)時(shí)，用于協(xié)議控制的數(shù)據(jù)包頭部相對(duì)較小。
?    更強(qiáng)的實(shí)時(shí)性。由于協(xié)議是全雙工的，所以服務(wù)器可以隨時(shí)主動(dòng)給客戶端下發(fā)數(shù)據(jù)。相對(duì)于HTTP請(qǐng)求需要等待客戶端發(fā)起請(qǐng)求服務(wù)端才能響應(yīng)，延遲明顯更少；即使是和Comet等類似的長(zhǎng)輪詢比較，其也能在短時(shí)間內(nèi)更多次地傳遞數(shù)據(jù)。
?    保持連接狀態(tài)。與HTTP不同的是，Websocket需要先創(chuàng)建連接，這就使得其成為一種有狀態(tài)的協(xié)議，之后通信時(shí)可以省略部分狀態(tài)信息。而HTTP請(qǐng)求可能需要在每個(gè)請(qǐng)求都攜帶狀態(tài)信息（如身份認(rèn)證等）。
?    更好的二進(jìn)制支持。Websocket定義了二進(jìn)制幀，相對(duì)HTTP，可以更輕松地處理二進(jìn)制內(nèi)容。
?    可以支持?jǐn)U展。Websocket定義了擴(kuò)展，用戶可以擴(kuò)展協(xié)議、實(shí)現(xiàn)部分自定義的子協(xié)議。
?    更好的壓縮效果。相對(duì)于HTTP壓縮，Websocket在適當(dāng)?shù)臄U(kuò)展支持下，可以沿用之前內(nèi)容的上下文，在傳遞類似的數(shù)據(jù)時(shí)，可以顯著地提高壓縮率。

WebSocket主要用于解決以下幾個(gè)問(wèn)題：

一、    在線聊天速度慢，斷開連接較快，不能更好的保持業(yè)務(wù)通訊
二、    網(wǎng)頁(yè)通訊信息更安全，連接更穩(wěn)定
三、    提供更高效的網(wǎng)頁(yè)通訊
四、    網(wǎng)絡(luò)抖動(dòng)帶來(lái)的連接時(shí)斷時(shí)續(xù)問(wèn)題
五、    訪問(wèn)打不開網(wǎng)頁(yè)，需要刷新頁(yè)面
六、    同時(shí)在線人數(shù)多，如何實(shí)時(shí)推送所有用戶
七、    服務(wù)端支持WebSocket協(xié)議
八、    如何降低帶寬，保證成本

總之，如果你的應(yīng)用需要提供多個(gè)用戶相互交流，或者展示服務(wù)器端經(jīng)常變動(dòng)的數(shù)據(jù)，就十分需要使用WebSocket技術(shù)。

2.websocket 機(jī)制

首先要明確的一點(diǎn)是，支持websocket協(xié)議的客戶端和服務(wù)器能夠使用websocket協(xié)議進(jìn)行雙向通信，也就是客戶端可以隨時(shí)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器也能夠隨時(shí)向客戶端發(fā)送請(qǐng)求。

跟http使用輪詢實(shí)現(xiàn)不一樣的是websocket一次連接成功后則可以重復(fù)進(jìn)行請(qǐng)求和響應(yīng)，更好地節(jié)省了服務(wù)器的資源與帶寬。

websocket與http協(xié)議類似的是同樣建立于tcp傳輸協(xié)議之上，通過(guò)tcp傳輸層進(jìn)行數(shù)據(jù)傳輸。而客戶端與服務(wù)器端一般使用的通信協(xié)議仍是http，我們要使用websocket協(xié)議進(jìn)行通信則首先要建立起websocket連接，這個(gè)連接的建立依賴于http。

一個(gè)websocket連接首先發(fā)送http請(qǐng)求到服務(wù)器，注意比起平常的http請(qǐng)求多了4個(gè)字段，sec-WebSocket-* 為建立websocket協(xié)議的參數(shù)，upgrade字段才是重點(diǎn)，告訴服務(wù)器我這次的請(qǐng)求不是單純的http請(qǐng)求，而是要求服務(wù)器升級(jí)連接并建立起websocket長(zhǎng)連接。

服務(wù)器響應(yīng)也根據(jù)特殊的請(qǐng)求頭進(jìn)行了特殊響應(yīng)，首先101返回碼表明本次連接的通信協(xié)議經(jīng)過(guò)了轉(zhuǎn)換并成功握手成功建立起了通信。connection字段和upgrade字段則表明本次通信協(xié)議進(jìn)行了升級(jí)轉(zhuǎn)換，轉(zhuǎn)換的是websocket協(xié)議。

websocket的協(xié)議標(biāo)識(shí)符為ws，從下圖Request URL看到本次websocket連接的協(xié)議標(biāo)識(shí)符為wws，這表示websocket連接是經(jīng)過(guò)加密處理的。

建立了websocket連接后，只要客戶端和服務(wù)器端任意一端不主動(dòng)斷開連接前，通信行為都是在一個(gè)持久連接上發(fā)起，后續(xù)數(shù)據(jù)與請(qǐng)求都通過(guò)幀序列的形式進(jìn)行傳輸。

從chrome控制臺(tái)的Websocket調(diào)試面板中可以看到，在一個(gè)websocket連接中多次請(qǐng)求都可以由服務(wù)器進(jìn)行實(shí)時(shí)響應(yīng)，實(shí)行實(shí)時(shí)上下行通信的能力得以見證。

3.websocket API

通過(guò)WebSocket構(gòu)造函數(shù)可以創(chuàng)建websocket連接并返回提供管理該連接API的實(shí)例對(duì)象。

const ws = new WebSocket('wws://url');

websocket 屬性與事件

// 監(jiān)聽到open事件后，向服務(wù)器發(fā)送success文本。ws.addEventListener('open', (e) => {
    ws.send('success!');})

websocket 方法

(1) send 方法

// 文本數(shù)據(jù)const text = 'i am text';// 二進(jìn)制數(shù)據(jù)const blob = new Blob('i am blob');ws.send(text);ws.send(blob);

(2) close 方法

close方法可以傳入兩個(gè)參數(shù) code 和 reason ，用于向服務(wù)器端說(shuō)明關(guān)閉連接原因。

ws.close(1000, 'mission finished');// 不傳任何參數(shù)，默認(rèn)code是1000，表示正常關(guān)閉ws.close();

4. 小結(jié)

在需要實(shí)現(xiàn)雙向?qū)崟r(shí)通信的場(chǎng)景下，不妨直接使用websocket協(xié)議吧。但是目前IE8和IE9是不支持websocket的，要實(shí)現(xiàn)該功能還是只能通過(guò)http 的long polling 方式去實(shí)現(xiàn)。

以上是websocket的基礎(chǔ)理論，希望了解后有助于大家的實(shí)踐！