HTML5中定義了WebSocket規(guī)范，該規(guī)范使得能夠?qū)崿F(xiàn)在瀏覽器端和服務(wù)器端通過WebSocket協(xié)議進行雙向通信。

在Web應(yīng)用中一個常見的場景是Server端向Client端推送某些消息，要實現(xiàn)這項功能，按照傳統(tǒng)的思路可以有以下可選方案:

隨著Html5技術(shù)的普及，主流瀏覽器對HTML5標(biāo)準(zhǔn)的支持越來越好，利用瀏覽器原生支持WebSocket就可以輕松的實現(xiàn)上面的功能。只需要在瀏覽器端和服務(wù)器端建立一條WebSocket連接，就可以進行雙向同時傳遞數(shù)據(jù)。相比于傳統(tǒng)的方式，使用WebSocket的優(yōu)點顯而易見了：

那么在實際中如何建立WebSocket連接？在瀏覽器端和服務(wù)器端如何針對WebSocket編程？

就此問題，下文描述了建立WebSocket連接的過程，瀏覽器端WebSocket接口，并以Tomcat 7 為例在服務(wù)器端編寫WebSocket服務(wù)。

1. 建立WebSocket連接過程

關(guān)于WebSocket規(guī)范和協(xié)議參考 http://www.websocket.org/aboutwebsocket.html

設(shè)計WebSocket協(xié)議的一個重要原則就是能和現(xiàn)有的Web方式和諧共處，建立WebSocket連接是以HTTP請求響應(yīng)為基礎(chǔ)的，這個過程為 WebSocket握手 .

圖下所示為一個WebSocket建立連接的請求和響應(yīng)過程：

此處稍作解釋一下：

WebSocket連接建立在原來HTTP所使用的TCP/IP通道和端口之上 ，也就是說原來使用的是8080端口，現(xiàn)在還是使用8080端口，而不是使用新的TCP/IP連接。

數(shù)據(jù)幀傳輸支持Text和Binary兩種方式：在使用Text方式時，以0x00為起始點，以0xFF結(jié)束，數(shù)據(jù)以UTF-8編碼置于中間；對于Binary方式則沒有結(jié)束標(biāo)識，而是將數(shù)據(jù)幀長度置于數(shù)據(jù)前面。

2. 瀏覽器端 WebSocket編程接口

在瀏覽器端使用WebSocket之前，需要檢測瀏覽器是否支持WebSocket，代碼如下：

var socket=null; window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { alert('Error: WebSocket is not supported .'); } else{ socket = new WebSocket('ws://...');} 

Websocket接口定義如下：

interface WebSocket : EventTarget {  readonly attribute DOMString url;  // ready state  const unsigned short CONNECTING = 0;  const unsigned short OPEN = 1;  const unsigned short CLOSING = 2;  const unsigned short CLOSED = 3;  readonly attribute unsigned short readyState;  readonly attribute unsigned long bufferedAmount;  // networking  attribute EventHandler onopen;  attribute EventHandler onerror;  attribute EventHandler onclose;  readonly attribute DOMString extensions;  readonly attribute DOMString protocol;  void close([Clamp] optional unsigned short code, optional DOMString reason);  // messaging  attribute EventHandler onmessage;  attribute DOMString binaryType;  void send(DOMString data);  void send(Blob data);  void send(ArrayBuffer data);  void send(ArrayBufferView data); };