WebSocket API 的詳細闡述

WebSocket API 是 HTML5 開發中的一項重要技術，它已經成為了高效和可擴展的實時通信方案。改變了以往 Web 應用客戶端和服務端通信的限制，通過 WebSocket API，可以實現瀏覽器與服務器之間的雙向通信，極大地增強了 Web 應用的功能，為開發高交互性、實時化的 Web 應用提供了極大的幫助。

一、WebSocket API 的基本使用方法

WebSocket API 的基本使用非常簡單，只需要如下步驟：

1.創建 WebSocket 實例

const socket = new WebSocket('ws://' + window.location.href.split('/')[2] + '/websocket');

創建實例時需要指定連接的地址，本例中使用了當前頁面的域名並指定了端口號。然後在服務端開啟這個地址監聽客戶端的連接，客戶端與服務端建立連接後就能發送消息，接收消息了。

2.連接成功事件監聽

socket.onopen = function() {
  console.log("連接成功！");
};

通過這個事件可以監聽到連接是否建立成功，這個事件觸發後表示瀏覽器與服務器已經成功建立連接，可以進行數據傳輸了。

3.接收服務端發來的消息

socket.onmessage = function(event) {
  console.log("接收到消息：" + event.data);
};

使用 onmessage 方法可以接收到服務端發來的消息，消息在 event 對象 Data 中，我們可以通過 event.data 獲取到。

4.發送消息給服務端

socket.send("Hello Server!");

使用 send 方法可以向服務器發送消息，這裡我們向服務端發送了一條簡單的消息 “Hello Server!”。

二、WebSocket API 的高級用法

WebSocket API 還支持更高級的特性，如分片、二進制傳輸、ping-pong 等等。

1、WebSocket 二進制傳輸

使用 WebSocket 接收和發送二進制數據非常方便。我們可以使用二進制數組和 Blob 對象來處理數據的傳輸。

const socket = new WebSocket("wss://my-websocket-server.com");

socket.binaryType = "arraybuffer";
socket.onmessage = function(event) {
  const data = new Uint8Array(event.data);
  console.log("接收到二進制數據：", data);
};

// 發送二進制數據

const array = new Uint8Array([1, 2, 3, 4, 5]);
socket.send(array.buffer);

// 或者

const blob = new Blob([array]);
socket.send(blob);

上述代碼演示了如何發送和接收二進制數據，需要注意的是，在發送二進制數據之前，需要使用 binaryType 屬性將 WebSocket 實例設置為可以接收二進制數據。

2、WebSocket 分片傳輸

WebSocket 分片傳輸可以將大型消息分成多個片段進行傳輸，防止網絡繁忙時傳輸過程中出現阻塞或延遲。

const socket = new WebSocket("wss://my-websocket-server.com");

const message = "Hello, world!";
const chunkSize = 1024;
const chunks = [];

while (message.length) {
  chunks.push(message.slice(0, chunkSize));
  message = message.slice(chunkSize);
}

chunks.forEach(function(chunk, index) {
  const isLastChunk = index === chunks.length - 1;

  socket.send(chunk, {
    binary: false,
    fin: isLastChunk
  });
});

上述代碼演示了如何將大型消息分成小塊從而進行更快速和可靠的傳輸。

3、Ping-Pong 消息

WebSocket 可以通過 ping-pong 消息維持連接狀態，避免連接斷開。

const socket = new WebSocket("wss://my-websocket-server.com");

socket.onmessage = function(event) {
  if (event.data === "ping") {
    socket.send("pong");
  }
};

setInterval(function() {
  socket.send("ping");
}, 1000);

上述代碼演示了如何定期發送 ping 消息，並在服務器返回 pong 消息後發送新的 ping 消息，從而維持連接狀態。

三、本地測試 WebSocket API

我們可以在本地使用一些庫或框架來模擬 WebSocket API 實現本地測試。

1、FakeWebSocket.js

FakeWebSocket.js 是一個可以在瀏覽器中模擬 WebSocket API 的庫，用於本地測試 WebSocket 應用程序。可以攔截 WebSocket 上的所有操作，從而檢查程序中發生的所有事情。

  const socket = new FakeWebSocket();

  socket.on("open", function(event) {
    console.log(event);
  });

  socket.on("message", function(event) {
    console.log(event.data);
  });

  socket.on("close", function(event) {
    console.log(event);
  });

  socket.send("Hello WebSocket Server!");

2、Socket.io

Socket.io 可以同時支持 WebSocket 和 HTTP 長輪詢等多種傳輸方式，並提供了很多開箱即用的功能，包括事件、命名空間、房間等等。我們可以使用它作為本地測試 WebSocket API 的工具。

npm install socket.io

使用以下代碼啟動 Socket.io 服務器。

const io = require("socket.io")(3000);

io.on("connection", function(socket) {
  console.log("A user connected.");

  socket.on("message", function(message) {
    console.log("Received message:", message);
  });

  socket.on("disconnect", function() {
    console.log("A user disconnected.");
  });
});

我們可以使用以下代碼連接到 Socket.io 服務器：

  const socket = io.connect("http://localhost:3000");

  socket.on("connect", function() {
    console.log("Connected to Socket.io server.");
  });

  socket.on("message", function(message) {
    console.log("Received message:", message);
  });

  socket.on("disconnect", function() {
    console.log("Disconnected from Socket.io server.");
  });

  socket.send("Hello Socket.io server!");

四、總結

WebSocket API 是一項非常重要的技術，它提供了一種實時且可擴展的通信方案，提高了 Web 應用的速度和交互性。文章闡述了 WebSocket API 的基本使用方法和高級特性，並提供了本地測試 WebSocket API 的兩種方案。希望本文能夠對大家了解 WebSocket API 有所幫助。