JS前端中的WebSocket如何使用

這篇文章主要介紹“JS前端中的WebSocket如何使用”，在日常操作中，相信很多人在JS前端中的WebSocket如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS前端中的WebSocket如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

先來一個常用例子

// WebSocket構造函數，創建WebSocket對象
let ws = new WebSocket('ws://localhost:8888')

// 連接成功后的回調函數
ws.onopen = function (params) {
  console.log('客戶端連接成功')
  // 向服務器發送消息
  ws.send('hello')
};

// 從服務器接受到信息時的回調函數
ws.onmessage = function (e) {
  console.log('收到服務器響應', e.data)
};

// 連接關閉后的回調函數
ws.onclose = function(evt) {
  console.log("關閉客戶端連接");
};

// 連接失敗后的回調函數
ws.onerror = function (evt) {
  console.log("連接失敗了");
};

下面詳細說明常用的屬性和方法

更全面的官網的文檔可以去這里看：點擊查看

下面是我總結的內容

WebSocket
WebSocket 對象提供了用于創建和管理 WebSocket 連接，以及可以通過該連接發送和接收數據的 API。

var ws= new WebSocket(url, protocols);

參數

url：要連接的 URL；這應該是 WebSocket 服務器將響應的 URL。
protocols（可選）：一個協議字符串或者一個包含協議字符串的數組。這些字符串用于指定子協議，這樣單個服務器可以實現多個 WebSocket 子協議（可以通過一臺服務器根據指定的協議（protocol）處理不同類型的交互）。如果不指定協議字符串，則假定為空字符串。

屬性

1. readyState 屬性返回實例對象的當前狀態

CONNECTING：值為0，表示正在連接。
OPEN：值為1，表示連接成功，可以通信。
CLOSING：值為2，表示連接正在關閉。
CLOSED：值為3，表示連接已經關閉，或者打開連接失敗。

示例

switch (ws.readyState) {
  case WebSocket.CONNECTING:	// 也可以用0
    // do something
    break;
  case WebSocket.OPEN:			// 也可以用1
    // do something
    break;
  case WebSocket.CLOSING:		// 也可以用2
    // do something
    break;
  case WebSocket.CLOSED:		// 也可以用3
    // do something
    break;
  default:
    // this never happens
    break;
}

2. onopen 連接成功后的回調函數

當WebSocket 的連接狀態readyState 變為1時調用，這意味著當前連接已經準備好發送和接受數據。

使用方法

ws.onopen = function () {
  ws.send('Hello Server!');
}

或者

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

3. onmessage 從服務器接受到信息時的回調函數

message 事件會在 WebSocket 接收到新消息時被觸發

使用方法

ws.onmessage = function(event) {
  // 接收到的數據
  var data = event.data;
  // 其他代碼
};

或者

ws.addEventListener("message", function(event) {
  // 接收到的數據
  var data = event.data;
  // 其他代碼
});

注意：服務器推送的數據可能有多種格式，需要我們動態判斷，也可以通過 binaryType 屬性設置

判斷 / 設置 數據格式

// 判斷
ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("返回數據是字符串");
  }
}

// binaryType 屬性設置
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  // 收到的是 ArrayBuffer 數據
  console.log(e.data.byteLength);
};

4. onclose 連接關閉后的回調函數

onclose 在 WebSocket 連接的readyState 變為 CLOSED或3時被調用，它接收一個名字為close的 CloseEvent 事件

使用方法

ws.onclose = function(event) {
  var code = event.code;			// 表示服務端發送的關閉碼
  var reason = event.reason;		// 表示服務器關閉連接的原因
  var wasClean = event.wasClean;	// 表示連接是否完全關閉
  // 其他代碼
};

或者

ws.addEventListener("close", function(event) {
  var code = event.code;			// 表示服務端發送的關閉碼
  var reason = event.reason;		// 表示服務器關閉連接的原因
  var wasClean = event.wasClean;	// 表示連接是否完全關閉
  // 其他代碼
});

關閉碼對照表：點擊查看

5. onerror 連接失敗后的回調函數

當websocket的連接由于一些錯誤事件的發生 (例如無法發送一些數據) 而被關閉時，一個error事件將被引發。

使用方法

ws.onerror = function(event) {
  console.log('連接錯誤: ', event);
};

或者

ws.addEventListener('error', function (event) {
  console.log('連接錯誤: ', event);
});

6. bufferedAmount 未發送至服務器的字節數

bufferedAmount是一個只讀屬性，用于返回已經被send()方法放入隊列中但還沒有被發送到網絡中的數據的字節數。一旦隊列中的所有數據被發送至網絡，則該屬性值將被重置為 0。但是，若在發送過程中連接被關閉，則屬性值不會重置為 0。如果你不斷地調用send()，則該屬性值會持續增長。

使用方法

// 創建數據
var data = new ArrayBuffer(10000000);
// 發送數據
ws.send(data);

// 判斷數據是否
if (socket.bufferedAmount === 0) {
  // 數據發送完成
} else {
  // 還有數據未發送完成
}

方法

1. send() 對要傳輸的數據進行排隊

send() 方法將需要通過 WebSocket 鏈接傳輸至服務器的數據排入隊列，并根據所需要傳輸的 data bytes 的大小來增加 bufferedAmount 的值。若數據無法傳輸（例如數據需要緩存而緩沖區已滿）時，套接字會自行關閉。

使用方法

ws.send('your message');

注意：用于傳輸至服務器的數據。它必須是以下類型之一：

USVString：文本字符串。字符串將以 UTF-8 格式添加到緩沖區，并且 bufferedAmount 將加上該字符串以 UTF-8 格式編碼時的字節數的值。
ArrayBuffer：您可以使用一有類型的數組對象發送底層二進制數據；其二進制數據內存將被緩存于緩沖區，bufferedAmount 將加上所需字節數的值。
Blob：Blob 類型將隊列 blob 中的原始數據以二進制中傳輸。 bufferedAmount 將加上原始數據的字節數的值。
ArrayBufferView：您可以以二進制幀的形式發送任何 JavaScript 類數組對象 ；其二進制數據內容將被隊列于緩沖區中。值 bufferedAmount 將加上必要字節數的值。

2. close() 關閉當前鏈接

close() 方法關閉 WebSocket 連接或連接嘗試（如果有的話）。如果連接已經關閉，則此方法不執行任何操作。

使用方法

// WebSocket.close(code, reason)
ws.close();

參數：

code（可選）：一個數字狀態碼，它解釋了連接關閉的原因。如果沒有傳這個參數，默認使用 1005。
reason（可選）：一個人類可讀的字符串，它解釋了連接關閉的原因。這個 UTF-8 編碼的字符串不能超過 123 個字節。

到此，關于“JS前端中的WebSocket如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！