react聊天应用程序中的已读和未读消息状态 - 腾讯云开发者社区

文章/答案/技术大牛

发布

面试题：群聊消息的已读未读设计

一朋友和我讨论他前段时间面试某大公司的一题目：企业IM比如企业微信、钉钉里面的群消息的有个已读未读的功能，发送者刚发出消息时，当前群里其他群成员都是未读状态，陆陆续续有人看了这个消息，这时候消息的详情变成...x人已读，y人未读，如下图所示，有具体的已读未读列表（万恶的功能，看到同事or老板的消息不能假装没看到了），每条消息对应一个唯一的messageid（uint64_t），每个用户对应一个唯一的userid...（uint64_t）,应该如何保存这个消息对应的已读未读详情呢？...仔细分析，按照目前的设计，每一条消息，已读未读详情就要占用8B * 群成员数的内存，如果一个活跃的200人大群，每发一条消息，已读未读就要1600B，如果平均每天消息量是1k，那每个这样的群，每天就要1.6MB...比如C退出群，发消息时maxid还是5，已读+未读总人数应该是3(不包括发消息者本人)，目前信息只有5个bit（0/1），识别不出来谁已经退出群聊了 2、退出群聊的成员如何处理？

2.4K4 1

钉钉消息已读、未读咋实现的嘞？

前言一款app，消息页面有：钱包通知、最近访客等各种通知类别，每个类别可能有新的通知消息，实现已读、未读功能，包括多少个未读，这个是怎么实现的呢？...所有，判断有没有小红点，或者小红点的数字是多少，就是简单的获取你与虚拟人的对话的未读的消息的数量。...当然，一个动作不一定只发一条消息，比如，图中下方有个金刚键"消息"，它是所有消息的总和，所以，投递其他消息的时候，也要给它投递一次，不过它只展示一个未读数字，所以这个消息只需要一个msg_id即可，不需要消息..."已读和未读"。它包含两层意思，一个判否，即内容你是否读过，二是计数，即这个内容有多少人读过。长尾原因如果你用Redis存储，成本非常高，浪费非常严重。...这个时候，通常的策略是"[log record]"和"comb", 我们每产生一个动作，比如读，赞，收藏，就会产生一个log record( 取关，取消赞...也是一条独立的log record)，我们由专门的大数据系统统一收集这些

1.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

面试官：群聊消息的已读未读功能，你来设计一个?

作者 | 小猿学习笔记来源 | https://www.toutiao.com/i6686735232772604429 一朋友和我讨论他前段时间面试某大公司的一题目：企业IM比如企业微信、钉钉里面的群消息的有个已读未读的功能...，发送者刚发出消息时，当前群里其他群成员都是未读状态，陆陆续续有人看了这个消息，这时候消息的详情变成x人已读，y人未读，如下图所示，有具体的已读未读列表（万恶的功能，看到同事or老板的消息不能假装没看到了...），每条消息对应一个唯一的messageid（uint64_t），每个用户对应一个唯一的userid（uint64_t）,应该如何保存这个消息对应的已读未读详情呢？...仔细分析，按照目前的设计，每一条消息，已读未读详情就要占用8B * 群成员数的内存，如果一个活跃的200人大群，每发一条消息，已读未读就要1600B，如果平均每天消息量是1k，那每个这样的群，每天就要1.6MB...比如C退出群，发消息时maxid还是5，已读+未读总人数应该是3(不包括发消息者本人)，目前信息只有5个bit（0/1），识别不出来谁已经退出群聊了退出群聊的成员如何处理？

1.9K4 0

IM群聊消息的已读未读功能在存储空间方面的实现思路探讨

1、引言 IM系统中，特别是在企业应用场景下，消息的已读未读状态是一个强需求。以阿里的钉钉为例，钉钉的产品定位是用于商务交流，其“强制已读回执”功能，让职场人无法再“假装不在线”、“假装没收到”。...那么，对于已读未读状态： 1）如果是私聊：消息的阅读状态比较容易实现，在性能和存储上也不存在问题； 2）如果是群聊：考虑到存储和处理性能，特别当处于一个云环境时，如何高效地处理群聊的已读未读状态是一个非常值得探讨的话题...所以，本文可以作为IM聊天消息（主要是群聊）中已读未读功能的基本实现思路方面的参考，但不建议盲目迷信文中的结论或方案，避免被一些不够具体的技术指标而误导。...如果你对IM中的已读未读功能有产品方面的痛点困惑，可以参考一下微信对已读未读功能的设计定位，详见《IM热门功能思考：为什么微信里没有消息“已读”功能？》。...4、已读未读状态交互流程发送者发送的IM聊天消息，在接收者阅读消息后，是否要求阅读者通知已读，可能是由系统配置、组织配置、群组配置等决定，也可能由发送者根据业务需求决定。

