Question

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

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

以下是我的代码组件的基本实现

<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：＆＃39;＆＃39;}]的chatRooms道具，而ChatRoom组件只接收相应的消息。

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

所以现在当socket io event＆＃39; new msg＆＃39;触发器，我收到新消息，我可以在ChatRoomCard组件中映射消息，将message.createdAt时间戳与ChatRoomCard.lastReadTimestamp进行比较，并增加一条未读消息计数＆＃39;每当message.timestamp在lastReadTimestamp之后。

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

非常感谢

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

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

如何妥善处理＆＃39;阅读＆＃39; - ＆＃39;未读＆＃39;聊天消息应用的状态？

2 个答案: