1. 程式人生 > >WebSocket學習筆記(前端)

WebSocket學習筆記(前端)

(1)當伺服器有連續的狀態變化時,伺服器可以主動向客戶端推送訊息,客戶端也可主動向

伺服器傳送訊息,是真正的雙向平等對話,屬於伺服器推送技術的一種。

注:HTTP 協議做不到伺服器主動向客戶端推送資訊。HTTP 協議有一個缺陷:通訊只能由客戶端發起,這種單向請求的特點,註定瞭如果伺服器有連續的狀態變化,客戶端要獲知就非常麻煩。我們只能使用"輪詢":每隔一段時候,就發出一個詢問,瞭解伺服器有沒有新的資訊。最典型的場景就是聊天室。

輪詢的效率低,非常浪費資源(因為必須不停連線,或者 HTTP 連線始終開啟)

(2)建立在 TCP 協議之上,伺服器端的實現比較容易。

(3)與 HTTP 協議有著良好的相容性。預設埠也是80和443,並且握手階段採用 HTTP 協議,因此握手時不容易遮蔽,能通過各種 HTTP 代理伺服器。

(4)資料格式比較輕量,效能開銷小,通訊高效。

(5)可以傳送文字,也可以傳送二進位制資料。

(6)沒有同源限制,客戶端可以與任意伺服器通訊。

(7)協議識別符號是ws(如果加密,則為wss),伺服器網址就是 URL。

eg:ws://example.com:80/some/path

2.客戶端使用例項:

var ws=new WebSocket("ws://echo.websocket.org");//建立websocket連線

//onopen屬性,用於指定;連線成功後的回撥函式

ws.onopen=function(evt){

console.log("連線開啟。。。");

//send()方法用於向伺服器傳送資料。

ws.send("你好,WebSockets!");

};

//onmessage屬性 用於指定收到伺服器資料後的回撥函式

ws.onmessage=function(evt){

console.log("收到的資訊:"+evt.data);

//close()方法 關閉WebSocket連線

ws.close();

};

//onclose屬性,用於指定連線關閉後的回撥函式。

ws.onclose=function(evt){

console.log("連線關閉")

}

例項物件的onerror屬性,用於指定報錯時的回撥函式。

ws.onerror = function(event) { console.log("連接出錯") };

websocket瀏覽器支援情況https://caniuse.com/#search=websockets

判斷瀏覽器是否支援websocket,比較嚴謹的方式是:

if (typeof WebSocket != 'undefined') {

/*supported*/

}

//or

if (!!window.WebSocket && window.WebSocket.prototype.send) {

/*supported*/

}