HTML5 WebSocket 技術介紹

 WebSocket是html5規範新引入的功能，用於解決瀏覽器與後臺服務器雙向通訊的問題，使用WebSocket技術，後臺可以隨時向前端推送消息，以保證前後臺狀態統一，在傳統的無狀態HTTP協議中，這是“無法做到”的。

傳統服務端推（server push）技術

WebSocket提出之前，爲了解決後臺推送消息到前臺的需求，提出了一些解決方案，這些方案使用已有的技術（如ajax，iframe，flashplayer，java applet …），通過一些變通的處理來實現。

簡單輪詢

最簡單的是前臺輪詢，每隔一段時間去請求後臺，以獲取最新狀態，這種方式最容易實現，但效果也最差，頻繁盲目的調用後臺，帶來不必要的開銷，且實時性無法保障，後臺出現更新，前端需要在下一次輪詢時才知道。

長輪詢

爲了解決這些弊端，進化出長輪詢技術，輪詢請求會在後臺阻塞，相當於保持一個長連接，直到後臺出現更新或者超時才返回，這樣就可以保證更新的及時性，前端得到請求後，重新建立輪詢連接，等待後臺的更新通知。

其他方案

其他解決方案無外乎保持一個長連接（如Iframe及htmlfile流），實時的從後臺獲取信息，或者藉助第三方插件（flashPlayer, jre），使用的是flash xmlsocket或者java applet socket技術，這些方式都不夠純html，所以這裏就不過多介紹了，更多傳統server push 技術可參考IBM的文章：http://www.ibm.com/developerworks/cn/web/wa-lo-comet/

WebSocket介紹

webSocket是html5新引入的技術，允許後臺隨時向前端發送文本或者二進制消息，WebSocket是一種全新的協議，不屬於http無狀態協議，協議名爲”ws”，這意味着一個websocket連接地址會是這樣的寫法：ws://twaver.com:8080/webSocketServer。ws不是http，所以傳統的web服務器不一定支持，需要服務器與瀏覽器同時支持， WebSocket才能正常運行，目前的支持還不普遍，需要特別的web服務器和現代的瀏覽器。

瀏覽器對WebSocket的支持

Google Chrome瀏覽器最先支持WebSocket，隨後是Safari，Firefox，此外最新版本的Opera和IE（Opera11，IE10）也支持WebSocket。
下面是主要瀏覽器的支持情況，Opera11中默認關閉了WebSocket支持，所以這裏沒有列出，更多信息可參考：http://en.wikipedia.org/wiki/WebSocket 與 http://caniuse.com/#search=websockets

客戶端WebSocket的主要方法

瀏覽器支持程度各有區別，前面wiki中關於WebSocket的“Browser support”章節有介紹，遵循w3c關於WebSocket API的相關規範，瀏覽器提供了WebSocket類型，在Firefox中爲MozWebSocket，檢測瀏覽器是否支持WebSocket可以使用下面的腳本代碼：

檢測瀏覽器是否支持WebSocket

JavaScript Code複製內容到剪貼板

window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket){
    alert("WebSocket not supported by this browser");
    return;
}

構造函數 – WebSocket#constructor(url, optional protocols)
第一個參數是請求地址，第二個參數選填，表示協議名
使用示例：

JavaScript Code複製內容到剪貼板

var websocket = new WebSocket("ws://127.0.0.1:8080/alarm/alarmServer");

事件 – open/message/close/error
WebSocket#onopen, onmessage, onclose, onerror
連接打開時，回調onopen方法，接收到後臺消息時會觸發到onmessage事件，後臺關閉時調用onclose，出現連接異常時可在onerror中捕獲
使用示例：

JavaScript Code複製內容到剪貼板

websocket.onmessage = function(evt){
    var data = evt.data;
}

方法 – send/close
發送消息 – WebSocket#send(data)
關閉連接 – WebSocket#close(optional code, optional reason)
使用示例：

JavaScript Code複製內容到剪貼板

websocket.send(JSON.stringify({action: "node.remove", id: "001"}));

服務器對WebSocket的支持

WebSocket不同於http協議，傳統的web服務器通常不支持WebSocket，比如tomcat目前就不支持（tomcat 7.0.26 支持WebSocket了），反倒是一些小衆的或者更活躍的web server率先支持WebSocket，如jetty，以及基於node.js的WebSocket-Node擴展，基本上各種編程語言都有相應的服務器可以選擇，下圖是我列舉的幾種，詳細情況參閱：http://en.wikipedia.org/wiki/Comparison_of_WebSocket_implementations

服務器端編程語言各不相同，具體實現自然也不相同，即使是同一種語言，實現類和接口函數也有很大的差別，比如jetty和netty都是基於java語言，但他們的實現類幾乎沒有相同命名的，下面我以jetty（http://www.eclipse.org/jetty）爲例，簡單介紹WebSocket相關的類和方法：

jetty對WebSocket的實現

WebSocketServlet基於servlet標準，增加了doWebSocketConnect(…)方法，爲客戶端請求創建一個後臺對應的WebSocket實例

Java Code複製內容到剪貼板

org.eclipse.jetty.websocket.WebSocketServlet
{
WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
}

後臺WebSocket類，與客戶端WebSocket類對應，能監聽open, message, close等狀態變化事件，幷包含一個Connection屬性，用於向客戶端發送消息

Java Code複製內容到剪貼板

org.eclipse.jetty.websocket.WebSocket
org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
void onOpen(Connection connect);
void onClose(int code, String message);
void onMessage(String message);
}

 

WebSocket.Connection 後臺連接類，包含於WebSocket對象中，用於向客戶端推送消息

Java Code複製內容到剪貼板

org.eclipse.jetty.websocket.WebSocket.Connection
{
void sendMessage(String message);
}

本篇先做介紹，後續將介紹一個WebSocket與TWaver組件結合的實例…　

http://www.html5china.com/HTML5features/WebSocket/20120513_3655.html