JS通過WebSocket實現前後端通信實例

原創

2018-12-29 02:01

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);
    });
}

運行該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>

在瀏覽器中打開該頁面，依次看到如下結果