我应该如何设计聊天应用程序中新消息和访问旧消息的流程？

Question

我正在开发一个聊天应用程序，我们有能力跳转到较旧的消息。这就是当前的工作流程：

1. 打开聊天室时，将调用 API，获取 25 条最新消息并将其存储在名为

   messages

   的全局状态中。
2. 当我们向上滚动时，它会逐渐获取另一个 25 等等......（类似于无限滚动）。

对于 WebSocket 部分，我认为可以做的是将新消息附加到

messages

状态。因此，对于发送消息，它看起来像：

1. 使用临时

   messages

    对 

   id
状态进行乐观更新
2. 调用API发送消息，并获取发送的消息作为BE的响应
3. 使用该响应来替换我们在步骤 1 中发送的乐观消息。

对于接收消息，流程如下所示：

1. 从 WS 获取消息，有消息传入，目前 WS 消息不包含消息内容，仅包含新消息的

   id

   ，所以接下来我要做什么
2. 使用名为

   getMessageById

   的函数获取新消息，然后使用响应并将其附加到

   messages

   状态。

我觉得上面的方法很好，直到我尝试访问较旧的消息。例如我想访问去年 1 月 1 日（本例中为 2023 年）的消息，方法如下：

1. 清空

   messages

   状态
2. 调用API

   getMessagesFrom(certainDateHere)

3. 使用响应并填写

   messages

   状态。

我认为这工作得很好，直到我收到或发送一条新消息，该消息将被错误地附加。我正在考虑添加另一个状态来跟踪该状态中是否有最新消息，以决定是否附加新消息。但我不太清楚我应该怎么做。或者我想到的另一种方法是分离

messages

状态，但我并没有真正考虑太多。我目前正在使用 ReactJS 来构建这个聊天应用程序。如果有人对我应该采取哪种方法有任何建议，那将会非常有帮助。非常感谢。

Answer 1

创建保存消息列表的消息桶。当您第一次启动并在数组的第一个存储桶中有一组真实消息时，您可以在列表中添加一个空消息存储桶，但将滚动点设置为最后一个存储桶 - （滚动长度）。

当空桶滚动到视图中时，执行延迟加载，最后在向上滚动时预先挂起另一个空桶。

新传入的消息始终会附加到数组中的最后一个存储桶（其中包含最新消息）。

如果用户向上滚动到消息队列的顶部，请在顶部添加一个新存储桶以填充前 25 个存储桶，然后将空存储桶留在顶部和底部之间。尽管如此，当它滚动到视图中时，您需要填充下一个视图块（向上或向下，取决于之前的存储桶边界），但您将维护稀疏数据结构，直到用户实际尝试访问消息介于两者之间。

无论如何，这会让你延迟加载消息。您还可以批量加载存储桶大小（听起来像 25 左右，但可能想要构建缓冲区）。批量加载几乎总是更快（尤其是在数据库级别）。