我目前正在开发一个反应本机应用程序,该应用程序使用 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 接收chatRooms
props 包含对象数组“[{chatroomId: ''}]”,而 ChatRoom 组件仅接收相应的消息。
如果是在客户端,我的第一次尝试将是添加一个状态lastRead : timestamp
对于每个 ChatRoomCard,每次安装 ChatRoom 组件时都会更新此状态,从而显示最后的消息。
因此,现在当套接字 io 事件“new msg”触发并且我收到新消息时,我可以在 ChatRoomCard 组件中映射将 message.createdAt 时间戳与 ChatRoomCard.lastReadTimestamp 进行比较的消息,并在每当message.timestamp 在lastReadTimestamp 之后。
这个解决方案听起来不错吗?或者这个逻辑属于后端?或者也许两者兼而有之?我有点失落,因为这是我第一次这样做
多谢
此类决策涉及不同目标之间的权衡,每种解决方案都有优点和缺点:
- 如果您在前端执行此操作,则在服务器中使用的电量更少,因此扩展也更容易。
- 如果不是一些复杂的计算,并且在前端进行,用户体验会得到改善,因为没有网络延迟。
- 出于安全原因,如果信息具有某种程度的敏感数据,最好在服务器中进行任何状态更改,因为客户端可能受到某些黑客的攻击。
- 如果要从许多用户或会话中再次使用该信息,最好的解决方案是将其存储在数据库中,因此计算将转到服务器并保存到数据库中。
- 如果后端是无状态的,也许我需要从数据库中重新检索数据。前端可能已准备好使用之前请求的数据。
现在更具体地解决您的问题:
我们想要在组件中添加信息,因此数据肯定必须到达组件。必须有人计算这些信息。该组件只负责呈现和向用户提供什么,而不负责数据如何计算。所以该组件不会进行计算。
状态是链中的下一个环节,拥有计算该信息并将其提供给组件所需的信息。我认为这是最好的解决方案,因为您的数据不敏感或必须保存到数据库中。
最好的方法是使用react-redux.connect和mapStateToProps这样的函数。完整的示例和解释是here https://redux.js.org/docs/recipes/ComputingDerivedData.html.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)