原生WebSocket API可构建轻量低延迟实时通知系统，关键在于连接管理、消息结构和异常兜底；HTTP轮询是客户端被动询问，WebSocket实现服务端主动即时推送。

直接用原生 WebSocket API 就能搭出轻量、低延迟的实时通知系统，关键不在“能不能”，而在连接管理、消息结构和异常兜底这三块。HTTP 轮询是客户端不断问“有新消息吗”，WebSocket 是服务端一有就立刻喊你——这才是通知该有的样子。

建立连接与状态管理

前端用 new WebSocket(url) 发起握手，URL 通常带身份标识（如用户 ID），方便后端识别归属：

• 推荐使用 wss://（加密 WebSocket）而非 ws://，尤其在生产环境
• 连接成功后监听 open 事件，可立即发一个登录鉴权帧（比如 {"type":"auth","token":"xxx"}）
• 用 readyState 判断当前状态：0=CONNECTING、1=OPEN、2=CLOSING、3=CLOSED，避免向关闭中的连接发消息
• 断开时不要静默重连，先检查 event.code 和 event.reason，网络抖动（如 code=1006）可自动重试，认证失败（code=4001）则需跳转登录页

定义清晰的消息协议

通知类消息不需要复杂格式，但必须统一字段，便于前端快速分发和 UI 渲染：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 每条消息建议含 type（如 "notify"、"message"、"system"）、id（唯一标识，用于去重或更新）、content（展示文本）、timestamp（服务端生成时间戳）
• 通知类消息可加 level 字段（"info"/"warn"/"error"）控制提示样式（红点、弹窗、声音）
• 前端收到后，按 type 分发：系统通知走右上角 Toast，聊天消息进会话列表，审批待办触发红点计数器更新

心跳保活与自动恢复

浏览器标签页休眠、NAT 超时、代理中断都会悄无声息断开连接，必须主动探测：

立即学习“Java免费学习笔记（深入）”；

• 服务端每 30 秒发一次 ping 帧（WebSocket 协议内置），前端监听 pong 事件并标记 isAlive = true
• 前端自己每 25 秒发一次业务心跳（如 {"type":"heartbeat"}），服务端响应确认；若连续两次没收到响应，视为失联
• 断连后采用指数退避重连：首次 1s，失败后 2s、4s、8s…上限设为 30s，避免雪崩请求
• 重连成功后，建议拉取一次未读摘要（如 /api/notify/unread），补全断连期间漏掉的通知

前端提醒行为的触发逻辑

消息到了只是第一步，怎么提醒用户才真正影响体验：

• 页面聚焦时：直接 DOM 更新 + 播放轻微提示音（需用户手势激活 AudioContext）
• 页面非聚焦时：调用 Notification.requestPermission() 获取权限后，用 new Notification() 弹系统级通知；同时更新 document.title 和 favicon（比如加红点）
• 重要通知（如支付成功、安全告警）可强制播放声音 + 桌面弹窗，普通通知仅更新红点计数器即可
• 所有提醒需提供“一键清除”入口，并记录用户操作（如点击即标记已读），避免重复打扰