1. 什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，解决了传统 HTTP 轮询带来的延迟和资源浪费问题。
2. WebSocket 与 HTTP 的区别
- 连接方式：HTTP 是无状态、短连接；WebSocket 是长连接。
- 通信模式：HTTP 只能客户端发起请求；WebSocket 支持双向实时通信。
- 头部开销：HTTP 每次请求都携带完整头部；WebSocket 建立连接后只需少量帧头。
- 适用场景：HTTP 适合请求-响应模式；WebSocket 适合实时性要求高的场景。
3. WebSocket 协议握手过程
WebSocket 连接通过 HTTP 升级请求建立：
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13服务器响应：
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=4. WebSocket 核心 API（JavaScript）
// 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:8080'); // 连接打开 socket.onopen = function(event) { console.log('连接已建立'); socket.send('Hello Server!'); }; // 接收消息 socket.onmessage = function(event) { console.log('收到消息:', event.data); }; // 连接关闭 socket.onclose = function(event) { console.log('连接关闭:', event.code, event.reason); }; // 错误处理 socket.onerror = function(error) { console.error('WebSocket 错误:', error); };5. 服务端实现示例（Node.js）
const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('客户端已连接'); ws.on('message', function incoming(message) { console.log('收到客户端消息:', message); // 广播给所有客户端 wss.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(`服务器收到: ${message}`); } }); }); ws.send('欢迎连接到 WebSocket 服务器！'); });6. 心跳机制与断线重连
为保证连接稳定性，需要实现心跳检测：
// 心跳检测 let heartbeatInterval; const HEARTBEAT_INTERVAL = 30000; // 30秒 function startHeartbeat() { heartbeatInterval = setInterval(() => { if (socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'ping' })); } }, HEARTBEAT_INTERVAL); } // 断线重连 function reconnect() { setTimeout(() => { console.log('尝试重连...'); initWebSocket(); // 重新初始化连接 }, 5000); }7. 实际应用场景
- 实时聊天：微信、钉钉等即时通讯工具
- 在线协作：文档协同编辑、白板应用
- 实时数据监控：股票行情、物联网设备状态
- 在线游戏：多玩家实时对战
- 通知推送：系统通知、消息提醒
8. 安全注意事项
- 使用 WSS（WebSocket Secure）替代 WS，加密传输数据
- 验证 Origin 头部，防止跨站 WebSocket 劫持
- 对消息内容进行过滤和验证，防止注入攻击
- 设置合理的消息大小限制，防止内存耗尽
- 实现身份验证和授权机制
9. 性能优化建议
- 使用二进制帧传输大量数据（ArrayBuffer、Blob）
- 实现消息压缩，减少带宽消耗
- 合理设置心跳间隔，平衡实时性和资源消耗
- 使用连接池管理大量并发连接
- 监控连接状态，及时清理僵尸连接
10. 总结
WebSocket 是现代 Web 应用中实现实时通信的核心技术。它通过建立持久连接，实现了服务器与客户端之间的双向实时数据交换，为实时聊天、在线协作、数据监控等场景提供了高效解决方案。在实际使用中，需要结合心跳机制、断线重连、安全防护等措施，确保连接的稳定性和安全性。
