在WebSocket出現之前，壹般通過兩種方式來實現Web實時用：輪詢機制和流技術；其中輪詢有不同的輪詢，還有壹種叫Comet的長輪詢。
輪詢：這是最早的壹種實現實時 Web 應用的方案。客戶端以壹定的時間間隔向服務端發出請求，以頻繁請求的方式來保持客戶端和服務器端的同步。這種同步方案的缺點是，當客戶端以固定頻率向服務 器發起請求的時候，服務器端的數據可能並沒有更新，這樣會帶來很多無謂的網絡傳輸，所以這是壹種非常低效的實時方案。
長輪詢：是對定時輪詢的改進和提高，目地是為了降低無效的網絡傳輸。當服務器端沒有數據更新的時候，連接會保持壹段時間周期直到數據或狀態改變或者 時間過期，通過這種機制來減少無效的客戶端和服務器間的交互。當然，如果服務端的數據變更非常頻繁的話，這種機制和定時輪詢比較起來沒有本質上的性能的提 高。
流：常就是在客戶端的頁面使用壹個隱藏的窗口向服務端發出壹個長連接的請求。服務器端接到這個請求後作出回應並不斷更新連接狀態以保證客戶端和服務 器端的連接不過期。通過這種機制可以將服務器端的信息源源不斷地推向客戶端。這種機制在用戶體驗上有壹點問題，需要針對不同的瀏覽器設計不同的方案來改進 用戶體驗，同時這種機制在並發比較大的情況下，對服務器端的資源是壹個極大的考驗。
上述方式其實並不是真正的實時技術，只是使用了壹種技巧來實現的模擬實時。在每次客戶端和服務器端交互的時候都是壹次 HTTP 的請求和應答的過程，而每壹次的 HTTP 請求和應答都帶有完整的 HTTP 頭信息，這就增加了每次傳輸的數據量。但這些方式最痛苦的是開發人員，因為不論客戶端還是服務器端的實現都很復雜，為了模擬比較真實的實時效果，開發人員 往往需要構造兩個HTTP連接來模擬客戶端和服務器之間的雙向通訊，壹個連接用來處理客戶端到服務器端的數據傳輸，壹個連接用來處理服務器端到客戶端的數 據傳輸，這不可避免地增加了編程實現的復雜度，也增加了服務器端的負載，制約了應用系統的擴展性。
基於上述弊端，實現Web實時應用的技術出現了，WebSocket通過瀏覽器提供的API真正實現了具備像C/S架構下的桌面系統的實時通訊能 力。其原理是使用JavaScript調用瀏覽器的API發出壹個WebSocket請求至服務器，經過壹次握手，和服務器建立了TCP通訊，因為它本質 上是壹個TCP連接，所以數據傳輸的穩定性強和數據傳輸量比較小。
WebSocket 協議
WebSocket 協議本質上是壹個基於 TCP 的協議。為了建立壹個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起壹個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了壹些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是壹個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或者服務器端的某壹方主動的關閉連接。
下面我們來詳細介紹壹下 WebSocket 協議，由於這個協議目前還是處於草案階段，版本的變化比較快，我們選擇目前最新的 draft-ietf-hybi-thewebsocketprotocol-17 版本來描述 WebSocket 協議。因為這個版本目前在壹些主流的瀏覽器上比如 Chrome,、FireFox、Opera 上都得到比較好的支持。通過描述可以看到握手協議
客戶端發到服務器的內容:
代碼如下 復制代碼
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin:
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
從服務器到客戶端的內容:
代碼如下 復制代碼
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
這些請求和通常的 HTTP 請求很相似，但是其中有些內容是和 WebSocket 協議密切相關的。我們需要簡單介紹壹下這些請求和應答信息，”Upgrade:WebSocket”表示這是壹個特殊的 HTTP 請求，請求的目的就是要將客戶端和服務器端的通訊協議從 HTTP 協議升級到 WebSocket 協議。其中客戶端的Sec-WebSocket-Key和服務器端的Sec-WebSocket-Accept就是重要的握手認證信息了，這些內容將在服 務器端實現的博文中講解。
相信通過上文的講解妳應該對WebSocket有了個初步認識了，如果有任何疑問歡迎交流。
客戶端
如概念篇中介紹的握手協議，客戶端是由瀏覽器提供了API，所以只要使用JavaScript來簡單調用即可，而服務器端是要自己實現的，服務器端將在下個博文來講。
代碼如下 復制代碼
WebSocket JavaScript 接口定義:
[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
// networking
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;
簡單了解下接口方法和屬性：
readyState表示連接有四種狀態：
CONNECTING (0)：表示還沒建立連接；
OPEN (1)： 已經建立連接，可以進行通訊；
CLOSING (2)：通過關閉握手，正在關閉連接；
CLOSED (3)：連接已經關閉或無法打開；
url是代表 WebSocket 服務器的網絡地址，協議通常是”ws”或“wss(加密通信)”,send 方法就是發送數據到服務器端；
close 方法就是關閉連接；
onopen連接建立，即握手成功觸發的事件；
onmessage收到服務器消息時觸發的事件；
onerror異常觸發的事件；
onclose關閉連接觸發的事件；
JavaScript調用瀏覽器接口實例如下：
代碼如下 復制代碼
var wsServer = 'ws://localhost:8888/Demo'; //服務器地址
var websocket = new WebSocket(wsServer); //創建WebSocket對象
websocket.send("hello");//向服務器發送消息
alert(websocket.readyState);//查看websocket當前狀態
websocket.onopen = function (evt) {
//已經建立連接
};
websocket.onclose = function (evt) {
//已經關閉連接
};
websocket.onmessage = function (evt) {
//收到服務器消息，使用evt.data提取
};
websocket.onerror = function (evt) {
//產生異常
};