websocket是一对一即时聊天系统的核心协议，通过长连接实现双向实时通信；服务端需管理用户连接映射、身份校验与清理；客户端须处理心跳、重连与状态缓存；生产环境需wss加密、反向代理适配及分布式扩展。
WebSocket 是 HTML5 提供的全双工通信协议，适合构建低延迟、高实时性的一对一即时聊天系统。核心在于客户端与服务端建立长连接，绕过 HTTP 请求-响应模式，实现消息的双向主动推送。
服务端：基于 WebSocket 的连接管理与路由
服务端需维护在线用户状态和连接映射关系，关键点是为每个用户分配唯一标识（如 userId），并将该标识与当前 WebSocket 连接实例绑定。
- 使用 Map 或 Redis 存储 userId → socket connection 映射，支持快速查找目标连接
- 连接建立时校验用户身份（如通过 token 解析出 userId），拒绝非法连接
- 连接关闭或异常断开时及时清理映射，避免内存泄漏和消息投递失败
- 不依赖会话（session）或 Cookie，因 WebSocket 协议本身无状态，认证必须在握手阶段完成（如升级请求头中携带 token）
消息协议：轻量、可扩展的 JSON 格式设计
客户端与服务端约定统一的消息结构，确保一对一对发、可识别类型、带必要元信息。
- 典型字段包括：type（如 "msg", "online", "offline"）、from（发送方 userId）、to（接收方 userId）、content（文本/JSON 字符串）、timestamp（毫秒时间戳）
- 服务端收到消息后，校验 from 和 to 是否合法、是否在线；仅向目标连接 send()，不广播
- 支持扩展字段如 msgId（用于前端去重或消息状态追踪）、readStatus（已读回执）
客户端：连接维持、心跳与错误恢复
浏览器端需主动处理网络波动、页面刷新、标签页切换等现实场景，保障聊天体验连续。
- 使用 WebSocket 对象 建立连接，onopen/onmessage/onclose/onerror 四个事件必须完整监听
- 实现心跳机制：每隔 30 秒 send() 一个 ping 消息，服务端响应 pong；超时未收到 pong 则主动 close 并重连
- 页面卸载前调用 socket.close()，避免服务端残留无效连接；重新进入时检查 socket.readyState，自动重连
- 消息发送前判断 readyState === WebSocket.OPEN，否则缓存至队列，待重连成功后补发
安全与部署：HTTPS + WSS + 反向代理适配
生产环境必须启用加密传输，并解决跨域、负载均衡等实际问题。
- 前端必须使用 wss:// 协议连接，HTTP 页面无法建立 ws 连接（浏览器策略限制）
- Nginx 等反向代理需显式配置 WebSocket 升级头：proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";
- 服务端校验 Origin 头防恶意跨站连接；敏感操作（如获取历史消息）仍需独立接口 + JWT 鉴权，不依赖 WebSocket 连接本身
- 单机部署可满足小规模场景；用户量大时，需借助 Redis Pub/Sub 或分布式 session 实现多节点间消息中转
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