6.6K5 0

Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章

这里就加了一个非常小的改动，加了一个tips-numtips，先展示未读消息。...服务端就在发送消息的地方增加一个字段，status：1来表示未读。 WebSocket客户端由UI界面的代码可以看出，我们调用了一个getMsgNum方法来展示未读消息数量。...所以我们客户端只需要在原来的基础上，添加一个获取未读消息数量的方法即可。 export default { ......里面的有bridge（即是用户对话消息）、uid相等，并且status为1（即未读） 3、打开的是当前对话，即将当前对话的消息状态status改为0（已读） data.map(item=>{ item.status...总结消息未读，主要是判断状态，然后搞清楚对象，是谁发的消息没有读。已读，就很简单了，就是当前展示的消息列表都改成已读，所以直接把currentMessage列表的消息改成已读即可。

2K3 0

使用腾讯云IM搭建应用内类微信社交聊天模块实践

表情回应- 在回复特定的单条消息时，用户不仅可以直接引用原消息并回复，还可使用Emoji表情回应，大大降低沟通成本，解决多人聊天中消息冗杂的问题。...消息已读回执- 是否启用此功能，可根据您的社交业务需求决定。群聊中的已读回执，不仅能展示已读数量，还能展示已读成员列表。...单聊TUIKit中以文字承载群聊TUIKit中以圆圈承载已读群成员未读群成员群内@消息- 相信大家已经很熟悉，在群聊交流过程中，如果需要提及或提醒某些群成员，我们可直接 @ 他们。...监听@字符选择群成员编辑群@消息发送收到群@消息消息漫游- 如果用户有多台设备，或者同时使用电脑和手机登录您的应用程序，用户们希望看到，无论在哪一端，历史消息都能尽可能完整。...能从提供的历史消息上下文中，快速无障碍的加入聊天，满足社交场景高频率聊天的要求。以下截图演示了消息在手机和电脑之间漫游。

3.9K3 0

Vue实现的聊天系统

项目地址：github.com/CCZX/wechat目前项目一直在更新中。欢迎大家留下宝贵的意见。一、具备的功能好友之间聊天，支持问题、图片、表情、音视频通话以及白板（适用WebRTC实现）。...好友之间的消息支持已读状态提醒，可以即时的知道对方是否已读消息。在线好友统计，在每个分组中可以查看当前在线好友的数量，并对在线好友的头像做高亮处理。...群聊，群聊目前只支持文字、图片、表情的形式，目前群聊消息也不支持已读提醒（后续完善）。空间，类似于QQ空间，可以发表自己的动态、查看好友的动态。动态编辑，支持对空间进行删除、编辑的操作。...在获取会话后，对每条会话最后一条消息的获取处理逻辑。对接七牛云实现实现图片的上传。 webRTC技术。收到消息后即时提醒以及未读消息的数量提醒。消息已读提醒设置。...四、项目截图 1、最近会话列表页面（最近会话按照最后消息时间排序，在发送新的消息后该会话会排序到第一条） ? 2、好友分组、群聊分类 ? ? 3、新消息提醒、已读提醒 ? ? 4、空间动态 ?

1.9K4 0

react全家桶 NodeJS MongoDB搭建实时聊天的app

技术栈【前端】 React: 用于搭建用户界面的javascript库，特点是声明式渲染和组件化开发 Redux: Redux 是 JavaScript 状态容器，提供可预测化的状态管理。...React-router:是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。...【后端】 NodeJs:使用 express 构建一个本地 HTTP server 来调试 React 项目 MongoDB: 存储用户数据和聊天数据的非关系型数据库 Express: Node的基于...根据发收方的用户id 进行辨别和数组的循环渲染未读消息的更新默认每条数据的read字段都是false，筛选聊天数据的发送对象是正在使用这个软件的用的时候，筛选出来的结果就是未读消息的数量 socket...使用emit触发 on来接受当接受到一个消息的时候未读消息加1 当我们从聊天页面退出的时候把这个聊天界面的对方的id发送给后端进行处理将总体未读消息数量减去这个id的维度消息数量预览效果

4K2 0

使用腾讯云IM搭建应用内类微信社交聊天模块实践

我们支持众多语言的互相翻译，所有支持的语言可查看此处。消息已读回执单聊和群聊均支持消息已读回执功能，操作步骤一致。图片图片是否启用此功能，可根据您的社交业务需求决定。...例如对于类似微信的熟人社交，已读回执的用处可能不是非常大；但是对于陌生人交友场景，已读回执则十分重要，帮助用户来确认，对方是否愿意跟自己聊下去，是否已读不回；对于工作聊天场景，群已读回执还能发挥更大的作用...，可便捷看到群内哪些人已读哪些人未读，帮助发送者确认信息传递效率。...群聊场景的消息已读回执，通常需要能够查看详情,显示群内哪些人已读，哪些人未读。...当用户点击已读回执角标时，可调用 getGroupMessageReadMemberList 方法分页拉取消息已读或未读群成员列表。

9.4K17 1

Websocket IM聊天教程-教你用GoEasy快速实现IM聊天

，不论你喜欢用React还是VUE，还是React-native或ionic, 或者您直接用原生Javascript和Typescript，都是可以轻松理解，全套代码已经放在gitee上了，下载后不需要搭建任何环境...，显示聊天界面, 如果该好友有未读消息的，红色小气泡显示未读消息数量。...将该好友在本地数据里未读消息恢复为0。undefined3.4. 并且将聊天记录滚动到最下边。undefined3.5. 如果点击返回，就直接调进入第二步。...本地好友数据里的未读消息加1。undefined5.4. 如果当前界面是好友列表，将来自该朋友的未读消息的数字显示在界面上。undefined5.5....如果收到的消息就是来自当前对话窗口，就将消息显示到聊天窗口，并且调用service将本地数据里该好友的未读消息清0。用户上下线提醒undefined6.1.

4.2K0 0

在线客服系统客服消息表设计，我到底在想什么？

简单来说，就是记录客服和访客的聊天记录。但真正做起来，要考虑的东西可不少：消息归属：谁发的？客服还是访客？状态管理：消息是否已读？ ...translated_content（翻译后的消息）：后来加的，因为系统要支持多语言，比如英文客服和中文访客聊天时，自动翻译内容。为什么用 TEXT 而不是 VARCHAR？...消息可能很长（比如用户粘贴了一堆错误日志），TEXT 更灵活，不会像 VARCHAR(255) 那样被截断。（3）状态管理：消息是否已读？...status（状态）：read（已读）或 unread（未读）。为什么用 ENUM 而不是 TINYINT？...（2）消息已读回执目前 status 只有已读/未读，未来可以细化成： delivered（已送达） read（已读） replied（已回复）（3）支持富媒体消息现在只存文本，但未来可能要存图片

3061 0

进阶篇 - 交互功能与状态管理

未读消息处理当收到新消息时，如果当前没有选中该联系人，我们需要增加该联系人的未读消息数。...clearUnread方法用于清除联系人的未读消息数，当用户点击联系人时调用。4. 消息状态显示我们可以为消息添加状态显示，如发送中、已发送、已读等状态。...在消息项渲染中，我们根据消息状态显示不同的状态文本，如"发送中..."、"已发送"、"已读"等。5. 消息输入增强我们可以为消息输入框添加更多功能，如表情选择、图片发送等。...表情选择器使用Row和ForEach组件显示一组预定义的表情，点击表情时将其添加到输入框中。我们还重构了发送消息的方法，添加了消息状态的模拟过程，包括发送中、已发送、已读等状态。高级状态管理1....小结在本教程中，我们详细讲解了如何为聊天应用添加交互功能和状态管理，包括联系人切换、消息发送、未读消息处理、消息状态显示、表情选择等功能。

3170 0

127. 侧边栏容器实战：社交应用联系人列表基础篇

二、社交应用联系人列表实战 2.1 需求分析社交应用的联系人侧边栏通常需要以下功能：左侧侧边栏显示联系人列表，包含头像、名称和未读消息数右侧内容区显示当前选中联系人的聊天内容支持搜索联系人点击联系人可以切换聊天对象...'#f5f5f5' : '#ffffff') } } 这个组件使用了以下技术： @Prop装饰器：定义组件的输入属性，包括联系人数据和是否处于活动状态 Stack组件：用于在头像上叠加显示未读消息数...条件渲染：只有当未读消息数大于0时才显示未读消息标记动态样式：根据isActive属性动态设置文本颜色和背景色四、布局技巧与最佳实践 4.1 侧边栏宽度设置在社交应用中，侧边栏宽度需要合理设置，...通过合理的组件结构和状态管理，我们实现了一个简洁而功能完备的联系人列表，包括搜索框、联系人项、未读消息标记和活动状态显示等功能。...在下一篇教程中，我们将深入探讨如何为社交应用添加更多交互功能和状态管理，包括消息发送、接收、状态同步等功能，敬请期待！

