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

Posted 2021-05-03

我目前正在开发一个使用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 props` [{chatroomId：''}]，而ChatRoom组件只接收相应的消息。

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

所以现在当socket io事件'new msg'触发并且我收到新消息时，我可以在ChatRoomCard组件中映射消息，将message.createdAt时间戳与ChatRoomCard.lastReadTimestamp进行比较，并在每当一个时增加'未读消息计数' message.timestamp位于lastReadTimestamp之后。

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

非常感谢

答案

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

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

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

我们想在组件中添加信息，因此确保数据必须到达组件。有人必须计算这些信息。组件仅负责演示文稿以及向用户提供的内容，而不负责数据的计算方式。因此组件不会进行计算。

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

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

另一答案

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

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

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

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