WebSocket是基于TCP的全双工通信协议，支持持久连接、双向实时消息、轻量帧头，需手动处理重连与JSON序列化，适用于聊天、实时通知等场景。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让浏览器和服务器之间可以持续保持连接，实现低延迟、双向实时数据交换。相比传统的 HTTP 轮询或长轮询，WebSocket 减少了频繁建立连接的开销，更适合聊天、实时通知、协同编辑、股票行情等场景。

WebSocket 的核心特点

• 持久连接：客户端与服务器握手成功后，连接长期保持，不随每次请求断开。
• 双向通信：服务器可主动向客户端推送消息，无需等待客户端请求。
• 轻量高效：帧头仅 2–14 字节，比 HTTP 头小得多，适合高频小数据传输。
• 基于 TCP：底层可靠，但不内置重连、消息确认等机制，需应用层补充。

JavaScript 中创建 WebSocket 连接

使用 new WebSocket(url) 即可初始化连接，URL 以 ws://（非加密）或 wss://（加密，推荐）开头：

// 示例：连接本地测试服务
const socket = new WebSocket('wss://echo.websocket.org');

关键事件监听：

• onopen：连接建立成功，可在此发送首次消息。
• onmessage：收到服务器消息，event.data 包含内容（可能是字符串或 Blob）。
• onerror：发生网络或协议错误，通常不表示连接断开。
• onclose：连接关闭，可通过 event.code 和 event.reason 判断原因。

发送与接收消息的实用写法

WebSocket 默认只支持字符串和 ArrayBuffer（即二进制），如需传 JSON，需手动序列化/解析：

// 发送 JSON 数据
socket.onopen = () => {
  socket.send(JSON.stringify({ type: 'login', user: 'Alice' }));
};

// 接收并解析
socket.onmessage = (event) => {
  try {
    const data = JSON.parse(event.data);
    console.log('收到:', data);
  } catch (e) {
    console.warn('非 JSON 消息:', event.data);
  }
};

简单可靠的连接管理建议

原生 WebSocket 不自带重连，实际项目中建议封装基础逻辑：

• 使用 setTimeout 在 onclose 后延迟重连，避免密集失败。
• 记录连接状态（如 isConnected 标志），防止重复 send 导致报错。
• 发送前检查 socket.readyState === WebSocket.OPEN。
• 关闭前调用 socket.close(code, reason)，便于服务端日志归因。