初识WebSocket
眾所周知，Http協(xié)議是無狀態(tài)的，并且是基于Request/Response的方式與服務器進行交互，也就是我們常說的單工模式。但是隨著互聯(lián) 網(wǎng)的發(fā)展，瀏覽器與服務端進行雙向通信需求的增加，長輪詢向服務器以獲取最新數(shù)據(jù)并實現(xiàn)推送效果的方式已經(jīng)越來越不能滿足我們。Html5標準的制定，也 為我們提供了瀏覽器與服務端的雙工通信協(xié)議WebSocket。
WebSocket協(xié)議的格式為 "ws://IP:Port" 或者“wss://IP:Port"。其中wss表示進行加密傳輸?shù)膚ebsocket協(xié)議。
WebSocket協(xié)議與傳統(tǒng)的Socket協(xié)議一樣，都需要進行“握手”。但是WebSocket的“握手”階段是通過Http協(xié)議進行的， “握手”行為通過Request/Response的Header完成，只需要交換很少的數(shù)據(jù)，便可以創(chuàng)建基于TCP/IP協(xié)議的雙工通道。下面我們來看 一下Fiddler截取到的WebSocket握手請求
通過Fiddler我們可以看到，在握手請求時，客戶端向服務端發(fā)送了一個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的值進行計算并加密的結果。
并且服務器的響應狀態(tài)為101? 表示服務器端已經(jīng)理解了客戶端的需求，并且客戶端需要根據(jù)Upgrade中的協(xié)議類型，切換為新的協(xié)議來完成后續(xù)的通信。
?
這時候我們的TCP/IP雙工通道就已經(jīng)建立了，WebSocket協(xié)議就這么簡單。
?
說完理論知識了，我們來看如何在瀏覽器中使用WebSocket協(xié)議。
最新的FireFox、Chrome、IE10及以上版本都已經(jīng)支持了WebSocket協(xié)議。但是在使用它時，我們需要先檢測瀏覽器是否支持WebSocket協(xié)議
WebSocket對象位于 window對象下。我們可以通過以下代碼檢測瀏覽器對WebSocket的支持
if("WebSocket" in window)if(window.WebSocket)if("MozWebSocket" in window) if(window.MozWebSocket)
如果我們的瀏覽器支持WebSocket 那么我們就可以創(chuàng)建WebSocket的實例了。
var ws=new WebSocket("ws://localhost:2012");var ws=new MozWebSocket("ws://localhost:2012);
這里需要注意一下，當我們創(chuàng)建WebSocket的實例時，這個WebSocket實例就已經(jīng)開始向服務器發(fā)起握手請求了，不需要我們手動打開連接。
WebSocket對象也很簡單，我們會常用到它的4個回調(diào)方法 onopen onclose onerror onmessage。他們觸發(fā)的實際分別為 握手完成并創(chuàng)建TCP/IP通道后，斷開連接后，發(fā)生錯誤時，接收到服務端消息時。
另外我們還常常用到一個屬性 readyState 用以檢查連接狀態(tài)，和一個函數(shù) send() 向服務端發(fā)送數(shù)據(jù)。
下面我們來完成一個完整的瀏覽器使用WebSocket的例子，這里需要服務端也支持WebSocket協(xié)議
<!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協(xié)議的服務器端地址 function connection() { //判斷該使用哪種WebSocket對象 if ("WebSocket" in window) { ws = new WebSocket(wsUrl); } else if ("MozWebSocket" in window) { ws = new MozWebSocket(wsUrl); } else { alert("當前瀏覽器不支持WebSocket"); } //注冊各類回調(diào) ws.onopen = function () { alert("連接服務器成功"); } ws.onclose = function () { alert("與服務器斷開連接"); } ws.onerror = function () { alert("數(shù)據(jù)傳輸發(fā)生錯誤"); } ws.onmessage = function (receiveMsg) { alert(receiveMsg.data); } } function sendMessage() { //嘗試向服務端發(fā)送消息 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開發(fā)的 因為服務器WebSocket框架的.NET 4.0版本有問題……
下一篇文章我們會講如何使用SuperWebSocket框架搭建我們自己的WebSocket服務器
本文轉自：http://www.cnblogs.com/ShadowLoki/p/3712048.html
轉載于:https://www.cnblogs.com/candyzhmm/p/5882703.html
總結
以上是生活随笔為你收集整理的初识WebSocket的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 去店里买集成灶，该怎么挑选的？
- 下一篇： MarkdownPad 2 常用快捷键