WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。

何為 WebSocket 對象？

WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。

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

使用 WebSocket()構造函數來構造一個 WebSocket ：

let aWebSocket = new WebSocket(url [, protocols]);

參數解析：

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

WebSocket 對象的常量

WebSocket 對象的屬性

WebSocket.binaryType

返回 WebSocket 連接所傳輸二進制數據的類型。

語法：

const binaryType = aWebSocket.binaryType;

返回值：DOMString （一個UTF-16字符串）

• "blob"： 如果傳輸的是 Blob 類型的數據。
• "arraybuffer"： 如果傳輸的是 ArrayBuffer 類型的數據。

WebSocket.bufferedAmount（只讀）

用於返回已經被send()方法放入隊列中但還沒有被髮送到網絡中的數據的字節數。

一旦隊列中的所有數據被髮送至網絡，則該屬性值將被重置為0。

但是，若在發送過程中連接被關閉，則屬性值不會重置為0。如果你不斷地調用send()，則該屬性值會持續增長。

語法：

const bufferedAmount = aWebSocket.bufferedAmount;

返回值：整數。

WebSocket.extensions（只讀）

返回服務器已選擇的擴展值。目前，鏈接可以協定的擴展值只有空字符串或者一個擴展列表。

const extensions = aWebSocket.extensions;

返回值：DOMString。

WebSocket.onclose

返回一個事件監聽器，這個事件監聽器將在 WebSocket 連接的 readyState 變為 CLOSED時被調用，它接收一個名字為“close”的 CloseEvent 事件。

語法：

WebSocket.onclose = function(event) {
  console.log("WebSocket is closed now.");
};

返回值：EventListener。

WebSocket.onerror

該屬性中，你可以定義一個發生錯誤時執行的回調函數，此事件的事件名為"error"

語法：

WebSocket.onerror = function(event) {
  console.error("WebSocket error observed:", event);
};

返回值： EventListener。

WebSocket.onmessage

該屬性是一個當收到來自服務器的消息時被調用的 event handler。它由一個MessageEvent調用。

語法

aWebSocket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};

返回值： EventListener。

WebSocket.onopen

該屬性定義一個事件處理程序，當WebSocket 的連接狀態readyState變為1時調用;這意味着當前連接已經準備好發送和接受數據。這個事件處理程序通過 事件（建立連接時）觸發。

語法：

aWebSocket.onopen = function(event) {
  console.log("WebSocket is open now.");
};

返回值： EventListener。

WebSocket.protocol（只讀）

用於返回服務器端選中的子協議的名字；這是一個在創建 WebSocket 對象時，在參數protocols中指定的字符串，當沒有已建立的鏈接時為空串。

語法：

var protocol = aWebSocket.protocol;

返回值：DOMString。

WebSocket.readyState（只讀）

返回當前 WebSocket 的鏈接狀態，只讀。

語法：

var readyState = WebSocket.readyState;

值：

• 0 (WebSocket.CONNECTING) 正在鏈接中
• 1 (WebSocket.OPEN) 已經鏈接並且可以通訊
• 2 (WebSocket.CLOSING) 連接正在關閉
• 3 (WebSocket.CLOSED) 連接已關閉或者沒有鏈接成功

WebSocket.url（只讀）

返回值為當構造函數創建 WebSocket 實例對象時URL的絕對路徑。

語法：

var url = aWebSocket.url;

返回值：DOMString。

WebSocket 對象的方法

WebSocket.close()

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

語法：

WebSocket.close();

參數：

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

WebSocket.send()

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

語法：

WebSocket.send("Hello server!");

參數:

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

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

WebSocket 對象的事件

WebSocket 對象使用 addEventListener() 或將一個事件監聽器賦值給本接口的 on*eventname* 屬性，來監聽下面的事件。

close event

當與 WebSocket 的連接關閉時，會觸發 close 事件。

您可能想知道連接何時關閉，以便您可以更新 UI，或者保存與已關閉連接有關的數據。例子：

exampleSocket.addEventListener('close', (event) => {
  console.log('The connection has been closed successfully.');
});

error event

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

// Create WebSocket connection
// 創建一個 WebSocket 連接
const socket = new WebSocket('ws://localhost:8080');

// Listen for possible errors
// 監聽可能發生的錯誤
socket.addEventListener('error', function (event) {
  console.log('WebSocket error: ', event);
});

message event

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

// 創建一個 WebSocket 連接
const socket = new WebSocket('ws://localhost:8080');

// 監聽消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

open event

當一個 WebSocket 連接成功時觸發。也可以通過 onopen屬性來設置。例子：

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', (event) => {
  socket.send('Hello Server!');
});

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！