WebSocket protocol是H5的一種新協議,實現了瀏覽器與服務器的全雙工通信,所以可以實現web實時交互。並節省了資源和帶寬
在WebSocket出現之前,一般通過兩種方式來實現web實時應用:輪詢和流
輪詢:是一種定時的同步調用,客戶端向服務器端以固定時間間隔發送請求,查看是否有更新。如果有新的信息,客戶端會得到響應,否則服務器返回一個拒絕響應,客戶端關閉連接。
然而實時數據並不總是可預測的,輪詢會帶來很多不必要的請求,而每次請求都會帶有完整的請求頭,這樣會浪費資源和帶寬;輪詢是一種低效的實時方案
長輪詢(Comet/反向ajax):客戶端向服務端發送請求,並保持一段設定的時間,直到服務端有響應或者設定的時間過期,請求才會關閉。之后,客戶端會重新向服務器發送請求
流:在客戶端頁面使用一個隱藏的窗口(iframe)向服務器發出一個長連接請求(無限或規定的時間段內,一直保持打開),每當服務器端有更新時,就將信息推送至客戶端。
這種方式的缺陷在於:1.要針對不同瀏覽器改善用戶體驗。2.服務器不會發送請求完成響應,連接一直打開,對防火牆和代理網絡不友好
websocket:使用javascript調用瀏覽器API, 發送一個websocket請求到服務器,經過一次握手,和服務器簡歷TCP通訊。它本質上是一個TCP連接,所以穩定性強、數據傳輸量小。
websocket協議基於TCP協議。建立一個websocket連接的步驟:
1.客戶端向服務器發送一個特殊http請求,包含了一些附加頭信息("Upgrade:WebSocket"),表明這是一個申請協議升級的http請求。
2.服務端解析並產生應答信息返回客戶端,websocket連接建立成功
3.連接一直打開,直到B/S端的某一方中關閉連接。
常用接口方法和屬性:
readyState表示四種連接狀態:
0:未連接
1:連接成功,可通訊
2:正在關閉
3:連接已關閉或無法打開
url代表websocket的服務器網絡地址,協議通常是“ws”或“wss(加密)”;send()發送數據到服務端
close()關閉連接
onopen(),握手成功觸發的事件
onmessage(),收到服務器消息時觸發
onerror(),異常時觸發
onclose(),關閉連接時觸發
JavaScript調用瀏覽器接口示例如下:
1 var wsServer = 'ws://localhost:8888/Demo'; //服務器地址 2 var websocket = new WebSocket(wsServer); //創建WebSocket對象 3 websocket.send("hello");//向服務器發送消息 4 alert(websocket.readyState);//查看websocket當前狀態 5 websocket.onopen = function (evt) { 6 //已經建立連接 7 }; 8 websocket.onclose = function (evt) { 9 //已經關閉連接 10 }; 11 websocket.onmessage = function (evt) { 12 //收到服務器消息,使用evt.data提取 13 }; 14 websocket.onerror = function (evt) { 15 //產生異常 16 };
服務器端對websocket的實現: