一．WebSocket協(xié)議簡(jiǎn)介

1. 　　WebSocket是html5規(guī)范新引入的功能，用于解決瀏覽器與后臺(tái)服務(wù)器雙向通訊的問(wèn)題，使用WebSocket技術(shù)，后臺(tái)可以隨時(shí)向前端推送消息，以保證前后臺(tái)狀態(tài)統(tǒng)一，在傳統(tǒng)的無(wú)狀態(tài)HTTP協(xié)議中，這是“無(wú)法做到”的。

　　2. 在WebSocket出現(xiàn)之前，傳統(tǒng)的服務(wù)端向?yàn)g覽器推送消息的技術(shù)包括：ajax、flash、comet、java applet等。無(wú)一例外，這些技術(shù)使用的都是長(zhǎng)輪循，即每隔一段時(shí)間去請(qǐng)求后臺(tái)，以獲取最新?tīng)顟B(tài)。長(zhǎng)輪詢方式容易實(shí)現(xiàn)，但效果也差，頻繁盲目的調(diào)用后臺(tái)，帶來(lái)不必要的開(kāi)銷，且實(shí)時(shí)性無(wú)法保障，后臺(tái)出現(xiàn)更新，前端需要在下一次輪詢時(shí)才知道。

　　3. WebSocket協(xié)議支持服務(wù)端與瀏覽器建立長(zhǎng)連接，雙方可以隨時(shí)發(fā)送數(shù)據(jù)給對(duì)方，不再是由客戶端控制的一問(wèn)一答的方式。在實(shí)現(xiàn)推送功能的時(shí)候，主要是由服務(wù)端給客戶端發(fā)送數(shù)據(jù)。

　　4.以前的網(wǎng)站為了實(shí)現(xiàn)推送功能，使用的方法都是輪詢。所謂的輪詢就是在特定的時(shí)間間隔（例如1秒），由瀏覽器向服務(wù)器發(fā)出一個(gè) Http request ，然后服務(wù)器返回最新的數(shù)據(jù)給客戶端瀏覽器，從而給出一種服務(wù)端實(shí)時(shí)推送的假象。由于 Http Request 的 Header（請(qǐng)求頭）很長(zhǎng),而傳輸?shù)臄?shù)據(jù)可能很短就只占一點(diǎn)點(diǎn)，每次請(qǐng)求消耗的帶寬大部分都消耗在 Header 上。從網(wǎng)上資料得知后來(lái)還有改進(jìn)的輪詢方法叫做 Comet ，使用 Ajax 。但這種技術(shù)雖然可達(dá)到雙向通信。

二．WebSocket原理

　　基于長(zhǎng)輪循(polling)和websocket推送的瀏覽器(browser)和服務(wù)端(Server)的交互對(duì)比圖如下所示：

　　由于WebSocket協(xié)議建立在http協(xié)議的基礎(chǔ)之上，因此二者有很多的類似之處。事實(shí)上，在使用websocket協(xié)議時(shí)，瀏覽器與服務(wù)端最開(kāi)始建立的還是http連接，之后再將協(xié)議從http轉(zhuǎn)換成websocket，協(xié)議轉(zhuǎn)換的過(guò)程稱之為握手(handshake)，表示服務(wù)端與客戶端都同意建立websocket協(xié)議。需要注意的是，由于websocket是新的協(xié)議，需要瀏覽器和web服務(wù)端都支持的情況下，才能建立連接成功。正常情況下，連接在建立的時(shí)候，瀏覽器向服務(wù)端發(fā)送一個(gè)HTTP請(qǐng)求，通過(guò)包含一些額外信息，表明其希望將協(xié)議從HTTP轉(zhuǎn)換成WebSocket。這個(gè)額外信息實(shí)際上就是增加了一個(gè)請(qǐng)求頭Update，如下所示：

熟悉 HTTP 的童鞋可能發(fā)現(xiàn)了，這段類似 HTTP 協(xié)議的握手請(qǐng)求中，多了這么幾個(gè)東西。

這個(gè)就是 WebSocket 的核心了，告訴 Apache 、 Nginx 等服務(wù)器：注意啦，我發(fā)起的請(qǐng)求要用 WebSocket 協(xié)議，快點(diǎn)幫我找到對(duì)應(yīng)的助理處理~而不是那個(gè)老土的 HTTP。

首先， Sec-WebSocket-Key 是一個(gè) Base64 encode 的值，這個(gè)是瀏覽器隨機(jī)生成的，告訴服務(wù)器：泥煤，不要忽悠我，我要驗(yàn)證你是不是真的是 WebSocket 助理。

然后， Sec_WebSocket-Protocol 是一個(gè)用戶定義的字符串，用來(lái)區(qū)分同 URL 下，不同的服務(wù)所需要的協(xié)議。簡(jiǎn)單理解：今晚我要服務(wù)A，別搞錯(cuò)啦~

最后， Sec-WebSocket-Version 是告訴服務(wù)器所使用的 WebSocket Draft （協(xié)議版本），在最初的時(shí)候，WebSocket 協(xié)議還在 Draft 階段，各種奇奇怪怪的協(xié)議都有，而且還有很多期奇奇怪怪不同的東西，什么 Firefox 和 Chrome 用的不是一個(gè)版本之類的，當(dāng)初 WebSocket 協(xié)議太多可是一個(gè)大難題。不過(guò)現(xiàn)在還好，已經(jīng)定下來(lái)啦~大家都使用同一個(gè)版本： 服務(wù)員，我要的是13歲的噢→_→

然后服務(wù)器會(huì)返回下列東西，表示已經(jīng)接受到請(qǐng)求， 成功建立 WebSocket 啦！

可以在以下網(wǎng)址看到目前支持webscoket協(xié)議的主流瀏覽器和版本：

　　支持html5的瀏覽器，一般都會(huì)提供一個(gè)內(nèi)置的js對(duì)象Websocket ，開(kāi)發(fā)者利用這個(gè)對(duì)象就可以與服務(wù)端建立websocket連接。特別的在FireFox中，這個(gè)對(duì)象為在Firefox中為MozWebSocket。

　　可以通過(guò)以下js代碼檢測(cè)一個(gè)瀏覽器是否支持websocket

　　Websocket對(duì)象還提供了幾個(gè)回調(diào)方法

　　//連接創(chuàng)建成功時(shí)被回調(diào)

　　myWebSocket.onopen = function(evt) { alert("Connection open ..."); };

　　//收到服務(wù)端的消息時(shí)被回調(diào)

　　myWebSocket.onmessage = function(evt) { alert( "Received Message: " + evt.data); };

　　//連接關(guān)閉時(shí)被回調(diào)

　　myWebSocket.onclose = function(evt) { alert("Connection closed."); };