眾所周知，Http協議是無狀態的，並且是基於Request/Response的方式與服務器進行交互，也就是我們常說的單工模式。但是隨着互聯網的發展，瀏覽器與服務端進行雙向通信需求的增加，長輪詢向服務器以獲取最新數據並實現推送效果的方式已經越來越不能滿足我們。Html5標准的制定，也為我們提供了瀏覽器與服務端的雙工通信協議WebSocket。
WebSocket協議的格式為 "ws://IP:Port" 或者“wss://IP:Port"。其中wss表示進行加密傳輸的websocket協議。
WebSocket協議與傳統的Socket協議一樣，都需要進行“握手”。但是WebSocket的“握手”階段是通過Http協議進行的，“握手”行為通過Request/Response的Header完成，只需要交換很少的數據，便可以創建基於TCP/IP協議的雙工通道。下面我們來看一下Fiddler截取到的WebSocket握手請求
通過Fiddler我們可以看到，在握手請求時，客戶端向服務端發送了一個Get請求，並且在請求的頭中增加了這么幾個Key
Origin:http://IP:Port 表示客戶端的地址
Connection:Upgrade / Upgrade:WebSocket 表示本次請求是要進行WebSocket的握手動作
Sec-WebSocket-Version: 13 表示瀏覽器支持的WebSocket版本信息
Sec-WebSocket-Key: 這是一個由客戶端隨機生成的字符串
在服務器響應的握手信息中Sec-WebSocket-Accept:的值為服務器通過客戶端Header的Sec-WebSocket-Key的值進行計算並加密的結果。
並且服務器的響應狀態為101 表示服務器端已經理解了客戶端的需求，並且客戶端需要根據Upgrade中的協議類型，切換為新的協議來完成后續的通信。
這時候我們的TCP/IP雙工通道就已經建立了，WebSocket協議就這么簡單。
說完理論知識了，我們來看如何在瀏覽器中使用WebSocket協議。
最新的FireFox、Chrome、IE10及以上版本都已經支持了WebSocket協議。但是在使用它時，我們需要先檢測瀏覽器是否支持WebSocket協議
WebSocket對象位於 window對象下。我們可以通過以下代碼檢測瀏覽器對WebSocket的支持
if("WebSocket" in window) if(window.WebSocket) if("MozWebSocket" in window) if(window.MozWebSocket)
如果我們的瀏覽器支持WebSocket 那么我們就可以創建WebSocket的實例了。
var ws=new WebSocket("ws://localhost:2012"); var ws=new MozWebSocket("ws://localhost:2012);
這里需要注意一下，當我們創建WebSocket的實例時，這個WebSocket實例就已經開始向服務器發起握手請求了，不需要我們手動打開連接。
WebSocket對象也很簡單，我們會常用到它的4個回調方法 onopen onclose onerror onmessage。他們觸發的實際分別為 握手完成並創建TCP/IP通道后，斷開連接后，發生錯誤時，接收到服務端消息時。
另外我們還常常用到一個屬性 readyState 用以檢查連接狀態，和一個函數 send() 向服務端發送數據。
下面我們來完成一個完整的瀏覽器使用WebSocket的例子，這里需要服務端也支持WebSocket協議
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WebSocket示例</title> <script type="text/javascript"> var ws;//WebSocket對象 var wsUrl = "ws://localhost:2012";//支持WebSocket協議的服務器端地址 function connection() { //判斷該使用哪種WebSocket對象 if ("WebSocket" in window) { ws = new WebSocket(wsUrl); } else if ("MozWebSocket" in window) { ws = new MozWebSocket(wsUrl); } else { alert("當前瀏覽器不支持WebSocket"); } //注冊各類回調 ws.onopen = function () { alert("連接服務器成功"); } ws.onclose = function () { alert("與服務器斷開連接"); } ws.onerror = function () { alert("數據傳輸發生錯誤"); } ws.onmessage = function (receiveMsg) { alert(receiveMsg.data); } } function sendMessage() { //嘗試向服務端發送消息 ws.send("Hello World"); } </script> </head> <body> <input type="button" value="Connection" onclick="connection()" /> <input type="button" value="Send" onclick="sendMessage()" /> </body> </html>
完整示例代碼在這里下載 示例代碼的服務端是基於.Net Framework 4.5用VS2012開發的 因為服務器WebSocket框架的.NET 4.0版本有問題……
下一篇文章我們會講如何使用SuperWebSocket框架搭建我們自己的WebSocket服務器