如何在聊天中对消息进行分组，而不是将每条新消息都放在一个新部分？

Question

我正在使用 React 和 socket.io 构建一个聊天系统，并且我正在尝试像 Discord 那样将消息分组在一起，或者如此屏幕截图所示。 基本上，它不会再次使用您的头像创建一个新部分，它只会创建一个新的消息元素并将其附加到您预先存在的部分，除非您正在与之聊天的其他用户向您发送了一条消息，或者它已经发送给您距离您的上一条消息已经很久了（在本例中为 1 分钟）。

链接到 JSFiddle。

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

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

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

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

我怎样才能做到这一点？

Answer 1

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

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

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]])

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

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/

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