本速查表基于 WebSocket 协议规范及前端实践场景整理，涵盖核心对象属性、方法、事件回调及错误处理方案，适用于日常开发查阅。

一、WebSocket 核心对象与初始化

1. 核心对象

WebSocket：浏览器内置构造函数，用于创建 WebSocket 连接实例，是所有操作的基础。

2. 初始化语法

// 基础语法：ws（非加密）或 wss（加密，类似 HTTPS）
const socket = new WebSocket('ws://example.com'); 
// 加密连接示例（生产环境推荐）
const secureSocket = new WebSocket('wss://example.com'); 

• 参数说明：URL 必须以 ws:// 或 wss:// 开头，指向支持 WebSocket 协议的服务器地址。

二、WebSocket 核心属性

三、WebSocket 核心方法

四、WebSocket 核心事件回调

WebSocket 通过“事件驱动”处理连接生命周期，需通过绑定回调函数响应各类状态变化。

五、常见错误与解决方案

六、关键状态码说明

WebSocket 定义了标准化状态码，用于标识连接关闭原因，开发中可通过 event.code 获取：

七、实战常用工具函数

1. 连接状态检测

// 检查连接是否可发送数据
function isSocketAvailable(socket) {
  return socket && socket.readyState === WebSocket.OPEN;
}

2. 安全发送数据

// 确保连接打开后再发送数据
function safeSend(socket, data) {
  if (isSocketAvailable(socket)) {
    socket.send(typeof data === 'object' ? JSON.stringify(data) : data);
  } else {
    console.error('WebSocket 连接未打开，发送失败');
  }
}

3. 心跳机制实现

// 为 socket 添加心跳（每 30s 发送 Ping，5s 未响应则重连）
function addHeartbeat(socket, reconnectFn) {
  let heartbeatTimer;
  let checkTimer;

  // 发送心跳
  function sendPing() {
    if (isSocketAvailable(socket)) {
      socket.send(JSON.stringify({ type: 'ping' }));
      // 等待 Pong 响应
      checkTimer = setTimeout(() => {
        socket.close(1006, '心跳无响应');
        reconnectFn(); // 重连函数
      }, 5000);
    }
  }

  // 启动心跳
  heartbeatTimer = setInterval(sendPing, 30000);

  // 收到 Pong 时清除检查计时器
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'pong') {
      clearTimeout(checkTimer);
    }
  };

  // 关闭时清除计时器
  socket.onclose = () => {
    clearInterval(heartbeatTimer);
    clearTimeout(checkTimer);
  };
}