1、WebSocket是什么？
WebSocket是一種網絡通信協議， 一種由HTML5 開始提供的、在單個 TCP 連接上進行全雙工通訊的協議。它和HTTP協議的最大區別在於：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議當客戶端想要知道服務端的變化時，HTTP協議必須使用“輪詢”的方式，效率很低；而WebSocket只需一次連接，便可以讓服務端直接向客戶端推送信息，從而告別輪詢。
下面來構建一個基於JS的WebSocket通信實例：
2、服務端
為與客戶端一致，后端引入ws模塊，構建服務器，監聽對應事件，具體代碼如下：
var ws = require("ws"); // 加載ws模塊;
// 啟動websocket服務器
var wsServer = new ws.Server({
host: "127.0.0.1",
port: 8183,
});
console.log('WebSocket sever is listening at port localhost:8183');
// 建立連接，監聽客戶端請求，綁定對應事件;
function on_server_client_comming (wsObj) {
console.log("request comming");
websocket_add_listener(wsObj);
}
wsServer.on("connection", on_server_client_comming);
// 各事件處理邏輯
function websocket_add_listener(wsObj) {
wsObj.on("message", function(data) {
console.log("request data:"+data);
setTimeout(()=>{ //收到請求，回復
wsObj.send("1秒延時，收到了，正在處理");
},1000);
/*****
* 處理業務邏輯
*/
setTimeout(()=>{ //完成請求，回復
wsObj.send("3秒延時，返回數據，關閉連接");
wsObj.close()
},3000);
});
wsObj.on("close", function() {
console.log("request close");
});
wsObj.on("error", function(err) {
console.log("request error", err);
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
運行該js構建服務器,結果如下：
3、客戶端
支持H5的瀏覽器均內置WebSocket 對象，直接引用即可，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
var wsObj = new WebSocket("ws://127.0.0.1:8183"); //建立連接
wsObj.onopen = function(){ //發送請求
alert("open");
wsObj.send("Hello WebSocket");
};
wsObj.onmessage = function(ev){ //獲取后端響應
alert(ev.data);
};
wsObj.onclose = function(ev){
alert("close");
};
wsObj.onerror = function(ev){
alert("error");
};
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
在瀏覽器中打開該頁面，依次看到如下結果
此時，服務端控制台打印出的信息為：
至此，一個基於JS的WebSocket通信實例構建完畢。
更多關於WebSocket的知識點，可以點擊查看這里。