WebSocket是基于TCP的全双工通信协议，通过HTTP升级握手（101状态码）建立长连接，支持文本/二进制帧传输，JavaScript中用new WebSocket(url)创建，监听open、message、error、close事件，但需手动处理重连与readyState校验。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让浏览器和服务器之间可以持续保持连接，实时收发数据，不像 HTTP 那样每次请求都要重新建立连接。

WebSocket 和 HTTP 的关键区别

HTTP 是“请求-响应”模式：浏览器发一次请求，服务器回一次响应，连接就断了。WebSocket 是“长连接”：握手阶段用 HTTP 升级（Upgrade），成功后就切换成 WebSocket 协议，双方随时能主动发消息。

• 握手时用 HTTP 101 Switching Protocols 状态码表示升级成功
• 连接建立后，数据以帧（frame）形式传输，开销小、延迟低
• 支持文本（UTF-8）和二进制数据
• 自动处理重连、心跳、错误通知等需手动实现的逻辑（但实际项目中常需额外封装）

如何在 JavaScript 中建立 WebSocket 连接

使用 new WebSocket(url) 即可发起连接，url 必须是 ws://（非加密）或 wss://（加密，推荐，类似 HTTPS）开头。

示例：

连接过程有四个关键事件：

• open：连接成功，可以开始发送数据
• message：收到服务器发来的消息
• error：连接出错（如网络中断、URL 错误），不会自动重试
• close：连接被关闭（可能是服务端关闭，也可能是调用 ws.close()）

典型用法：

注意事项和常见问题

WebSocket 不是万能的，用之前要注意：

• 浏览器兼容性良好（现代浏览器都支持），但旧版 IE 不支持
• 服务端必须部署 WebSocket 服务（如 Node.js 的 ws 库、Socket.IO 后端，或 Nginx 正确配置 proxy_pass + Upgrade 头）
• 跨域不受限制（不像 Ajax），但服务端仍可校验 Origin 头做简单防护
• 没有内置重连机制，生产环境建议自己加重连逻辑（比如指数退避）
• 避免在未检查 ws.readyState === WebSocket.OPEN 时调用 send()，否则会报错

基本上就这些。WebSocket 本身 API 很轻量，难的是服务端配合和连接生命周期管理。