从入门到实战：WebSocket 全解析

原创已于 2025-07-24 11:17:47 修改 · 1.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #网络协议 #网络

于 2025-07-22 15:28:10 首次发布

前端专栏收录该内容

6 篇文章

订阅专栏

作为一名有三年开发经验的工程师，我在项目中多次遇到 “实时通信” 的需求 —— 从简单的聊天功能到复杂的实时监控系统。而 WebSocket 作为解决 “实时双向通信” 的核心技术，一直是我工具箱里的高频工具。这篇文章我会结合实战经验，从基础原理到落地技巧，带你彻底搞懂 WebSocket。

一、为什么需要 WebSocket？—— 先聊聊 HTTP 的 “痛点”

在 WebSocket 出现之前，我们实现 “实时更新” 的需求时，通常会用这些方案：

轮询：客户端定时发送 HTTP 请求（比如每秒一次），服务器返回最新数据。
长轮询：客户端发送请求后，服务器 “hold 住” 连接，直到有新数据才返回，客户端收到后立即再发请求。

但这些方案有明显缺陷：

效率低：轮询会产生大量无效请求（比如服务器没新数据时，请求白发送）；长轮询虽然减少了请求次数，但仍需频繁建立 / 断开连接。
资源浪费：HTTP 每次请求都要带完整的头部信息（Cookie、User-Agent 等），而实际数据可能只有几字节，带宽利用率低。
实时性差：轮询的实时性取决于间隔时间（间隔 1 秒则延迟可能达 1 秒），长轮询虽然好一些，但服务器 “hold 住连接” 会占用资源。

而 WebSocket 的出现，就是为了彻底解决这些问题：
它能在客户端和服务器之间建立一条 “持久化的双向通信通道”，一旦连接建立，双方可以随时向对方发送数据，无需频繁握手。

二、WebSocket 核心原理：一次握手，永久连接

1. 什么是 WebSocket？

WebSocket 是一种 全双工通信协议（RFC 6455 标准），它基于 TCP 协议，允许客户端和服务器通过 单一 TCP 连接 进行实时双向数据传输。

它的核心特点：

双向通信：客户端和服务器都能主动发送数据（区别于 HTTP 的 “客户端请求 - 服务器响应” 单向模式）。
持久连接：连接建立后长期保持，无需重复握手（HTTP 每次请求都要握手）。
轻量高效：数据帧头部小（仅 2-14 字节），远小于 HTTP 头部（通常几百字节）。

2. 关键流程：从握手到通信

（1）握手：从 HTTP 升级到 WebSocket

WebSocket 连接的建立需要一次 “HTTP 升级握手”，流程如下：

客户端发送 HTTP GET 请求，请求头中携带升级协议的信息：

GET /ws HTTP/1.1
Host: example.com
Connection: Upgrade  # 表示要升级协议
Upgrade: websocket   # 目标协议是 WebSocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==  # 随机字符串，用于验证
Sec-WebSocket-Version: 13  # 协议版本（主流是 13）

服务器确认升级，返回 101 Switching Protocols 响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=  # 用客户端的 Key 计算出的验证值

握手成功后，TCP 连接保持，通信协议从 HTTP 切换为 WebSocket。

（2）数据传输：帧（Frame）结构

WebSocket 传输的数据以 “帧” 为单位，每个帧包含：

操作码（Opcode）：区分数据类型（文本帧 0x1、二进制帧 0x2、关闭帧 0x8 等）。
掩码（Mask）：客户端发送的数据必须掩码（防止缓存污染），服务器发送的无需掩码。
payload 数据：实际传输的内容（文本或二进制）。

这种帧结构设计让数据传输更高效，头部开销远低于 HTTP。

（3）连接关闭

任何一方可发送 关闭帧（Opcode=0x8） 主动关闭连接，对方收到后回复确认帧，最终释放 TCP 连接。

三、实战：从 0 搭建 WebSocket 服务

理论讲完，我们来实战。我会用 Node.js + ws 库 搭建服务器，配合前端原生 API 实现一个 “实时消息推送” 功能。

1. 服务器端：用 Node.js 快速搭建 WebSocket 服务

首先安装依赖：

npm install ws  # WebSocket 服务器库，轻量高效

核心代码（server.js）：

javascript

const WebSocket = require('ws');
// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

// 监听客户端连接事件
wss.on('connection', (ws) => {
  console.log('新客户端连接');

  // 监听客户端发送的消息
  ws.on('message', (data) => {
    console.log(`收到客户端消息：${data}`);
    // 向客户端回复消息
    ws.send(`服务器已收到：${data}`);

    // 广播消息（向所有连接的客户端发送）
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {  // 确保连接处于打开状态
        client.send(`[广播] ${data}`);
      }
    });
  });

  // 监听连接关闭事件
  ws.on('close', () => {
    console.log('客户端断开连接');
  });

  // 发送欢迎消息
  ws.send('欢迎连接 WebSocket 服务器！');
});

console.log('WebSocket 服务器已启动，端口 8080');

2. 客户端：浏览器原生 API 快速接入

前端无需依赖第三方库，直接用浏览器内置的 WebSocket 对象即可：

