我正在使用React和socket.io构建一个聊天系统，并且试图像Discord那样实现将消息分组在一起，或者如本屏幕快照所示。基本上，与其再使用头像来创建一个新部分，它只会创建一个新的message元素并将其附加到您先前存在的部分中，除非您正在与之聊天的其他用户向您发送消息或该消息也是如此距您上一条消息的时间很久（在这种情况下，是1分钟）。
棕色消息是我的消息，黑色消息是其他用户的消息。
我最初认为正确的解决方案是将每条消息按1分钟分组。
const sortByMinute = _.groupBy(messages, (msg) => {
return moment(msg.createdAt * 1000).startOf("minute").format();
});
但是，如小提琴所示，这样做的问题在于，它完全忽略了其他用户何时发送消息。因此，当另一个用户向您发送消息时，它仍然认为它属于同一部分，因为它无法确定该消息是否来自新用户，并且坦率地说，我也不知道该怎么做。
我该如何实现？
这就是我所做的：我将整个过程分为两个步骤：
let lastMsg = lastMessages[lastMessages.length - 1]
if (lastMsg.user === m.user) {
lastMessages.push(m)
acc[acc.length - 1] = lastMessages
} else {
acc.push([m])
}
return acc;
}, [[firstMsg]])
const groups = newMessages.reduce((acc, m) => {
const message = m[m.length - 1]
acc[moment(message.createdAt * 1000).format()] = m
return acc
}, {})
检查示例：https : //jsfiddle.net/Lw8gs6x7/
注意：您需要重构我的代码。这不是很干净。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句