WebSocket 是一种基于持久化连接实现双向实时通信的技术，适用于聊天、游戏等场景。其使用流程包括建立连接、数据交互、关闭连接，同时需处理断线重连、心跳检测及安全性问题。
一、基础使用流程- 建立连接客户端发起握手请求，服务器响应后建立持久化连接。
// 客户端代码示例const socket = new WebSocket('ws://example.com/socketserver');socket.addEventListener('open', () => { console.log('连接已建立');});- 数据交互连接成功后，双方可随时发送文本或二进制数据。
// 发送数据socket.send('Hello, Server!');// 接收数据socket.addEventListener('message', (event) => { console.log('收到消息:', event.data);});- 关闭连接任一方可主动关闭连接，需监听 close 事件。
socket.addEventListener('close', () => { console.log('连接已关闭');});socket.close(); // 主动关闭二、断线重连机制网络不稳定时需实现自动重连，采用指数退避策略避免频繁请求：
- 监听事件：通过 close 和 error 事件检测断开原因。
- 重连逻辑：每次失败后延迟时间翻倍，直至达到最大间隔（如30秒）。
let reconnectInterval = 1000; // 初始间隔1秒socket.addEventListener('close', () => { setTimeout(() => { reconnectInterval = Math.min(reconnectInterval * 2, 30000); socket = new WebSocket('ws://example.com/socketserver'); }, reconnectInterval);});三、心跳检测实现通过定时发送 ping/pong 消息验证连接活性：
- 客户端定时发送 ping：每30秒发送一次，若60秒内未收到 pong 则断开。
- 服务器响应 pong：收到 ping 后立即回复。
- 清理定时器：连接关闭时清除所有定时任务。
let pingInterval = 30000, timeout = 60000;let pingTimer, timeoutTimer;function sendPing() { socket.send('ping'); timeoutTimer = setTimeout(() => { socket.close(); // 超时未响应则断开 }, timeout);}socket.addEventListener('open', () => { pingTimer = setInterval(sendPing, pingInterval);});socket.addEventListener('message', (event) => { if (event.data === 'pong') clearTimeout(timeoutTimer);});socket.addEventListener('close', () => { clearInterval(pingTimer); clearTimeout(timeoutTimer);});四、安全性增强措施使用 WSS 协议将 ws:// 替换为 wss://，通过 TLS/SSL 加密数据传输，防止中间人攻击。
const socket = new WebSocket('wss://example.com/socketserver');身份验证
Token 认证：在握手请求的 URL 或 HTTP 头中携带 Token。
HTTP 认证：通过 Basic/Digest 认证验证用户身份。
输入验证与权限控制
对客户端发送的数据进行格式校验，防止注入攻击。
根据用户角色限制可访问的 WebSocket 功能（如仅管理员可发送全局通知）。
五、应用场景与优势- 实时性要求高：在线聊天、实时游戏、股票行情等。
- 双向通信需求：服务器可主动推送数据（如通知、更新），无需客户端轮询。
- 资源效率：相比 HTTP 长轮询，WebSocket 减少不必要的请求，降低延迟和带宽消耗。
总结WebSocket 的核心在于持久化连接和双向通信能力，但需通过断线重连、心跳检测保障稳定性，并通过 WSS、身份验证等机制确保安全性。实际开发中需结合具体场景调整参数（如心跳间隔、重连策略），并处理边界情况（如网络切换、服务器重启）。