2930 0

uni-app+php+workman实现简单聊天功能之聊天模块封装

this.SocketTask)return; //监听开启 this.SocketTask.onOpen(()=>{ //连接成功将连接状态设置为已连接...__UpdateChatdetail(res);//（默认接受信息） //更新chatlist（当前会话置顶，修改chatlist中当前会话的data和time显示 this....，调用(__UpdateChatdetail)默认是接受信息（发送消息也会调用该函数） 3.3更新消息列表，将当前会话置顶，修改chatlist中当前会话的data和time显示，调用(__UpdateChatlist...该函数获取服务器的用户绑定结果如果用户状态正常则使用户上线初始化tabbar的未读总信息角标initTabbarBadge 获取未读的信息getChatMessages 绑定失败断开连接，并展示相关提示...该函数用于获取未读信息，当用户离线时接受到的消息暂存在服务端缓存，当用户重新上线时触发该函数获取到未读消息并广播事件UserChat使页面获取到未读消息 Message > __UpdateChatdetail

5.3K4 0

在线客服系统实现复杂统计需求，直接SQL操作查询数据库，统计超过一分钟未回复消息数

如果在每次发消息的流程里，都加入复杂的统计、计算逻辑，会拖慢接口响应速度，直接影响客服和用户的聊天体验。我的原则是：在核心流程里，尽量少操作数据库。...消息内容：聊了啥。创建时间：这个最重要，用来判断消息发了多久。消息类型：标记这条消息是 “客服” 发的，还是 “访客” 发的。已读状态：标记是 “已读” 还是 “未读”。...翻译成数据库查询语言就是：消息类型是“访客” （因为要统计客服“没回复”的消息，所以先找到访客发的消息）。状态是“未读” （客服还没看，或者看了还没回）。...如果要查整个企业的总数，可以这样写： SELECT COUNT(*) FROM message WHERE 企业ID = '你的企业ID' AND 消息类型 = '访客' AND 已读状态 = '未读...FROM message WHERE 企业ID = '你的企业ID' AND 消息类型 = '访客' AND 已读状态 = '未读' AND 创建时间 < DATE_SUB(NOW(), INTERVAL

