javascript - 如何正确处理聊天消息应用程序的 'read' - 'unread' 状态？

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 接收包含对象数组 `[{chatroomId: ''}] 的 chatRooms Prop ，而 ChatRoom 组件仅接收相应的消息。

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

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

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

非常感谢

Answer 1

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

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

现在更具体地针对您的问题:

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

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

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