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



我目前正在处理一个反应本地应用程序,该应用程序使用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:''}],而聊天室组件仅接收依据。

如果它位于客户端,我的第一次尝试是在每个聊天室卡中添加状态lastRead : timestamp,每次聊天室组件安装时都会更新此状态,从而显示最后一条消息。

所以现在,当插座io事件" new msg"触发时,我会收到我可以在chatroomcard组件中可以收到的新消息,请映射比较消息的消息。'每当一条消息。

这个解决方案听起来像是好工作吗?还是此逻辑属于后端?也许这两个?我有点迷路了,因为这是我第一次这样做

非常感谢

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

  • 如果您在前端进行操作,则在服务器中使用更少的功率,因此更简单地缩放出来。
  • 如果不是一些复杂的计算,并且在前端进行了,则可以改善用户体验,因为没有网络延迟。
  • 出于安全原因,如果信息具有一定程度的敏感数据,则最好在服务器中进行任何状态变化,因为客户端可能受到某些黑客的攻击。
  • 如果这些信息将再次从许多用户或会话中再次使用,最好的解决方案是将其存储在数据库中,因此计算将转到服务器并保存到数据库中。
  • 如果后端是无状态的,则可能需要从数据库中重新撤回数据。从以前的请求中,Frontend可能已经准备好使用此数据。

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

我们想在组件中添加信息,因此可以肯定的是数据必须到达组件。有人必须计算此信息。该组件仅对演示文稿和向用户提供什么负责,而不是数据计算的方式。因此该组件不会进行计算。

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

最好的方法是使用react-redux.connect与mapstatetoprops之类的函数。一个完整的例子和解释在这里。

消息组件可以具有布尔 read: false;,其中它在该州以及在服务器中还存在此新信息。

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

这可以通过适当的新操作的Redux方式,还原器逻辑和组件进行修改,以对用户实现您的读取GUI指示。

那是我的戳戳,我刚刚刚开始Myyself,可能是错误的,但是我会尝试自己实施一些代码,并在确认后更新此答案。

相关内容

  • 没有找到相关文章

最新更新