WebSocket 是一种在单个 TCP 连接上实现全双工通信的协议，让服务器能够主动向客户端推送数据，告别低效的轮询。

核心概念 Link to heading

WebSocket（协议标识 ws:// 或加密的 wss://）解决了 HTTP 请求-响应模型的单向限制。建立连接后，客户端和服务端可以随时互相发送数据，无需等待对方先发起请求。

握手过程：客户端发送 HTTP 请求，携带 Upgrade: websocket 头；服务端响应 101 Switching Protocols，连接升级为 WebSocket，后续数据以帧（frame）格式传输。

适用场景：

  • 实时聊天、消息通知
  • 在线游戏、协作编辑
  • 实时监控面板、数据流推送
  • 远程控制、即时通讯

WebSocket vs HTTP：

维度HTTPWebSocket
通信方向客户端请求 → 服务端响应全双工，双向随时
连接生命周期短连接（请求结束即断开）持久连接
头部开销每次请求携带完整 Header握手后帧头极小（2-14 字节）
服务端推送不支持（需轮询/SSE）原生支持
协议标识http:// / https://ws:// / wss://

可以用 mermaid 图来直观展示握手过程：

sequenceDiagram participant Client as 客户端 participant Server as 服务端 Client->>Server: GET /chat HTTP/1.1\nUpgrade: websocket\nConnection: Upgrade\nSec-WebSocket-Key: xxx Server-->>Client: HTTP/1.1 101 Switching Protocols\nUpgrade: websocket Note over Client,Server: 连接已建立，进入 WebSocket 模式 Client->>Server: [Frame] 你好！ Server-->>Client: [Frame] 欢迎加入聊天 Client->>Server: [Frame] 最近如何？ Server-->>Client: [Frame] 一切正常

安装配置 Link to heading

浏览器端原生支持 WebSocket API，无需安装任何库。

服务端（以 Node.js 为例）使用 ws 库：

npm install ws

实际使用 Link to heading

服务端：Node.js + ws Link to heading

import { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (ws) => {
  console.log("客户端已连接");

  ws.on("message", (data) => {
    console.log("收到消息:", data.toString());
    // 广播给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === 1) {
        client.send(`广播: ${data}`);
      }
    });
  });

  ws.send("欢迎连接！");
});

console.log("WebSocket 服务运行在 ws://localhost:8080");

客户端：浏览器原生 API Link to heading

const ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("连接已建立");
  ws.send("你好，服务端！");
};

ws.onmessage = (event) => {
  console.log("收到消息:", event.data);
};

ws.onclose = () => {
  console.log("连接已关闭");
};

ws.onerror = (error) => {
  console.error("WebSocket 错误:", error);
};

核心 API 只有四个：onopen、onmessage、onclose、onerror，覆盖了连接生命周期。

官方链接 Link to heading

[1] https://datatracker.ietf.org/doc/html/rfc6455

[2] https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

[3] https://github.com/websockets/ws

Signature Link to heading

本文由 AI 生成，不保证正确，仅作参考