IM会话未读数和红点方案选型

最新推荐文章于 2026-06-20 19:55:09 发布

原创最新推荐文章于 2026-06-20 19:55:09 发布 · 592 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #electron #websocket #node.js

阅读前

先关注、收藏、不然后面可能找不到了

一、简介

在即时通讯(IM)应用中，会话未读数和红点是用户交互体验的重要组成部分。未读数指的是用户尚未阅读的消息数量，通常以数字形式显示在会话列表、应用图标等位置；红点则是一种视觉提示，用于告知用户有新的内容需要关注，但不显示具体数量。

未读数和红点管理涉及以下几个核心概念：

未读消息数：特定会话中用户未阅读的消息数量
总未读数：所有会话的未读消息总数
红点状态：是否有未读内容的布尔状态
免打扰会话：用户设置为免打扰的会话，其未读数不计入总未读数
多端同步：在不同设备间保持未读数的一致性

未读数和红点的准确性直接影响用户体验：

准确的未读数帮助用户了解需要处理的消息量
红点提示用户有新内容，避免错过重要信息
多端一致性确保用户在不同设备上获得一致的体验

二、业界的生产企业级方案

方案一：服务端管理方案

设计思路

服务端管理方案将未读数的计算和存储完全放在服务端。客户端在需要显示未读数时，主动向服务端请求获取。服务端维护每个用户在每个会话中的未读数，以及总未读数。

这种方案适用于：

多端应用场景
对数据一致性要求高的场景
需要进行服务端统计和分析的场景

流程图

服务端流程：

消息接收处理
- 服务端接收发送的消息（HTTP请求）
- 查询接收方的最后阅读位置
- 查询会话是否免打扰
- 如果是非免打扰会话，更新数据库中的未读数
- 如果是免打扰会话，更新未读数但不计入总未读数
- 推送未读数更新通知（WebSocket推送）
获取未读数
- 客户端请求获取未读数（HTTP请求）
- 服务端查询所有会话未读数
- 计算总未读数（排除免打扰会话）
- 返回未读数数据给客户端（HTTP响应）
消息已读处理
- 客户端请求标记消息已读（HTTP请求）
- 服务端更新消息的已读状态
- 重新计算该会话的未读数
- 更新数据库
- 推送新的未读数给客户端（WebSocket推送）
离线消息处理
- 客户端重新连接时，查询离线期间的未读消息
- 计算离线期间未读数增量
- 更新数据库中的未读数
- 返回离线消息和未读数给客户端
消息撤回处理
- 接收撤回消息请求
- 查询消息是否已读
- 如果消息未读，减少未读数
- 推送未读数更新给客户端

客户端流程：

登录成功后初始化
- 建立WebSocket连接，监听实时未读数更新推送
- 通过HTTP请求获取用户所有会话的未读数汇总
- 初始化完成后，主要依赖WebSocket推送进行未读数更新
获取未读数（HTTP请求执行时机）
- 登录成功后：用户登录成功后，通过HTTP请求获取用户所有会话的未读数汇总
- WebSocket重连时：当WebSocket连接断开并重新连接成功后，通过HTTP请求拉取最新的未读数数据，确保数据一致性
- 手动刷新时：用户主动刷新会话列表时，可通过HTTP请求获取最新未读数（可选）
标记消息已读（HTTP请求执行时机）
- 打开会话时：用户点击打开某个会话时，立即发送HTTP请求标记该会话的所有消息为已读
- 会话可见时：当会话窗口从后台切换到前台时，发送HTTP请求标记会话已读（可选）
- 滚动到底部时：用户在会话中滚动查看消息到底部时，发送HTTP请求标记已读（可选）
WebSocket监听
- 监听服务端推送的未读数更新消息
- 收到推送后立即更新本地未读数数据
- 更新UI显示，包括会话列表未读数和应用图标红点
离线消息处理
- 重新连接时，请求获取离线消息和未读数
- 更新本地未读数
- 更新UI显示

数据库设计：

