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

Question

我目前正在开发一个使用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:''}] 的props,而ChatRoom组件只接收相应的消息.

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

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

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

非常感谢

Answer 1

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

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

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

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

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

执行此操作的最佳方法是使用react-redux.connect和mapStateToProps之类的函数.一个完整的例子和说明是这里.