如何使用HTML5的WebSocket實現服務端和客戶端數據通信

如何使用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 事件來接收服務器返回的數據。

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

<p>    <p id="result"></p>    <form class="form-inline" action="">      <p class="form-group">        <input type="text" class="form-control" id="m" autocomplete="off" placeholder="請輸入您的昵稱">      </p>      <button type="submit" class="btn btn-info">發送</button>    </form></p><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和端口暴露到外網。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。