WebSocket API

本章節介紹一下WebSocket中常用的一些方法和屬性。

首先看一個程式碼片段:

[JavaScript] 純文字檢視 複製程式碼
var ws = new WebSocket('ws://localhost:8181');
 
ws.onopen = function(evt) {
  console.log('連線成功');
  ws.send('螞蟻部落');
};
 
ws.onmessage = function(evt) {
  console.log('接收到資訊: ' + evt.data);
  ws.close();
};
 
ws.onclose = function(evt) {
  console.log('連線關閉');
};

上面程式碼是WebSocket應用的程式碼片段，通過它可以直觀的感受一下。

一.建構函式：

通過WebSocket建構函式建立一個WebSocket物件例項：

[JavaScript] 純文字檢視 複製程式碼
var ws = new WebSocket('ws://localhost:8181');

執行上面的程式碼，客戶端就與伺服器進行連線動作。

二.readyState：

此屬性返回WebSocket物件例項的當前狀態：

（1）.CONNECTING：值為0，表示正在連線。

（2）.OPEN：值為1，表示連線成功，可以通訊了。

（3）.CLOSING：值為2，表示連線正在關閉。

（4）.CLOSED：值為3，表示連線已經關閉，或者開啟連線失敗。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // 程式碼
    break;
  case WebSocket.OPEN:
    // 程式碼
    break;
  case WebSocket.CLOSING:
    // 程式碼
    break;
  case WebSocket.CLOSED:
    // 程式碼
    break;
  default:
    // 此程式碼不會執行，因為只存在上述四種狀態
    break;
}

三.open事件：

連線成功後觸發此事件：

[JavaScript] 純文字檢視 複製程式碼
ws.onopen = function(evt) {
  console.log('連線成功');
  ws.send('螞蟻部落');
};

四.message事件：

接收到伺服器發來的資訊觸發此事件：

[JavaScript] 純文字檢視 複製程式碼
ws.onmessage = function(evt) {
  console.log('接收到資訊: ' + evt.data);
  ws.close();
};

事件物件的data獲取從伺服器端傳送而來的資料，資料可能是文字，也可能是二進位制資料。

使用binaryType屬性，顯式指定收到的二進位制資料型別：

[JavaScript] 純文字檢視 複製程式碼
// 收到的是 blob 資料
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};
 
// 收到的是 ArrayBuffer 資料
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

五.close事件：

連線關閉關閉觸發此事件：

[JavaScript] 純文字檢視 複製程式碼
ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // code
};

六.error事件：

出現連線、處理、接收、傳送資料失敗的時候就會觸發error事件：

[JavaScript] 純文字檢視 複製程式碼
socket.onerror = function(evt) {
  // code
};

七.send()方法：

WebSocket例項物件的send()方法可以向伺服器傳送資料：

[JavaScript] 純文字檢視 複製程式碼
ws.onopen = function(evt) {
  console.log('連線成功');
  ws.send('螞蟻部落');
};

上面的程式碼是傳送普通的字串。

[JavaScript] 純文字檢視 複製程式碼
let inputFile = document.querySelector('input[type="file"]');
let file=inputFile.files[0];
ws.send(file);

上面的程式碼是傳送普通的字串。

[JavaScript] 純文字檢視 複製程式碼
let inputFile = document.querySelector('input[type="file"]');
let file=inputFile.files[0];
ws.send(file);

上面的程式碼傳送Blob物件。

[JavaScript] 純文字檢視 複製程式碼
let img = canvas_context.getImageData(0, 0, 200, 100);
let binary = new Uint8Array(img.data.length);
for (let i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

上面的程式碼傳送ArrayBuffer物件。

（1）.關於getImageData()參閱canvas getImageData()一章節。

（2）.關於Uint8Array參閱JavaScript TypedArray 檢視一章節。

八.bufferedAmount屬性：

WebSocket物件例項的bufferedAmount屬性可以返回一個數字，用來表示還有多少位元組的二進位制資料沒有傳送出去。它可以用來判斷髮送是否結束，程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var data = new ArrayBuffer(18800000);
socket.send(data);
 
if (socket.bufferedAmount === 0) {
  // 已經傳送完畢
} else {
  // 尚未傳送完畢
}

上面程式碼同樣非常的簡單，不再多做介紹，至此本文完結。