-- 会话未读数表（以用户+会话为维度）
CREATE TABLE session_unreads (
    id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID',
    user_id BIGINT NOT NULL COMMENT '用户ID',
    session_id VARCHAR(64) NOT NULL COMMENT '会话ID，引用会话基础信息表',
    unread_count INT NOT NULL DEFAULT 0 COMMENT '未读消息数量',
    last_read_message_id VARCHAR(64) COMMENT '最后阅读的消息ID',
    is_disturb TINYINT NOT NULL DEFAULT 0 COMMENT '是否免打扰：0-否，1-是',
    updated_at BIGINT NOT NULL COMMENT '更新时间（时间戳，单位：毫秒）',
    created_at BIGINT NOT NULL COMMENT '创建时间（时间戳，单位：毫秒）',
    
    UNIQUE KEY uk_user_session (user_id, session_id) COMMENT '用户和会话的联合唯一索引',
    INDEX idx_user_id (user_id) COMMENT '用户ID索引，用于查询用户的所有未读数',
    INDEX idx_session_id (session_id) COMMENT '会话ID索引，用于查询会话的所有用户未读数',
    INDEX idx_updated_at (updated_at) COMMENT '更新时间索引，用于增量同步',
    FOREIGN KEY (session_id) REFERENCES 会话基础信息表(session_id) ON DELETE CASCADE
) COMMENT='会话未读数表，存储每个用户在每个会话中的未读消息数量';

数据库设计说明：

数据持久化：未读数必须持久化到数据库，不能仅依赖内存存储，否则服务重启会导致数据丢失
多端一致性：所有设备从同一个数据库读取未读数，确保多端显示一致
离线恢复：用户离线期间的数据变化会记录在数据库中，重新连接时可以从数据库恢复

优缺点

优点：

多端数据一致性高，所有设备显示的未读数一致
数据存储在服务端，不会因为客户端卸载而丢失
可以进行服务端统计和分析
数据准确性由服务端保证，不易出错
采用HTTP请求+WebSocket推送混合方案，避免轮询，网络开销低
实时性较好，通过WebSocket推送实现实时更新

缺点：

实现复杂，开发成本高
增加服务端压力和数据库负载
依赖WebSocket推送，网络不稳定时可能影响实时性
需要维护额外的数据库表和索引
需要处理WebSocket连接管理和断线重连逻辑

代码示例

后端代码（伪代码）

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { SessionUnreads } from '../entities/session-unreads.entity';
import { Message } from '../entities/message.entity';
import { WebSocketService } from '../services/websocket.service';
import { UnreadSummary } from '../dto/unread-summary.dto';
import { WebSocketMessage } from '../dto/websocket-message.dto';

@Injectable()
export class UnreadService {
  constructor(
    @InjectRepository(SessionUnreads)
    private readonly sessionUnreadsRepository: Repository<SessionUnreads>,
    @InjectRepository(Message)
    private readonly messageRepository: Repository<Message>,
    private readonly webSocketService: WebSocketService,
  ) {}

  /**
   * 处理新消息，更新未读数
   */
  async handleNewMessage(message: Message): Promise<void> {
    const receiverId = message.receiverId;
    const conversationId = message.conversationId;

    let unread = await this.sessionUnreadsRepository.findOne({
      where: {
        userId: receiverId,
        sessionId: conversationId,
      },
    });

    if (!unread) {
      unread = this.sessionUnreadsRepository.create({
        userId: receiverId,
        sessionId: conversationId,
        unreadCount: 0,
        lastReadMessageId: null,
        isDisturb: 0,
      });
      await this.sessionUnreadsRepository.save(unread);
    }

    if (await this.shouldCountAsUnread(unread, message)) {
      unread.unreadCount += 1;
      await this.sessionUnreadsRepository.save(unread);

      await this.pushUnreadUpdate(receiverId);
    }
  }

  /**
   * 判断消息是否需要计入未读数
   */
  private async shouldCountAsUnread(unread: SessionUnreads, message: Message): Promise<boolean> {
    if (unread.isDisturb === 1) {
      return false;
    }

    return message.id > unread.lastReadMessageId;
  }

  /**
   * 获取用户的所有未读数
   */
  async getUserUnreadSummary(userId: number): Promise<UnreadSummary> {
    const unreadList = await this.sessionUnreadsRepository.find({
      where: { userId },
    });

    let totalUnread = 0;
    const sessionUnreadMap = new Map<number, number>();

    for (const unread of unreadList) {
      sessionUnreadMap.set(unread.sessionId, unread.unreadCount);

      if (unread.isDisturb === 0) {
        totalUnread += unread.unreadCount;
      }
    }

    const summary: UnreadSummary = {
      totalUnread,
      sessionUnreadMap: Object.fromEntries(sessionUnreadMap),
      hasRedDot: totalUnread > 0,
    };

    return summary;
  }

