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

Question

I'm building a chat system with React and socket.io, and I'm trying to achieve grouping messages together like Discord does it, or as seen in this screenshot . Basically, instead of creating a new section with your avatar again, it will just create a new message element and append it to your pre-existing section, unless the other user you're chatting with sends you a message or if it has been too long since your last message (in this case, 1 minute).

Link to JSFiddle.

The brown messages are my messages, and the black are the other users'.

What I first thought was the correct solution was to group every message by 1 minute.

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

However, the problem with doing this, as seen in the fiddle, is that it completely ignores when another users sends a message. So when another user sends you a message, it still thinks it belongs in the same section, because it has no way to determine whether it comes from a new user or not, and frankly, I have no clue how to do it either.

How can I achieve this?

Answer 1

This is what I did: I divided the whole process in two steps:

1. Group the message by user (you'll need to add you 1 minute condition)

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. Create the data structure that you use to display the messages.

const groups = newMessages.reduce((acc, m) => {
        const message = m[m.length - 1]
      acc[moment(message.createdAt * 1000).format()] = m
      return acc
    }, {})

Check the example: https://jsfiddle.net/Lw8gs6x7/

Note: you'll need to refactor my code. It is not very clean.