WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。

简单来说，它解决了 HTTP 协议“只能由客户端发起请求，服务器被动响应”的局限性，使得服务器可以主动向客户端推送数据。如果把 HTTP 比作“打电话”（你打过去，对方接，说完挂断，下次再打），那么 WebSocket 就像是“专线电话”（接通后，双方随时可以说话，且一直不挂断）。

为了让你更直观地理解，我为你整理了 WebSocket 的核心机制、与 HTTP 的区别以及应用场景。

🚀 核心原理：从“握手”到“长连接”

WebSocket 的工作流程主要分为三个阶段，其中最精彩的是它的“伪装”策略：

1. 握手阶段（基于 HTTP 升级）
   WebSocket 连接建立之初，其实是“伪装”成 HTTP 请求的。客户端会发送一个带有特殊请求头的 HTTP 请求，告诉服务器：“我想升级协议，咱们改用 WebSocket 聊天吧”。

   • 客户端请求： 发送 Connection: Upgrade 和 Upgrade: websocket 等头部信息。
   • 服务端响应： 如果服务器支持，会返回状态码 101 Switching Protocols。
   • 结果： 一旦握手成功，底层的 TCP 连接就被保留下来，但通信规则不再遵循 HTTP，而是切换到 WebSocket 协议。

2. 数据传输（轻量级帧）
   握手完成后，连接就变成了“长连接”。数据以帧（Frame）的形式传输，头部非常小（仅 2-14 字节），没有 HTTP 那么多冗余的 Header 信息，传输效率极高。

   • 全双工： 客户端和服务器可以随时互发消息，互不干扰。

3. 连接管理（心跳保活）
   为了防止连接因长时间无数据而被防火墙或路由器切断，WebSocket 内置了心跳机制（Ping/Pong）。客户端或服务器定期发送 Ping 帧，对方回复 Pong 帧，以此证明“我还活着”。

🆚 WebSocket vs HTTP：本质区别

为了让你一目了然，我做了一个对比表：

表格

🛠️ 前端如何使用（最简代码示例）

浏览器原生支持 WebSocket，使用非常简单。以下是一个标准的客户端实现流程：

javascript

// 1. 创建连接 (注意协议是 ws:// 或 wss://)
const ws = new WebSocket('ws://localhost:8080');

// 2. 连接成功（握手完成）
ws.onopen = () => {
    console.log('连接已建立');
    // 发送数据
    ws.send('Hello Server!');
};

// 3. 收到服务器消息
ws.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

// 4. 连接关闭
ws.onclose = () => {
    console.log('连接已断开');
};

// 5. 发生错误
ws.onerror = (err) => {
    console.error('发生错误:', err);
};

🌍 典型应用场景

根据搜索到的资料，WebSocket 主要应用于需要低延迟和高实时性的场景：

1. 即时通讯（IM）： 如网页版微信、在线客服系统，需要消息毫秒级送达。
2. 实时协作工具： 如腾讯文档、飞书文档，多人同时编辑时，光标位置和内容的同步必须依靠 WebSocket。
3. 金融行情： 股票、期货价格的实时跳动，使用 WebSocket 推送比传统的轮询（每隔几秒问一次服务器）效率高得多。
4. 在线游戏： 网页小游戏的实时对战，需要同步玩家的操作和位置。
5. 弹幕系统： 视频直播中的实时弹幕，成千上万的用户同时收发数据。

⚠️ 开发注意事项

如果你打算在生产环境使用 WebSocket，有几点非常重要：

• 安全性（WSS）： 就像 HTTP 需要升级为 HTTPS 一样，WebSocket 在生产环境必须使用 WSS（WebSocket Secure），它是基于 SSL/TLS 加密的，默认端口是 443，防止数据被窃听。
• Nginx 配置： 如果使用 Nginx 做反向代理，必须配置 Upgrade 和 Connection 头部，否则 WebSocket 握手会失败，退化成普通 HTTP 请求。
• 心跳与重连： 网络是不稳定的，客户端需要实现断线自动重连机制，并配合心跳检测来维持连接活跃。

总结来说，WebSocket 是现代 Web 开发中实现实时交互的基础设施，它让浏览器从“只能听命行事”变成了可以“随时对话”的智能终端。