標籤：
眾所周知，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伺服器
本文轉自：http://www.cnblogs.com/ShadowLoki/p/3712048.html
初識WebSocket
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
