websocket是html5全双工协议，适用于实时点赞等通知；需wss安全连接、身份绑定、30秒心跳；点赞由http处理后按用户维度广播；前端分流渲染、异常时指数退避重连并降级sse或轮询。

WebSocket 是 HTML5 提供的全双工通信协议，特别适合社交类应用中实时点赞、评论、关注等通知场景。相比轮询或长轮询，它能真正实现服务端主动推送，低延迟、低开销。

建立 WebSocket 连接并保持心跳

客户端需在用户登录后立即建立连接，并通过定时心跳维持活跃状态，避免被代理或防火墙断连：

• 使用 wss://（生产环境必须用安全协议）连接服务端，如 new WebSocket("wss://api.example.com/ws")
• 监听 onopen 后发送用户身份信息（如 token 或 userId），服务端据此绑定会话与用户
• 每 30 秒发送一次空消息或自定义 ping 帧，服务端响应 pong；若连续两次未收到响应，主动重连

服务端按用户维度广播点赞事件

点赞动作由 HTTP 接口处理（保证幂等和事务），成功后触发 WebSocket 推送，但只推给目标用户（被点赞者）及其在线好友（可选）：

• 点赞接口（如 POST /api/posts/:id/like）完成数据库写入后，调用内部消息总线或直接调用 WebSocket 服务的 broadcastToUser(userId, message)
• 消息体建议为 JSON 格式，含关键字段：{"type":"like","postId":"123","likerName":"张三","avatar":"/u/456.jpg","timestamp":1718234567}
• 服务端应维护 userId → [socket connections] 映射，支持单用户多端在线（如手机+网页同时登录）

前端接收并渲染通知提醒

客户端监听 WebSocket 消息，根据 type 字段分流处理，点赞通知需兼顾视觉提示与交互反馈：

• 收到 type: "like" 消息后，在对应帖子区域显示「张三点了赞」toast，3 秒后自动消失
• 若当前页面是首页或动态流，可同步更新该帖子的点赞数（注意避免重复累加，以服务端返回为准）
• 在顶部通知栏增加红点徽标，点击展开最近 5 条点赞记录，支持一键跳转到原帖
• 用户切出页面时（visibilitychange），可配合 Web Notification API 弹出系统级提醒（需用户授权）

异常处理与降级策略

真实网络环境下连接可能中断、消息可能乱序或丢失，需设计容错机制：

• 客户端实现指数退避重连（1s → 2s → 4s → 最大 30s），重连成功后请求服务端补发离线期间的关键通知（如 lastSeqId）
• 服务端对每条通知生成唯一序列号（seq），客户端缓存最近 20 条 seq，丢包时可主动拉取缺失项
• 当 WebSocket 不可用时（如浏览器不支持或被拦截），自动回退至 Server-Sent Events（SSE）或 5 秒轮询，仅用于点赞通知这类非强实时场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！