使用HTML5的WebSocket實現服務端和客戶端數據通訊（有演示和源碼）

WebSocket協議是基於TCP的一種新的網絡協議。WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通信的網絡技術。依靠這種技術能夠實現客戶端和服務器端的長鏈接，雙向實時通訊。

WebSocket最大特色就是，服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。

WebSocket普遍應用於社交聊天、直播、彈幕、多玩家遊戲、協同編輯、股票基金實時報價、體育實況更新、視頻會議/聊天、基於位置的應用、在線教育、智能家居等須要高實時的場景。

WebSocket特色

• 創建在 TCP 協議之上，服務器端的實現比較容易。 與 HTTP 協議有着良好的兼容性，能經過各類 HTTP 代理服務器。
• 數據格式比較輕量，性能開銷小，通訊高效。 能夠發送文本，也能夠發送二進制數據。 沒有同源限制，客戶端能夠與任意服務器通訊。
• 協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。 能實現真正意義上的數據推送。
• 本文使用實例給你們講解使用HTML5的WebSocket實現服務端和客戶端相互發送和接受數據的過程。

客戶端

在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。

瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。

當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。

本實例提供一個輸入框用來輸入消息，以及一個按鈕用來向服務端發送消息。

<div>
    <div id="result"></div>
    <form class="form-inline" action="">
      <div class="form-group">
        <input type="text" class="form-control" id="m" autocomplete="off" placeholder="請輸入您的暱稱">
      </div>
      <button type="submit" class="btn btn-info">發送</button>
    </form>
</div>

<script>
if ("WebSocket" in window) {
    var ws = new WebSocket("ws://192.168.1.90:8088");

    var result = document.querySelector('#result');

    ws.onopen = function() {
        result.innerHTML = '已鏈接上！';
        console.log('已鏈接上！');
    }

    document.querySelector('form').onsubmit = function(e) {
        var msg = document.querySelector('#m').value;
        ws.send(msg);
        return false;
    }
    ws.onmessage = function(e) {
        console.log(e.data);
        result.innerHTML = e.data;
    }
    ws.onclose = function() {
        console.log('鏈接已關閉！');
    }
} else {
    alert('您的瀏覽器不支持 WebSocket！');
}
</script>

上述代碼中，使用new WebSocket()便可建立 WebSocket 對象。

ws.onopen事件，鏈接創建時觸發。

ws.onmessage事件，客戶端接收服務端數據時觸發。

ws.onclose事件，鏈接關閉時觸發。

ws.onclose事件，通訊發生錯誤時觸發。

ws.send()方法，使用鏈接發送數據。

客戶端代碼，在瀏覽器中訪問，便可和服務端（192.168.1.90）創建websocket鏈接，當輸入信息後，點擊發送按鈕，客戶端立馬向服務端發送消息，並接收服務端發來的消息。

服務端

在執行客戶端程序前，須要建立一個支持websocket的服務，也就是說須要服務端語言環境支持。目前主流的後端語言java，php，python，nodejs，.net等都有相關模塊支持websocket。本例中，咱們使用nodejs來做爲服務端環境，經過安裝nodejs-websocket模塊來支持websocket。

本例中，我用了一臺虛擬機做爲服務端，liunx環境，IP是192.168.1.90。

var ws = require("nodejs-websocket"); //引入websocket模塊  
console.log("開始創建鏈接...");//後臺打印狀態信息  
var server = ws.createServer(function(connect) { //建立一個新鏈接  
    connect.on("text",function(msg){ //接收觸發事件  
        console.log("收到的消息是：" + msg); //接收到新消息以後在後臺打印出來  
        if (msg) { //若是消息不是空，將接收到的消息發送給客戶端  
            connect.send('服務端已收到消息：' + msg + '服務端發來消息： Hello,' + msg); 
        }  
    });  
}).listen(8088);

保存爲index.js文件，而後運行：node index.js，這個時候服務端就跑起來了，nodejs在監聽8088端口。用瀏覽器打開客戶端，輸入信息，點擊發送試試吧。

當咱們輸入「李旺」併發送後，服務端收到了內容爲「李旺」的消息後，發送了相應的消息給客戶端。效果如圖：

固然，實際生產環境中，咱們可使用PM2來控制nodejs程序在後臺運行，使用Nginx作反向代理，不用將服務器ip和端口暴露到外網，能夠參考：《Nginx配置反向代理訪問內部服務》。

若是你對nodejs還不懂，不要緊，咱們後面會推出nodejs的相關文章，敬請留意。還有對於websocket的應用，Helloweba會繼續推出文章講解websocket在聊天室、直播和消息推送方面的應用，爲了之後的講解作鋪墊，但願有興趣的同窗在關注websocket的同時也關注下nodejs以及swoole等技術，固然最關鍵的是須要關注咱們Helloweba。

在線演示：https://www.helloweba.net/dem...
源碼下載：https://www.helloweba.net/dow...