WebSocket是浏览器与服务器间的全双工持久连接，通过一次HTTP Upgrade握手建立，支持低延迟双向通信、轻量帧传输及文本/二进制数据，适用于聊天、实时通知等场景。
WebSocket 是浏览器与服务器之间建立的全双工、持久化连接，用于实现实时双向通信。它不像 HTTP 那样每次请求都要重新握手，而是在一次 TCP 连接建立后，双方可随时主动收发数据，延迟低、开销小，适合聊天、实时通知、协同编辑等场景。
WebSocket 的核心特点
• 单次握手，长期连接：客户端通过 ws:// 或 wss:// 发起升级请求（HTTP Upgrade），服务端同意后，协议切换为 WebSocket，后续通信不再走 HTTP。
• 双向实时通信：服务器可以主动向客户端推送消息，无需轮询或长连接模拟。
• 轻量帧格式：数据以帧（frame）为单位传输，头部仅 2–14 字节，比 HTTP 封装更精简。
• 支持文本和二进制数据：可通过 send() 发送字符串或 ArrayBuffer/Blob。
前端如何创建并使用 WebSocket
在浏览器中直接使用原生 WebSocket 构造函数：
```js
const socket = new WebSocket('wss://api.example.com/chat');
socket.onopen = () => {
console.log('连接已建立');
socket.send(JSON.stringify({ type: 'join', room: 'general' }));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('收到消息:', data);
};
socket.onerror = (error) => {
console.error('连接出错:', error);
};
socket.onclose = () => {
console.log('连接已关闭');
};
```
注意：
• 必须监听 onopen 后再调用 send()，否则会报错；
• event.data 可能是字符串、ArrayBuffer 或 Blob，需根据服务端约定判断；
• 建议封装重连逻辑（如指数退避），因为网络波动会导致自动断开。
后端如何支持 WebSocket（以 Node.js + ws 库为例）
安装依赖：npm install ws
```js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws, req) => {
console.log('新客户端接入');
ws.on('message', (data) => {
const msg = JSON.parse(data);
console.log('收到:', msg);
// 广播给所有客户端（简单示例）
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ ...msg, from: 'server', time: Date.now() }));
}
});
});
ws.on('close', () => console.log('客户端断开'));
});
```
关键点：
• 每个连接对应一个 ws 实例，需自行管理连接状态和广播逻辑；
• 生产环境建议配合 Redis 实现多进程/多实例间的消息同步；
• 注意校验 Origin、鉴权（如通过 URL 参数或握手头带 token）防止未授权接入。
常见问题与注意事项
• 兼容性：现代浏览器均支持，IE10+ 也支持，但不支持 HTTP/2 环境下的 WebSocket 升级（需确保反向代理如 Nginx 正确配置 Upgrade 和 Connection 头）。
• 心跳保活：长时间空闲可能被中间代理断连，建议客户端和服务端定期互发 ping/pong（ws 库默认开启）。
• 错误处理：不要只依赖 onerror，它不一定会触发；应结合 onclose 的 code 和 reason 判断异常类型（如 1006 表示连接异常中断）。
• 替代方案参考：若需兼容极老环境，可降级为 Server-Sent Events（SSE，仅服务端推）或长轮询，但体验和性能明显下降。
