簡介
-
WebSocket是什么？
WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——允許服務(wù)器主動發(fā)送信息給客戶端。
-
產(chǎn)生背景
因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務(wù)器發(fā)出請求，服務(wù)器返回查詢結(jié)果。HTTP 協(xié)議做不到服務(wù)器主動向客戶端推送信息。
這種單向請求的特點，注定了如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發(fā)出一個詢問，了解服務(wù)器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。
-
特點
- 服務(wù)器可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)器發(fā)送信息，是真正的雙向平等對話，屬于服務(wù)器推送技術(shù)的一種。
- 建立在 TCP 協(xié)議之上，服務(wù)器端的實現(xiàn)比較容易。
- 與 HTTP 協(xié)議有著良好的兼容性。默認(rèn)端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務(wù)器。
- 數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。
- 可以發(fā)送文本，也可以發(fā)送二進(jìn)制數(shù)據(jù)。
- 沒有同源限制，客戶端可以與任意服務(wù)器通信。
- 協(xié)議標(biāo)識符是
ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。
'ws://10.96.9.50:17653/CVWS'
客戶端的簡單案例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="https://www.baidu.com" />
<title>websocket test</title>
<script>
var socket;
function Connect(){
try{
socket=new WebSocket('ws://10.96.9.50:17653/CVWS');
}catch(e){
alert('error');
return;
}
socket.onopen = sOpen;
socket.onerror = sError;
socket.onmessage= sMessage;
socket.onclose= sClose;
}
function sOpen(){
alert('connect success!');
}
function sError(e){
alert("error " + e);
}
function sMessage(msg){
alert('server says:' + msg);
}
function sClose(e){
alert("connect closed:" + e.code);
}
function Send(){
socket.send(document.getElementById("msg").value);
}
function Close(){
socket.close();
}
</script>
</head>
<body>
<input id="msg" type="text">
<button id="connect" onclick="Connect();">Connect</button>
<button id="send" onclick="Send();">Send</button>
<button id="close" onclick="Close();">Close</button>
</body>
</html>
客戶端的API
-
WebSocket 構(gòu)造函數(shù)
WebSocket 對象作為一個構(gòu)造函數(shù)，用于新建 WebSocket 實例。
var ws = new WebSocket('ws://localhost:8080');
執(zhí)行上面語句之后，客戶端就會與服務(wù)器進(jìn)行連接。
實例對象的所有屬性和方法清單，參見這里。
-
webSocket.onopen
實例對象的onopen屬性，用于指定連接成功后的回調(diào)函數(shù)。
ws.onopen = function () {
ws.send('Hello!');
}
如果要指定多個回調(diào)函數(shù)，可以使用addEventListener方法。
ws.addEventListener('open', function (event) {
ws.send('Hello Server!');
});
-
webSocket.onclose
實例對象的onclose屬性，用于指定連接關(guān)閉后的回調(diào)函數(shù)。
ws.onclose = function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
};
ws.addEventListener("close", function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
});
-
webSocket.onmessage
實例對象的onmessage屬性，用于指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)。
ws.onmessage = function(event) {
var data = event.data;
// 處理數(shù)據(jù)
};
ws.addEventListener("message", function(event) {
var data = event.data;
// 處理數(shù)據(jù)
});
聲明：部分內(nèi)容從網(wǎng)絡(luò)獲取，如有侵權(quán)行為，請與作者聯(lián)系，作者將于2日內(nèi)刪除。
