WebSocket是浏览器与服务器间全双工、持久化的实时通信协议，通过HTTP握手升级后长期连接，支持服务端主动推送、轻量数据帧及文本/二进制传输。
WebSocket 是浏览器与服务器之间建立的全双工、持久化通信通道，能实现真正的实时数据交换，比轮询或长连接更高效。
WebSocket 和 HTTP 的核心区别
HTTP 是“请求-响应”模式，每次通信都要重新握手，不适合高频交互。WebSocket 在初始 HTTP 握手后升级为独立协议，连接保持打开状态，双方可随时主动发消息。
- 一次连接，长期有效（除非异常断开或手动关闭）
- 服务端可以主动推送数据，无需客户端反复询问
- 数据帧轻量，头部开销小，适合小数据频繁传输
- 支持文本（UTF-8）和二进制数据
前端如何创建并使用 WebSocket
浏览器原生支持 WebSocket 构造函数，用法简单：
const ws = new WebSocket('wss://example.com/chat'); // wss 是加密版
ws.onopen = () => {
console.log('连接成功');
ws.send('Hello Server');
};
ws.onmessage = (event) => {
console.log('收到消息：', event.data); // 可能是字符串或 Blob
};
ws.onerror = (error) => {
console.error('连接出错', error);
};
ws.onclose = () => {
console.log('连接已关闭');
};
注意：必须等 onopen 触发后再调用 send()，否则会报错；发送前建议检查 ws.readyState === WebSocket.OPEN。
立即学习“Java免费学习笔记（深入）”；
后端需配合 WebSocket 服务（以 Node.js + ws 库为例）
浏览器不能直接连数据库或文件系统，必须有服务端 WebSocket 服务器中转：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws, req) => {
console.log('新用户接入');
ws.on('message', (data) => {
console.log('收到：', data.toString());
// 广播给所有在线用户（简单示例）
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播：${data}`);
}
});
});
ws.on('close', () => {
console.log('用户断开');
});
});
真实项目中通常用成熟的方案，如 Socket.IO（兼容性更好、自带心跳和降级）、ws（轻量高效）、或云服务（如 Pusher、Firebase Realtime Database）。
实际开发中要注意的关键点
WebSocket 看似简单，但线上容易出问题：
- 网络不稳定时会自动断开，需实现重连逻辑（带退避策略，比如 1s、2s、4s 间隔）
- 避免内存泄漏：监听器要配对移除，或用箭头函数+实例绑定确保
this正确 - 服务端需管理连接状态（如用户 ID 绑定、房间分组、超时踢出）
- 敏感操作仍需鉴权——WebSocket 连接建立时可通过 URL 参数或 Cookie 传 token，服务端验证后再接受通信
基本上就这些。WebSocket 不复杂，但容易忽略容错和状态管理，真正稳定运行靠的是细节处理。