<!DOCTYPE html>
<html>
<body>
  <h3>WebSocket 客户端</h3>
  <input type="text" id="messageInput" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <div id="messageList"></div>

  <script>
    // 连接服务器（注意协议：ws 对应 http，wss 对应 https）
    const ws = new WebSocket('ws://localhost:8080');

    // 连接成功回调
    ws.onopen = () => {
      console.log('WebSocket 连接成功');
      addMessage('连接成功：可以开始聊天了～');
    };

    // 接收服务器消息
    ws.onmessage = (event) => {
      addMessage(`收到消息：${event.data}`);
    };

    // 连接关闭回调
    ws.onclose = () => {
      addMessage('连接已关闭');
    };

    // 错误处理
    ws.onerror = (error) => {
      addMessage(`发生错误：${error}`);
    };

    // 发送消息到服务器
    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value.trim();
      if (message) {
        ws.send(message);  // 发送消息
        input.value = '';
      }
    }

    // 显示消息到页面
    function addMessage(text) {
      const list = document.getElementById('messageList');
      const div = document.createElement('div');
      div.textContent = text;
      list.appendChild(div);
    }
  </script>
</body>
</html>

3. 运行效果

启动服务器：node server.js
打开客户端 HTML（可同时打开多个标签页模拟多客户端），输入消息发送：
- 单个客户端发送消息后，服务器会回复并广播给所有客户端；
- 关闭任一客户端，服务器会打印 “客户端断开连接”。

四、实战避坑指南：这些问题我踩过

WebSocket 看似简单，但落地时总会遇到各种 “坑”，分享几个高频问题及解决方案：

1. 连接不稳定？—— 心跳机制 + 自动重连

WebSocket 连接可能因网络波动、服务器重启等原因断开，必须实现 心跳检测 和 自动重连：

（1）心跳机制（防止连接被网关 / 代理关闭）

部分网关或代理会关闭 “长时间无数据传输” 的连接，解决办法是定时发送 “心跳包”：

javascript

// 客户端心跳示例
let heartBeatTimer;
function startHeartBeat() {
  heartBeatTimer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send('ping');  // 发送心跳包（内容自定义，比如 'ping'）
    }
  }, 30000);  // 每 30 秒发一次
}

// 服务器收到心跳包后回复 'pong'，客户端无需处理

（2）自动重连（连接断开后恢复）

javascript

// 客户端重连逻辑
let reconnectTimer;
function startReconnect() {
  reconnectTimer = setInterval(() => {
    if (ws.readyState !== WebSocket.OPEN) {
      console.log('尝试重连...');
      // 重新创建连接
      ws = new WebSocket('ws://localhost:8080');
      // 重新绑定事件（简化代码，实际需封装）
      ws.onopen = onopen;
      ws.onmessage = onmessage;
      // ...
    } else {
      clearInterval(reconnectTimer);  // 连接成功后停止重连
    }
  }, 5000);  // 每 5 秒尝试一次
}

// 连接关闭时触发重连
ws.onclose = () => {
  addMessage('连接已关闭，尝试重连...');
  startReconnect();
};

2. 跨域问题？—— 服务器端配置允许跨域

WebSocket 握手阶段基于 HTTP，会触发跨域检查。如果客户端和服务器域名 / 端口不同，需在服务器端配置跨域：

javascript

// Node.js ws 库配置跨域示例
const wss = new WebSocket.Server({ 
  port: 8080,
  // 验证请求头，允许跨域
  verifyClient: (info, done) => {
    const origin = info.origin;
    // 允许指定域名跨域（生产环境需严格限制）
    const allowedOrigins = ['http://localhost:5500', 'https://yourdomain.com'];
    if (allowedOrigins.includes(origin)) {
      return done(true);  // 允许连接
    }
    done(false, 403, '跨域请求被拒绝');  // 拒绝连接
  }
});

3. 如何区分用户？—— 身份认证 + 连接映射

实际项目中，需要知道 “哪个用户发送了消息”，通常有两种方案：

方案 1：握手时携带认证信息（推荐）
在连接时通过 query 参数传递 token：

javascript

// 客户端连接时带 token
const ws = new WebSocket(`ws://localhost:8080?token=${userToken}`);

// 服务器验证 token
wss.on('connection', (ws, request) => {
  const url = new URL(request.url, `http://${request.headers.host}`);
  const token = url.searchParams.get('token');
  // 验证 token 有效性（调用你的认证逻辑）
  const user = verifyToken(token);
  if (!user) {
    ws.close(4401, '未授权');  // 验证失败，关闭连接
    return;
  }
  // 存储用户与连接的映射（用于后续定向发送消息）
  ws.user = user;
});

方案 2：连接后发送认证消息
连接成功后，客户端主动发送 token，服务器验证通过后才处理后续消息。

4. 大文件传输？—— 分片 + 二进制帧

WebSocket 支持二进制帧（Opcode=0x2），适合传输图片、文件等二进制数据。但大文件需分片传输：

javascript

// 客户端分片发送大文件
async function sendLargeFile(file) {
  const chunkSize = 1024 * 1024;  // 1MB 分片
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    // 读取分片为 ArrayBuffer
    const buffer = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsArrayBuffer(chunk);
    });
    // 发送二进制帧
    ws.send(buffer);
    offset += chunkSize;
  }
  // 发送结束标记
  ws.send(JSON.stringify({ type: 'fileEnd', fileName: file.name }));
}

// 服务器拼接分片（简化示例）
wss.on('connection', (ws) => {
  let fileChunks = [];
  ws.on('message', (data) => {
    if (data instanceof ArrayBuffer) {  // 二进制分片
      fileChunks.push(data);
    } else {  // 结束标记
      const { type, fileName } = JSON.parse(data);
      if (type === 'fileEnd') {
        // 合并分片（实际需转成 Buffer 处理）
        const fileBuffer = Buffer.concat(fileChunks.map(c => Buffer.from(c)));
        // 保存文件或处理...
        fileChunks = [];  // 重置分片数组
      }
    }
  });
});