JavaScript 中怎么用 WebSocket 实现实时通知红点推送-js教程-PHP中文网

websocket是前端实时通知红点推送最直接高效的方式：建立长连接后服务端主动推送未读数，前端解析并更新ui红点；需处理连接管理、统一ui更新逻辑、服务端精准推送时机及鉴权、防重复连接、状态同步等健壮性细节。

javascript 中怎么用 websocket 实现实时通知红点推送

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 函数，集中控制显示逻辑：

Gradle 9.8.0

下载

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  99 ? '99+' : count.toString();
  }
}

3. 服务端推送未读数的典型时机

后端不应轮询，而应在业务事件触发时主动推送。常见场景包括：

用户 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 });
});