2111 0

feed留，单聊群聊，系统通知，状态同步，到底是推还是拉？

二、聊天消息聊天消息又分为单聊和群聊，典型的业务是微信。和朋友小窗沟通是单聊，群内扯淡是群聊。...还有一个坑爹的需求，“钉钉”的群聊天消息“已读回执”，这个需求简单描述是：对于每一条你发出的每一群消息，你能够看到，多少人已读，多少人未读。这个群消息已读回执，猜猜看，又是怎么实现的呢？...三、系统通知系统消息听上去比较泛，典型的业务是QQ的登录广告弹窗，以及登录后的右下角广告提示。 QQ每天首次登录后的新闻弹窗拉取？第二次登录却又没有。 QQ运行过程中的QQ弹窗广告推送？...画外音：好友/群友状态一致性是非常复杂的，移动的时代，索性引入“一律在线”的概念，微信的好友就不存在所谓“头像亮”和“头像灰”的概念了，客户端状态同步这一块复杂性有所降低。...画外音：自从有了群消息已读回执，我再也不能装作不在线，领导的消息没看到了。

1.6K3 0

QQ项目之六聊天窗口

/// ///第2步：读取所有的未读消息，显示在窗体中 /// private void ShowMessage...SQL语句;消息类型为 1：普通聊天消息；0:消息状态:未读 try { SqlCommand command = new...finally { DBHelper.conn.Close(); } //2.2 把显示出的消息置为已读...；我登陆了，点过头像闪烁，就表示已读!.../// ///3 把显示出的消息置为已读 /// private void SetMessageRead

