WebSocket的使用方法（JS前端）

這篇具有很好參考價值的文章主要介紹了WebSocket的使用方法（JS前端）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

先來一個常用例子

// WebSocket構(gòu)造函數(shù)，創(chuàng)建WebSocket對象
let ws = new WebSocket('ws://localhost:8888')

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

// 從服務(wù)器接受到信息時的回調(diào)函數(shù)
ws.onmessage = function (e) {
  console.log('收到服務(wù)器響應(yīng)', e.data)
};

// 連接關(guān)閉后的回調(diào)函數(shù)
ws.onclose = function(evt) {
  console.log("關(guān)閉客戶端連接");
};

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


// 監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，這樣服務(wù)端會拋異常。
window.onbeforeunload = function() {
    ws.close();
}

封裝的代碼
上面的代碼就夠用，也可以查看我封裝好的 WebSocket 代碼（包括心跳機(jī)制）：點(diǎn)擊查看

下面詳細(xì)說明常用的屬性和方法

更全面的官網(wǎng)的文檔可以去這里看：點(diǎn)擊查看

下面是我總結(jié)的內(nèi)容

WebSocket
WebSocket 對象提供了用于創(chuàng)建和管理 WebSocket 連接，以及可以通過該連接發(fā)送和接收數(shù)據(jù)的 API。

var ws= new WebSocket(url, protocols);

參數(shù)

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

屬性

1. readyState 屬性返回實(shí)例對象的當(dāng)前狀態(tài)

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

示例

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 連接成功后的回調(diào)函數(shù)
當(dāng)WebSocket 的連接狀態(tài)readyState 變?yōu)?code>1時調(diào)用，這意味著當(dāng)前連接已經(jīng)準(zhǔn)備好發(fā)送和接受數(shù)據(jù)。

使用方法

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

或者

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

3. onmessage 從服務(wù)器接受到信息時的回調(diào)函數(shù)
message 事件會在 WebSocket 接收到新消息時被觸發(fā)

使用方法

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

或者

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

注意：服務(wù)器推送的數(shù)據(jù)可能有多種格式，需要我們動態(tài)判斷，也可以通過 binaryType 屬性設(shè)置

判斷 / 設(shè)置數(shù)據(jù)格式

// 判斷
ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("返回?cái)?shù)據(jù)是字符串");
  }
}

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

4. onclose 連接關(guān)閉后的回調(diào)函數(shù)
onclose 在 WebSocket 連接的readyState 變?yōu)?CLOSED或3時被調(diào)用，它接收一個名字為close的 CloseEvent 事件

使用方法

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

或者

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

關(guān)閉碼對照表：點(diǎn)擊查看

5. onerror 連接失敗后的回調(diào)函數(shù)
當(dāng)websocket的連接由于一些錯誤事件的發(fā)生 (例如無法發(fā)送一些數(shù)據(jù)) 而被關(guān)閉時，一個error事件將被引發(fā)。

使用方法

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

或者

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

6. bufferedAmount 未發(fā)送至服務(wù)器的字節(jié)數(shù)
bufferedAmount是一個只讀屬性，用于返回已經(jīng)被send()方法放入隊(duì)列中但還沒有被發(fā)送到網(wǎng)絡(luò)中的數(shù)據(jù)的字節(jié)數(shù)。一旦隊(duì)列中的所有數(shù)據(jù)被發(fā)送至網(wǎng)絡(luò)，則該屬性值將被重置為 0。但是，若在發(fā)送過程中連接被關(guān)閉，則屬性值不會重置為 0。如果你不斷地調(diào)用send()，則該屬性值會持續(xù)增長。

使用方法

// 創(chuàng)建數(shù)據(jù)
var data = new ArrayBuffer(10000000);
// 發(fā)送數(shù)據(jù)
ws.send(data);

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

方法

1. send() 對要傳輸?shù)臄?shù)據(jù)進(jìn)行排隊(duì)
send() 方法將需要通過 WebSocket 鏈接傳輸至服務(wù)器的數(shù)據(jù)排入隊(duì)列，并根據(jù)所需要傳輸?shù)?data bytes 的大小來增加 bufferedAmount 的值。若數(shù)據(jù)無法傳輸（例如數(shù)據(jù)需要緩存而緩沖區(qū)已滿）時，套接字會自行關(guān)閉。

使用方法

ws.send('your message');

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

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

2. close() 關(guān)閉當(dāng)前鏈接
close() 方法關(guān)閉 WebSocket 連接或連接嘗試（如果有的話）。如果連接已經(jīng)關(guān)閉，則此方法不執(zhí)行任何操作。

使用方法

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

參數(shù)：

code（可選）：一個數(shù)字狀態(tài)碼，它解釋了連接關(guān)閉的原因。如果沒有傳這個參數(shù)，默認(rèn)使用 1005。
reason（可選）：一個人類可讀的字符串，它解釋了連接關(guān)閉的原因。這個 UTF-8 編碼的字符串不能超過 123 個字節(jié)。

數(shù)字狀態(tài)碼對照表：點(diǎn)擊查看

到這里就結(jié)束了，根據(jù)需求使用就可以了。

WebSocket心跳機(jī)制/保持連接的內(nèi)容，請看我的其他文章（里面有封裝好的 WebSocket 方法，可以直接使用）：點(diǎn)擊查看文章來源地址http://www.zghlxwxcb.cn/news/detail-782892.html

到了這里，關(guān)于WebSocket的使用方法（JS前端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！