HTML5 API：HTML5 WebSocket - 完整教程与代码示例

客户端                              服务器
  │                                   │
  │  ─── HTTP Upgrade 请求 ────────→  │  握手阶段
  │  ←─── 101 Switching Protocols ──  │
  │                                   │
  │  ←────── 数据帧 ──────────────→  │  通信阶段
  │  ←────── 数据帧 ──────────────→  │  (双向自由发送)
  │  ←────── 数据帧 ──────────────→  │
  │                                   │
  │  ──── Close 帧 ───────────────→  │  关闭阶段
  │  ←──── Close 帧 ───────────────  │
  │                                   │

const ws = new WebSocket(url, protocols);

// 基本连接
const ws = new WebSocket('ws://localhost:8080');

// 安全连接
const wss = new WebSocket('wss://example.com/ws');

// 指定子协议
const ws = new WebSocket('wss://example.com/ws', ['chat', 'superchat']);

// 发送文本
ws.send('Hello Server');

// 发送 JSON
ws.send(JSON.stringify({ type: 'chat', message: '你好' }));

// 发送二进制数据
const buffer = new ArrayBuffer(4);
ws.send(buffer);

// 发送 Blob
ws.send(new Blob(['binary data'], { type: 'application/octet-stream' }));

// 接收消息
ws.onmessage = function(e) {
    if (typeof e.data === 'string') {
        console.log('文本消息:', e.data);
    } else if (e.data instanceof Blob) {
        console.log('Blob 数据:', e.data);
    } else if (e.data instanceof ArrayBuffer) {
        console.log('ArrayBuffer:', e.data);
    }
};

ws.onopen = function() {
    console.log('连接已建立');
    ws.send('连接成功!');
};

ws.onclose = function(e) {
    console.log('连接关闭:', e.code, e.reason);
};

ws.onerror = function(e) {
    console.error('WebSocket 错误');
};

ws.close(1000, '正常关闭');

// 心跳保活,检测连接是否存活
class WebSocketWithHeartbeat {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.heartbeatInterval = 30000;
        this.heartbeatTimer = null;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
    }

    connect() {
        this.ws = new WebSocket(this.url);

        this.ws.onopen = () => {
            this.reconnectAttempts = 0;
            this.startHeartbeat();
        };

        this.ws.onclose = () => {
            this.stopHeartbeat();
            this.attemptReconnect();
        };

        this.ws.onerror = () => {
            this.stopHeartbeat();
        };

        this.ws.onmessage = (e) => {
            if (e.data === 'pong') return; // 心跳响应
            this.onMessage(e.data);
        };
    }

    startHeartbeat() {
        this.heartbeatTimer = setInterval(() => {
            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                this.ws.send('ping');
            }
        }, this.heartbeatInterval);
    }

    stopHeartbeat() {
        if (this.heartbeatTimer) {
            clearInterval(this.heartbeatTimer);
            this.heartbeatTimer = null;
        }
    }

    attemptReconnect() {
        if (this.reconnectAttempts >= this.maxReconnectAttempts) return;
        this.reconnectAttempts++;
        const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
        setTimeout(() => this.connect(), delay);
    }

    onMessage(data) { /* 覆盖此方法 */ }

    send(data) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(data);
        }
    }

    close() {
        this.stopHeartbeat();
        this.reconnectAttempts = this.maxReconnectAttempts; // 阻止重连
        if (this.ws) this.ws.close(1000, 'Normal closure');
    }
}

// 离线时缓存消息,上线后重发
class WebSocketWithQueue {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.messageQueue = [];
    }

    connect() {
        this.ws = new WebSocket(this.url);

        this.ws.onopen = () => {
            this.flushQueue();
        };
    }

    send(data) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(data);
        } else {
            this.messageQueue.push(data);
        }
    }

    flushQueue() {
        while (this.messageQueue.length > 0) {
            const data = this.messageQueue.shift();
            this.ws.send(data);
        }
    }
}