萬字詳解，帶你徹底掌握 WebSocket 用法（至尊典藏版）寫的不錯

WebSocket是一種協議，用于在Web應用程序和服務器之間建立實時、雙向的通信連接。它通過一個單一的TCP連接提供了持久化連接，這使得Web應用程序可以更加實時地傳遞數據。WebSocket協議最初由W3C開發，并于2011年成為標準。

WebSocket的優勢包括：

• 實時性： 由于WebSocket的持久化連接，它可以實現實時的數據傳輸，避免了Web應用程序需要不斷地發送請求以獲取最新數據的情況。

• 雙向通信： WebSocket協議支持雙向通信，這意味著服務器可以主動向客戶端發送數據，而不需要客戶端發送請求。

• 減少網絡負載： 由于WebSocket的持久化連接，它可以減少HTTP請求的數量，從而減少了網絡負載。

WebSocket的劣勢包括：

• 需要瀏覽器和服務器都支持： WebSocket是一種相對新的技術，需要瀏覽器和服務器都支持。一些舊的瀏覽器和服務器可能不支持WebSocket。

• 需要額外的開銷： WebSocket需要在服務器上維護長時間的連接，這需要額外的開銷，包括內存和CPU。

• 安全問題： 由于WebSocket允許服務器主動向客戶端發送數據，可能會存在安全問題。服務器必須保證只向合法的客戶端發送數據。

WebSocket 協議是一種基于TCP的協議，用于在客戶端和服務器之間建立持久連接，并且可以在這個連接上實時地交換數據。WebSocket協議有自己的握手協議，用于建立連接，也有自己的數據傳輸格式。

當客戶端發送一個 WebSocket 請求時，服務器將發送一個協議響應以確認請求。在握手期間，客戶端和服務器將協商使用的協議版本、支持的子協議、支持的擴展選項等。一旦握手完成，連接將保持打開狀態，客戶端和服務器就可以在連接上實時地傳遞數據。

WebSocket 協議使用的是雙向數據傳輸，即客戶端和服務器都可以在任意時間向對方發送數據，而不需要等待對方的請求。它支持二進制數據和文本數據，可以自由地在它們之間進行轉換。

總之，WebSocket協議是一種可靠的、高效的、雙向的、持久的通信協議，它適用于需要實時通信的Web應用程序，如在線游戲、實時聊天等。

WebSocket 生命周期描述了 WebSocket 連接從創建到關閉的過程。一個 WebSocket 連接包含以下四個主要階段：

• 連接建立階段（Connection Establishment）： 在這個階段，客戶端和服務器之間的 WebSocket 連接被建立。客戶端發送一個 WebSocket 握手請求，服務器響應一個握手響應，然后連接就被建立了。

• 連接開放階段（Connection Open）： 在這個階段，WebSocket 連接已經建立并開放，客戶端和服務器可以在連接上互相發送數據。

• 連接關閉階段（Connection Closing）： 在這個階段，一個 WebSocket 連接即將被關閉。它可以被客戶端或服務器發起，通過發送一個關閉幀來關閉連接。

• 連接關閉完成階段（Connection Closed）： 在這個階段，WebSocket 連接已經完全關閉。客戶端和服務器之間的任何交互都將無效。

“

需要注意的是，WebSocket 連接在任何時候都可能關閉，例如網絡故障、服務器崩潰等情況都可能導致連接關閉。因此，需要及時處理 WebSocket 連接關閉的事件，以確保應用程序的可靠性和穩定性。

下面是一個簡單的 WebSocket 生命周期示意圖：

在這個示意圖中，客戶端向服務器發送一個 WebSocket 握手請求，服務器響應一個握手響應，連接就被建立了。一旦連接建立，客戶端和服務器就可以在連接上互相發送數據，直到其中一方發送一個關閉幀來關閉連接。在關閉幀被接收后，連接就會被關閉，WebSocket 連接關閉完成。

WebSocket 的消息格式與 HTTP 請求和響應的消息格式有所不同。WebSocket 的消息格式可以是文本或二進制數據，并且 WebSocket 消息的傳輸是在一個已經建立的連接上進行的，因此不需要再進行 HTTP 請求和響應的握手操作。

WebSocket 消息格式由兩個部分組成：消息頭和消息體。

消息頭包含以下信息：

• FIN： 表示這是一條完整的消息，一般情況下都是1。

• RSV1、RSV2、RSV3： 暫時沒有使用，一般都是0。

• Opcode： 表示消息的類型，包括文本消息、二進制消息等。

• Mask： 表示消息是否加密。

• Payload length： 表示消息體的長度。

• Masking key： 僅在消息需要加密時出現，用于對消息進行解密。

消息體就是實際傳輸的數據，可以是文本或二進制數據。

WebSocket API 是用于在 Web 應用程序中創建和管理 WebSocket 連接的接口集合。WebSocket API 由瀏覽器原生支持，無需使用額外的 JavaScript 庫或框架，可以直接在 JavaScript 中使用。

下面是一些常用的 WebSocket API：

WebSocket 構造函數： WebSocket 構造函數用于創建 WebSocket 對象。它接受一個 URL 作為參數，表示要連接的 WebSocket 服務器的地址。例如：

let ws = new WebSocket('ws://example.com/ws');

WebSocket.send() 方法： WebSocket.send() 方法用于向服務器發送數據。它接受一個參數，表示要發送的數據。數據可以是字符串、Blob 對象或 ArrayBuffer 對象。例如：

ws.send('Hello, server!');

WebSocket.onopen 事件： WebSocket.onopen 事件在 WebSocket 連接成功建立時觸發。例如：

ws.onopen = function() {  console.log('WebSocket 連接已經建立。');};

WebSocket.onmessage 事件： WebSocket.onmessage 事件在接收到服務器發送的消息時觸發。它的 event 對象包含一個 data 屬性，表示接收到的數據。例如：

ws.onmessage = function(event) {  console.log('收到服務器消息：', event.data);};

WebSocket.onerror 事件： WebSocket.onerror 事件在 WebSocket 連接出現錯誤時觸發。例如：

ws.onerror = function(event) {  console.error('WebSocket 連接出現錯誤：', event);};

WebSocket.onclose 事件： WebSocket.onclose 事件在 WebSocket 連接被關閉時觸發。例如：

ws.onclose = function() {  console.log('WebSocket 連接已經關閉。');};

以上是一些常用的 WebSocket API。

依賴：

<dependency>

    <groupId>javax.websocket</groupId>

    <artifactId>javax.websocket-api</artifactId>

    <version>1.1</version>

</dependency>

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

public class WebSocketServer {

    @OnOpen

    public void onOpen(Session session) {

        System.out.println("Connection opened: " + session.getId());

        sessions.add(session);

    }

    @OnMessage

    public void onMessage(Session session, String message) throws IOException {

        System.out.println("Received message: " + message);

        session.getBasicRemote().sendText("Server received: " + message);

    }

    @OnClose

    public void onClose(Session session) {

        System.out.println("Connection closed: " + session.getId());

        sessions.remove(session);

    }

    private static final Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

}