5541 0

iOS音视频接入- IM及时通讯基本原理

（排序） isRead 已读标记 isSelf 是否自己发出（展示） priority 消息优先级 isPush 是否允许推送 pushDescription 推送描述 messageContent 消息内容...image.png 消息会话与未读数 image.png 消息会话用来区分不同的单聊、群聊或聊天室，一般在客户端上构造会话列表，通过用户ID，群组ID或聊天室ID来标记。...除聊天室这种只有在线消息的聊天场景外，单聊和群聊都支持离线消息，当用户不在线时，未接收的消息会标识为未读。...消息客户端存在回执机制（已读上报），客户端在接受到消息时，需要向服务端发送一条回执，确认已经收到消息，若客户端未发送回执或服务端未收到回执，则服务端会认为该消息未被接收，状态一直为未读。...若某个会话中客户端同时收到多条未读消息，则上报是只对该回话中最新的消息进行已读上报。

2.9K3 2

IM群聊消息的已读回执功能该怎么实现？

《IM单聊和群聊中的在线状态同步应该用“推”还是“拉”？》《IM群聊消息如此复杂，如何保证不丢不重？》...《IM开发基础知识补课(三)：快速理解服务端数据库读写分离原理及实践建议》《IM开发基础知识补课(四)：正确理解HTTP短连接中的Cookie、Session和Token》《IM群聊消息的已读回执功能该怎么实现...如您对聊天消息的投递和送达机制等尚无概念，可先读本系列文章的以下几篇，有助于您详细掌握这方面的内容：《IM消息送达保证机制实现(一)：保证在线实时消息的可靠投递》《IM消息送达保证机制实现(二)：保证离线消息的可靠投递...答：可以利用群消息的偏序关系，记录每个成员的last_ack_msgid（last_ack_time），这条消息之前的消息已读，这条消息之后的消息未读。...对于发送方发送的任何一条群消息，都需要知道，这条消息有多少人已读多少人未读，就需要一个基础表来记录这个关系。

5.5K2 0

利用websocket实现web端在线客服实时聊天系统

3.需要查看对方是否已读自己的消息开发需求一、技术选型使用websocket进行消息推送优点:个人感觉开发简单，不需要部署第三方服务缺点:无状态，页面每刷新一次就会产生一个新的session....对接收人（发送人）来说，显示最新的消息和时间，就意味着显示双方消息记录的最后提条消息的内容和发送时间 3.消息已读意味着打开聊天对话框就要告诉对方，自己已读对方的消息。...这里会产生两种情况： ①己方在线对方未在线,需要在对方上线时(即打开对话框)告诉对方自己已读对方的消息解决方案：存储消息数据，在自己打开对框的时候，获取聊天记录，并将聊天记录中对方给自己发的消息状态全部更新为已读...②双方同时在线（聊天对话界面）,这里稍微有点操作，那就是如何让双方及时的知道对方已读自己的消息。...4.利用mongodb进行用户以及聊天记录的存储效果演示消息聊天演示：消息时间演示：消息未读演示：软件需求实现 1.技术架构 PC端：vue+springboot

6.2K2 0

点击加载更多

面试题：群聊消息的已读未读设计

钉钉消息已读、未读咋实现的嘞？

面试官：群聊消息的已读未读功能，你来设计一个?

IM群聊消息的已读未读功能在存储空间方面的实现思路探讨

Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章

使用腾讯云IM搭建应用内类微信社交聊天模块实践

Vue实现的聊天系统

react全家桶 NodeJS MongoDB搭建实时聊天的app

使用腾讯云IM搭建应用内类微信社交聊天模块实践

Websocket IM聊天教程-教你用GoEasy快速实现IM聊天

在线客服系统客服消息表设计，我到底在想什么？

进阶篇 - 交互功能与状态管理

127. 侧边栏容器实战：社交应用联系人列表基础篇

uni-app+php+workman实现简单聊天功能之聊天模块封装

在线客服系统实现复杂统计需求，直接SQL操作查询数据库，统计超过一分钟未回复消息数

feed留，单聊群聊，系统通知，状态同步，到底是推还是拉？

QQ项目之六聊天窗口

iOS音视频接入- IM及时通讯基本原理

IM群聊消息的已读回执功能该怎么实现？

利用websocket实现web端在线客服实时聊天系统

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