  /**
   * 标记消息已读
   */
  async markMessagesAsRead(userId: number, sessionId: number, lastReadMessageId: string): Promise<void> {
    const unread = await this.sessionUnreadsRepository.findOne({
      where: {
        userId,
        sessionId,
      },
    });

    if (unread) {
      const unreadCount = await this.messageRepository
        .createQueryBuilder('message')
        .where('message.sessionId = :sessionId', { sessionId })
        .andWhere('message.id > :lastReadMessageId', { lastReadMessageId: unread.lastReadMessageId })
        .andWhere('message.id <= :currentReadMessageId', { currentReadMessageId: lastReadMessageId })
        .getCount();

      unread.lastReadMessageId = lastReadMessageId;
      unread.unreadCount = Math.max(0, unread.unreadCount - unreadCount);
      await this.sessionUnreadsRepository.save(unread);

      await this.pushUnreadUpdate(userId);
    }
  }

  /**
   * 推送未读数更新通知
   */
  private async pushUnreadUpdate(userId: number): Promise<void> {
    const summary = await this.getUserUnreadSummary(userId);

    const message: WebSocketMessage = {
      type: 'unread_update',
      data: summary,
    };

    await this.webSocketService.sendToUser(userId, message);
  }
}

前端代码（伪代码）

// 前端代码 - 服务端管理方案（HTTP请求+WebSocket推送混合）

class UnreadManager {
  constructor() {
    this.unreadData = {
      total_unread: 0,
      session_unread_map: {},
      has_red_dot: false
    };
  }

  // 初始化（登录成功后调用）
  async init() {
    // 1. 先通过HTTP获取初始未读数
    await this.fetchUnreadSummary();
    
    // 2. 建立WebSocket连接，监听实时更新
    this.initWebSocketListener();
  }

  // HTTP请求获取未读数（只在必要时调用）
  async fetchUnreadSummary() {
    try {
      const response = await api.get('/api/unread/summary');
      this.unreadData = response.data;
      this.updateUI();
    } catch (error) {
      console.error('获取未读数失败:', error);
    }
  }

  // WebSocket监听（主要更新方式）
  initWebSocketListener() {
    websocket.on('unread_update', (data) => {
      this.unreadData = data;
      this.updateUI();
    });
    
    // 监听WebSocket重连
    websocket.on('reconnect', () => {
      // 重连成功后，主动拉取一次最新数据
      this.fetchUnreadSummary();
    });
  }

  // 标记消息已读
  async markAsRead(sessionId, lastReadMessageId) {
    try {
      await api.post('/api/unread/mark-read', {
        session_id: sessionId,
        last_read_message_id: lastReadMessageId
      });
      // 注意：这里不需要手动更新UI，因为服务端会通过WebSocket推送更新
    } catch (error) {
      console.error('标记已读失败:', error);
    }
  }

  // 更新UI显示
  updateUI() {
    // 更新会话列表未读数
    Object.entries(this.unreadData.session_unread_map).forEach(([sessionId, count]) => {
      const element = document.getElementById(`unread-${sessionId}`);
      if (element) {
        element.textContent = count > 0 ? count : '';
        element.style.display = count > 0 ? 'block' : 'none';
      }
    });

    // 更新应用图标红点
    if (this.unreadData.has_red_dot) {
      this.setAppBadge(this.unreadData.total_unread);
    } else {
      this.clearAppBadge();
    }
  }

  // 设置应用图标角标
  setAppBadge(count) {
    if (navigator.setAppBadge) {
      navigator.setAppBadge(count);
    }
  }

  // 清除应用图标角标
  clearAppBadge() {
    if (navigator.clearAppBadge) {
      navigator.clearAppBadge();
    }
  }
}

// 使用示例
const unreadManager = new UnreadManager();

// 登录成功后调用init方法初始化未读数管理
async function onLoginSuccess() {
  await unreadManager.init();
}

// 用户打开会话
async function openSession(sessionId) {
  // 获取当前会话的最后一条消息ID
  const lastMessageId = getLastMessageId(sessionId);
  await unreadManager.markAsRead(sessionId, lastMessageId);
  // 加载会话消息...
}

方案二：实时推送方案