如何按用户会话块分割消息数组-js教程-PHP中文网

如何按用户会话块分割消息数组

本文介绍如何将按时间排序的聊天消息数组，依据连续的 userId 变化自动切分为多个逻辑会话块（即同一用户连续发送的消息归为一组），适用于前端消息渲染、对话气泡分组等场景。

本文介绍如何将按时间排序的聊天消息数组，依据连续的 `userid` 变化自动切分为多个逻辑会话块（即同一用户连续发送的消息归为一组），适用于前端消息渲染、对话气泡分组等场景。

在构建聊天界面时，单纯按 userId 分组（如 groupBy userId）会导致所有同用户消息合并为单一大组，无法体现“用户A连发3条→用户B连发2条→用户A再发2条”这样的真实对话节奏。正确做法是：先确保消息按时间升序排列，再将连续相同 userId 的相邻消息聚合成一个子数组——这本质上是一种“连续值分组”（run-length grouping），而非传统哈希分组。

实现该逻辑最简洁高效的方式是使用 JavaScript 原生的 Array.prototype.reduce()。其核心思想是：遍历已排序的消息数组，比较当前项与前一项的 userId。若不同（或为首项），则开启新分组；否则追加到上一个分组末尾。

以下是完整可运行的实现代码：

// 示例数据（注意：实际项目中 timestamp 应为 Date 实例，非 ISODate 伪对象）
const messages = [
  { content: 'content 1', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:57:42.124Z') },
  { content: 'content 2', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:58:42.124Z') },
  { content: 'content 3', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:59:42.124Z') },
  { content: 'content 4', userId: '345', targetUserId: '123', timestamp: new Date('2023-11-06T20:00:42.124Z') },
  { content: 'content 5', userId: '345', targetUserId: '123', timestamp: new Date('2023-11-06T20:01:42.124Z') },
  { content: 'content 6', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T20:02:42.124Z') },
  { content: 'content 7', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T20:03:42.124Z') }
];

// ✅ 关键步骤：确保数据已按 timestamp 升序排序（服务端或客户端执行）
// const sortedMessages = messages.sort((a, b) => a.timestamp - b.timestamp);

// 执行连续 userId 分组
const groupedChats = messages.reduce((groups, current, index, array) => {
  if (index === 0 || current.userId !== array[index - 1].userId) {
    groups.push([current]); // 新建分组
  } else {
    groups[groups.length - 1].push(current); // 追加至当前分组
  }
  return groups;
}, []);

console.log(groupedChats);
// 输出：3 个子数组，分别对应用户 '123'、'345'、'123' 的连续发言块

⚠️ 重要注意事项：

排序前置不可省略：reduce 分组依赖消息严格按时间顺序排列。务必在分组前调用 .sort((a, b) => a.timestamp - b.timestamp)，否则逻辑失效；
区分“连续分组”与“去重分组”：本方案识别的是 相邻相同 userId，而非全局唯一 userId —— 这正是聊天场景所需的语义；
性能友好：reduce 时间复杂度为 O(n)，无嵌套循环，适合万级以内消息量；
扩展建议：如需支持多端同步或离线缓存，可在分组后为每个块添加 blockId 或 createdAt（取首条消息时间戳）便于状态管理。