如何正确处理聊天消息应用程序的“已读”-“未读”状态？

Posted 2023-04-18

技术标签:

【中文标题】如何正确处理聊天消息应用程序的“已读”-“未读”状态？【英文标题】：How to properly handle 'read' - 'unread' state for a chat messaging app? 【发布时间】：2018-05-20 05:11:12 【问题描述】：

我目前正在开发一个使用 socket.io 提供聊天室功能的 react-native 应用程序

我目前愿意处理消息的未读/已读状态，但我不知道这个逻辑应该存在于哪里：在客户端代码中还是在服务器端？

这是我的代码组件方面的基本实现

<ChatRoomCard /> //-> displays the last message and the chatroom title and 
                    can navigate to the ChatRoom component
<ChatRoom id= />

我的 reduxState 是这样的：


  chatRooms: [chatRoomId: '', title: ''],
  chatRoomsMessages: 
           [chatRoomId]: [messageId: '', text: '']

每个组件都连接到 redux，ChatRoomCard 接收包含对象数组的 chatRooms 属性 `[chatroomId: ''] 而 ChatRoom 组件只接收相应的消息。

如果是在客户端，我的第一次尝试是为每个 ChatRoomCard 添加一个状态 lastRead : timestamp，每次安装 ChatRoom 组件时都会更新此状态，从而显示最后的消息。

现在，当套接字 io 事件“new msg”触发并且我收到新消息时，我可以在 ChatRoomCard 组件中映射消息，将 message.createdAt 时间戳与 ChatRoomCard.lastReadTimestamp 进行比较，并增加“未读消息计数” ' 只要 message.timestamp 在 lastReadTimestamp 之后。

这个解决方案听起来不错吗？还是这个逻辑属于后端？或者也许两者兼而有之？我有点迷茫，因为这是我第一次这样做

非常感谢

【问题讨论】：

您是否希望其他用户知道该消息是否已被阅读？或者您是否希望用户知道已阅读的消息？时间戳是从服务器传给我们的信息，告诉我们何时写入消息？嗨@TomKarachristos 感谢您的关注，对于当时的第一个问题，我只想让当前用户跟踪这一点，是的，时间戳来自服务器，目前消息如下： created_at: timestamp, text: '', user: 【参考方案1】：

此类决策涉及不同目标之间的权衡，每种解决方案都有优点和缺点：

如果您在前端执行此操作，您在服务器中使用的电量更少，因此更容易横向扩展。如果不是一些复杂的计算并且您在前端进行，用户体验会得到改善，因为没有网络延迟。出于安全原因，如果信息具有某种程度的敏感数据，最好在服务器中进行任何状态更改，因为客户端可能受到某些黑客的攻击。如果信息将被许多用户或会话再次使用，最好的解决方案是将其存储在数据库中，这样计算就会转到服务器并保存到数据库中。如果后端是无状态的，可能需要从数据库中重新检索数据。前端可能已准备好使用来自先前请求的这些数据。

现在更具体地解决您的问题：

我们想在组件中添加信息，所以数据肯定必须到达组件。必须有人计算这些信息。组件只负责呈现和给用户什么，而不负责数据如何计算。所以组件不会进行计算。

状态，链中的下一个环节，具有计算此信息并将其提供给组件所需的信息。我认为这是最好的解决方案，因为您的数据不敏感或必须保存到数据库中。

最好的方法是使用 react-redux.connect 和 mapStateToProps 之类的函数。一个完整的例子和解释是here。

【讨论】：

嘿，希望你好，能不能请你看看这个问题***.com/questions/65682609/…【参考方案2】：

消息组件可以有一个布尔值read: false;，它也存在于状态以及记录此新信息的服务器中。

当用户打开这条新消息时；即，当消息作为组件登陆时，可以覆盖生命周期方法 ComponentDidMount() 以将此布尔值更改为 read: true。

这可以通过适当的 redux 方式来完成，包括新操作、reducer 逻辑和组件渲染修改，以向用户实现您的读取 gui 指示。

这是我的刺戳，我自己刚刚开始，可能是错的，但我会尝试自己实现一些代码并在我确认后更新这个答案。

【讨论】：

您的解决方案效果很好，但如果有 20-30 条未读消息怎么办。而且，如果您只加载最后 15 条消息怎么办。将有 n-15 条未读消息。另一个用户会有一个非常糟糕的用户体验，通过查看，他发送了 30 条消息，最后 15 条已阅读……而前 15 条仍未阅读……看起来很奇怪 af :(