如何为每个用户分组聊天消息？

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

我最近为自己解决了这个问题。这是一个完整的例子。

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

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

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

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);
  }
}