WebSockets通訊

龍恩0707發表於2018-02-01
Web

WebSockets通訊

1. websocket是什麼？
WebSocket是一種網路通訊協議。
2. 為什麼需要websocket?
我們有http協議，為什麼還需要websocket協議呢？
因為http協議有一個缺陷，通訊只能是客戶端發起請求的，伺服器端返回查詢結果。比如說 我想知道一個實時新聞，那麼每次新聞更新後，我都要重新整理頁面
，發起客戶端請求，伺服器端返回結果。不能做到伺服器端推送訊息給客戶端，當然我們可以使用輪詢，看看伺服器有麼有新的訊息，比如 "聊天室" 這樣的，但是輪詢效率非常低的，因此websocket就這樣產生了。

websocket最大的優點是：伺服器可以主動向客戶端推送訊息，客戶端也可以主動向伺服器端傳送訊息。
使用websockets可以在伺服器與客戶端之間建立一個非http的雙向連結。這個連結是實時的，也是永久的(除非被關閉)，當伺服器想向客戶端傳送
資料時，可以立即將資料推送到客戶端的瀏覽器中，無需重新建立連結，只要客戶端有一個被開啟的socket(套接字)並且與伺服器建立連結，伺服器就可以
把資料推送到這個socket上。

3. 如何使用websocket？
WebSocket接收一個url引數，然後呼叫WebSocket物件的構造器來建立與伺服器之間的通訊連結。
如下程式碼初始化：

var websocket = new WebSocket('wss://echo.websocket.org');

注意：URL字串必須以 "ws" 或 "wss"（加密通訊）開頭。

如上程式碼，通訊連結建立好之後，就可以進行客戶端與伺服器端的雙向通訊了。可以使用websocket物件的send方法對伺服器傳送資料，但是隻能
傳送文字資料(但是我們可以使用JSON物件把任何js物件轉換成文字資料後再進行傳送)。

3-1 使用send方法的程式碼如下：

websocket.send("data");

3-2 接收伺服器傳過來的資料
通過onmessage事件來接收伺服器傳過來的資料，如下程式碼：

websocket.onmessage = function(event) {
   var data = event.data;
}

3-3 監聽socket的開啟事件
通過獲取onopen事件來監聽socket的開啟事件。如下程式碼：

websocket.onopen = function(event) {
// 開始通訊時的處理
}

3-4 監聽socket的關閉事件
通過獲取onclose事件來監聽socket的關閉事件。如下程式碼：

websocket.onclose = function(event) {
// 通訊結束時的處理
}

通過close方法來關閉socket, 如下程式碼：

websocket.close();

3-5 webSocket.readyState

可以通過讀取readyState的屬性值來獲取WebSocket物件的狀態，readyState屬性存在以下幾種屬性值。

CONNECTING(數字值為0)， 表示正在連線。
OPEN(數字值為1)，表示已建立連線。
CLOSING(數字值為2)，表示正在關閉連線。
CLOSED(數字值為3)，表示已關閉連結。

4. 傳送訊息demo
請看效果演示

如下程式碼：

var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = function(e) {
  console.log('Connection open ...');
  websocket.send("Hello WebSocket!");
}
websocket.onmessage = function(e) {
  console.log('Received Message: ' + e.data);
  websocket.close();
}
websocket.onclose = function(e) {
  console.log('Connection closed.');
}

4-1 下面再看一個demo，客戶端使用websocket技術與伺服器端進行連線並且傳送資訊的demo，程式碼如下：

var websocket;
function connect() {
  var msg = document.getElementById('message');
  try {
    var readyState = new Array("正在連線", "已建立連線", "正在關閉連線", "已關閉連線");
    var url = "wss://echo.websocket.org";
    websocket = new WebSocket(url);
    msg.innerHTML +="<p>Socket狀態為:"+readyState[websocket.readyState]+"</p>";
    websocket.onopen = function() {
      msg.innerHTML += "<p>Socket狀態為"+readyState[websocket.readyState]+"</p>"
    }
    websocket.onmessage = function(msg) {
      msg.innerHTML += "<p>接收資訊："+msg.data+"</p>";
    }
    websocket.onclose = function() {
      msg.innerHTML += "<p>Socket狀態為:"+readyState[websocket.readyState]+"</p>"
    }
  } catch(e) {
    msg.innerHTML += "<p>發生異常了</p>";
  }
}
function send() {
  var text = document.getElementById('text').value;
  var msg = document.getElementById('message');
  if (text == "") {
    msg.innerHTML += "<p>請輸入一些文字</p>";
    return;
  }
  try {
    websocket.send(text);
    msg.innerHTML += "<p>傳送資料:"+text+"</p>";
  } catch(e) {
    msg.innerHTML += "<p>傳送資料異常了</p>";
  }
  document.getElementById('text').value = '';
}
function disconnect() {
  websocket.close();
}

檢視demo預覽

4-2 傳送物件
使用websocket，不僅可以傳送文字資料，而且可以使用JSON物件來傳送JS中的物件，使用JSON物件的關鍵是使用它的兩個方法，
JSON.parse方法與JSON.stringify方法，JSON.stringify方法把javascript物件轉換成文字資料，JSON.parse方法將文字資料轉換為Javascript物件。如下程式碼演示：

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      websocket.onopen = function(e) {
        console.log('Connection open ...');
        websocket.send(
          JSON.stringify({
            'msg': 'payload'
          })
        );
      }
      websocket.onmessage = function(e) {
        console.log(JSON.parse(e.data));
        websocket.close();
      }
      websocket.onclose = function(e) {
        console.log('Connection closed.');
      }
    </script>
  </body>
</html>

效果檢視預覽

4-3 傳送與接收原始二進位制資料
在HTML5中，除了可以使用websocket傳送文字資料以及物件之外，還可以使用websocket來傳送ArrayBuffer物件與Bolb物件。如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      websocket.onopen = function(e) {
        console.log('Connection open ...');
        // 傳送二進位制物件
        var buffer = new ArrayBuffer(128);
        websocket.send(buffer);

        var intview = new Uint32Array(buffer);
        websocket.send(intview);

        var blob = new Blob([buffer]);
        websocket.send(blob);
      }
      websocket.onmessage = function(e) {
        console.log(e.data);
        websocket.close();
      }
      websocket.onclose = function(e) {
        console.log('Connection closed.');
      }
    </script>
  </body>
</html>

預覽效果

比如上傳圖片，傳送圖片二進位制資料如下：

<!DOCTYPE html>
<html>
  <head>
    <title>websocket</title>
    <style>
      
    </style>
  </head>
  <body>
    <input type="file" value="選擇圖片" id="file" accept="image/*"/>
    <button onclick="upload()">上傳圖片</button>
    <script>
      var websocket = new WebSocket('wss://echo.websocket.org');
      function upload() {
        var file = document.getElementById('file').files[0];
        console.log(file)
        websocket.send(file);
      }
      websocket.onmessage = function(e) {
        console.log(e.data);
      }
    </script>
  </body>
</html>

預覽效果

相關文章