WebSocket是前端实时通知红点推送最直接高效的方式：建立长连接后服务端主动推送未读数，前端解析并更新UI红点；需处理连接管理、统一UI更新逻辑、服务端精准推送时机及鉴权、防重复连接、状态同步等健壮性细节。
WebSocket 是实现前端实时通知红点推送最直接高效的方式。关键在于建立长连接后，服务端主动推送未读消息数量，前端更新 UI 上的红点（如小圆点、数字角标）。
1. 建立 WebSocket 连接并监听消息
前端需在页面加载后创建 WebSocket 实例，连接到后端提供的 WebSocket 服务地址（注意协议是 ws:// 或安全的 wss://）：
let ws;
function initWebSocket() {
const wsUrl = 'wss://your-api.com/notify';
ws = new WebSocket(wsUrl);
ws.onopen = () => {
console.log('WebSocket 连接已建立');
};
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if (data.type === 'unread_count') {
updateBadge(data.count); // 更新红点
}
} catch (e) {
console.warn('接收消息解析失败', e);
}
};
ws.onerror = (error) => {
console.error('WebSocket 错误:', error);
};
ws.onclose = () => {
console.log('连接已关闭，尝试重连...');
setTimeout(initWebSocket, 3000); // 简单重连逻辑
};
}
// 初始化
initWebSocket();
2. 前端统一管理红点 UI 更新
红点通常出现在导航图标、消息按钮等位置。建议封装一个 updateBadge 函数，集中控制显示逻辑：
- count 为 0 时隐藏红点或清空数字；大于 0 时显示数字，超过 99 显示 "99+"；
- 使用 CSS 类控制红点样式（如
.badge+.badge-dot），避免内联样式； - 可结合 localStorage 缓存上一次未读数，避免刷新后红点闪动。
function updateBadge(count) {
const badgeEl = document.querySelector('.message-icon .badge');
if (!badgeEl) return;
if (count <= 0) {
badgeEl.classList.remove('show');
badgeEl.textContent = '';
} else {
badgeEl.classList.add('show');
badgeEl.textContent = count > 99 ? '99+' : count.toString();
}
}
3. 服务端推送未读数的典型时机
后端不应轮询，而应在业务事件触发时主动推送。常见场景包括：
立即学习“Java免费学习笔记（深入）”；
- 用户 A 给用户 B 发送新消息 → 推送 B 的未读总数；
- 系统下发公告或审批待办 → 推送对应用户的未读数变更；
- 用户登录成功后，首次拉取当前未读数并立即通过 WebSocket 广播一次（保证初始状态准确）。
服务端示例（Node.js + Socket.IO 简化示意）：
// 用户登录后绑定 socket ID 与 userId
io.on('connection', (socket) => {
const userId = socket.handshake.query.userId;
userSocketMap.set(userId, socket.id);
// 某处业务逻辑：用户 123 新增 1 条未读
const newCount = await getUnreadCount(123);
const targetSocket = io.sockets.sockets.get(userSocketMap.get(123));
targetSocket?.emit('message', { type: 'unread_count', count: newCount });
});
4. 注意事项与健壮性优化
- 连接前校验用户登录态（如传 token 或 userId 作为 query 参数），服务端需鉴权；
- 前端避免重复连接，销毁页面前调用
ws.close()； - 红点数字应以服务端为准，前端不自行累加/减，防止状态错乱；
- 弱网下可加 loading 状态或降级为定时拉取（兜底策略），但非首选。
不复杂但容易忽略：红点本质是「状态同步」，不是「消息内容同步」。只要确保未读数准确、及时、幂等更新，体验就足够可靠。
