Javascript 如何将聊天中的消息分组，而不是将每条新消息放在新的分区中？

我正在用React和socket.io构建一个聊天系统，并试图实现将消息分组在一起，就像Discord那样，或者如中所示。基本上，它不会再次使用你的头像创建一个新的分区，而是只创建一个新的消息元素并将其附加到你先前存在的分区中，除非与你聊天的另一个用户向你发送消息，或者如果距离你上次的消息太长（在本例中，1分钟）

棕色消息是我的消息，黑色消息是其他用户的消息

我首先想到的是正确的解决方案是将每条消息按1分钟分组

const sortByMinute = _.groupBy(messages, (msg) => {
    return moment(msg.createdAt * 1000).startOf("minute").format();
});

然而，这样做的问题，正如在小提琴中看到的，是当其他用户发送消息时，它完全忽略了。因此，当另一个用户向您发送消息时，它仍然认为它属于同一部分，因为它无法确定它是否来自新用户，坦率地说，我也不知道如何做

---

如何实现这一点？

我就是这么做的：我将整个过程分为两个步骤：

按用户分组消息（您需要添加1分钟条件）

let lastMsg=lastMessages[lastMessages.length-1]
if（lastMsg.user==m.user）{
lastMessages.push（m）
acc[acc.length-1]=最近的消息
}否则{
加速推力（[m]）
}
返回acc；
}，[[firstMsg]]）

创建用于显示消息的数据结构

const groups=newMessages.reduce（（acc，m）=>{
const message=m[m.length-1]
acc[时刻（message.createdAt*1000）.format（）]=m
返回acc
}, {})

检查示例：

---

注意：您需要重构我的代码。它不是很干净。

如果上一条消息与发送“当前”消息的用户不属于同一个用户，您应该向后看一看，然后开始新的部分。您能解释一下向后看是什么意思吗？我第一次听到这个表达式。我知道没有库函数，但您应该使用标准for循环来迭代您的集合并确定何时开始新的部分。首先，感谢您花时间研究我的问题，这里很少有人这样做。其次，这在一定程度上完成了工作（就像你说的，它不支持1分钟规则），但这绝对是我可以处理并进一步改进的事情！