javascript - 如何对每个用户的聊天消息进行分组？

Question

我有一个使用 Vue.js 构建的群聊消息。我目前正在获取返回这样一个数组的消息:

"data":[
    {
        "id":1,
        "message":"<p>yo<\/p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-02-24 14:30"
    },
    {
        "id":2,
        "message":"<p>test<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:31"
    },
    {
        "id":3,
        "message":"<p>Wassup?<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:40"
    },
    {
        "id":12,
        "message":"again for testing post date",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-03-04 00:59"
    },
    {
        "id":13,
        "message":"Hello!",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
    {
        "id":13,
        "message":"<p>Hi!</p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
],

目前我只是循环遍历数据并将每条消息输出到单独的 div 中。我更喜欢在同一用户连续多次发布消息时对消息进行分组。

我该怎么做？它应该是一个选项服务器端(可能是一个可选的 group 参数？)还是以某种方式在客户端完成？

编辑这是聊天当前的样子:

这是理想的外观:

如果我按 UID/用户名对它们进行分组，问题是消息需要按顺序输出。因此，如果用户 1 发送三条消息，然后用户 2 发送两条，然后用户 1 发送另一条消息，则用户 1 的所有消息将被组合在一起。相反，用户 1 的三条消息应该被分组，然后是用户 2，然后它应该显示用户 1 的最后一条消息。

Answer 1

我最近自己解决了这个问题。这是一个 full example .

在上面的例子中，消息分组的核心业务逻辑可以在addMessage函数中的src/store.js下找到。

除非您的服务器也存储所有消息并且您有某种机制来确保所有客户端之间的因果顺序，否则我建议您在每个客户端上运行逻辑。这样，您就可以确保客户端在任何情况下都不会看到跳来跳去的消息。在最坏的情况下，消息会显示为未分组。

确定这一点的算法在收到新消息时运行，因此它在每个客户端上运行，但您也可以调整它以适用于您的用例!它如下所示(我可能使用了错误的流程图元素..抱歉)。

addMessage({ state }, { msg, selfHash }) {
  let addAsNewMsg = true;
  const lastMessage = state.messages.slice(-1)[0];
  if (lastMessage && lastMessage.userHash === msg.userHash) {
    // The last message was also sent by the same user
    // Check if it arrived within the grouping threshold duration (60s)
    const lastMessageTime = moment(lastMessage.time);
    const msgTime = moment(msg.time);
    const diffSeconds = msgTime.diff(lastMessageTime, "seconds");
    if (diffSeconds <= 60) {
      addAsNewMsg = false; // We're going to be appending.. so
      lastMessage.message.push(msg.message);
      // We're going to now update the timestamp and (any) other fields.
      delete msg.message; // Since, we've already added this above
      Object.assign(lastMessage, msg); // Update with any remaining properties
    }
  }
  if (addAsNewMsg) {
    state.messages.push(msg);
  }
}