Slack 如何存储未读消息？

Question

我正在构建一个聊天应用程序，并尝试识别状态架构以指示未读消息。

我的状态当前包含消息列表。在渲染时，我按对话对它们进行分组，这样我就可以渲染收件人列表，并为选定的收件人渲染消息。

最简单的方法是将{recipient: lastReadTimestamp} 的lastRead 哈希也存储在状态中。在渲染时，计算每个会话中时间戳大于存储的lastRead 时间戳的消息数量，以获取未读消息的数量。选择收件人后，将该收件人的lastRead 时间戳设置为最新消息的时间戳。

这样做的问题是，当您离开时，如果有 15 条以上的消息进入 - 以至于有些消息超出了视口，您必须滚动才能看到它们。一旦您选择了该收件人，它会将lastRead 时间戳标记为最新消息，基本上将整个对话标记为“已读”，即使上面还有尚未看到的消息。

相反，我希望拥有更像 Slack 的功能。 in-view 或 InteractionObserver 可以检测到消息何时实际进入视口。

但是我会在该州存储什么？每条未读消息的ID？如果是这样，当我刷新并且我的应用程序收到所有消息时，它如何知道其中任何一条已被读取？我可以存储每个 read 消息的 id，但这听起来很笨拙。

有没有人看到一个好的设计模式？

Answer 1

我们确实在聊天应用程序中将 IntersectionObserver 用于完全相同的用例。

预请求： 消息有 2 个元字段：

• time（发送时）
• timeSeen（查看时）

流程如下：

• clientA 通过服务器发送消息
• 服务器将time = now() 和timeSeen = null 附加到该消息中
• 服务器将消息保存到数据库中
• 服务器将消息转发给客户端B
• clientB 检查消息是否没有timeSeen，例如这是null
• clientB 在 IntersectionObserver 包装的组件中呈现消息，当消息在视口中时触发挂钩并将 messageId 作为参数传递
• clientB 向服务器发送请求，以在钩子请求时将消息标记为已看到
• 服务器用messageId 标记消息，如通过设置timeSeen = now() 所见
• 服务器向客户端 B 发送更新，并在消息中使用 messageId（timeSeen 更新）
• clientB 发现 timeSeen 不再为 null 并且不会在重新渲染时调用钩子

我知道这听起来有点矫枉过正，但这样你就可以可靠地获得以下信息：

• 所有消息都会在看到的时候显示元数据
• 您可以根据元数据在服务器端聚合看不见的计数器和列表