【开发经验】通知气泡实现思路

文章目录

背景

        在im即时通讯中、公告栏等功能中,有一个功能叫通知气泡,就是提示用户有多少消息未读,然后让用户点击之后,气泡消失。

在这里插入图片描述

        看似简单的功能,在设计起来很有讲究,因为,这种消息通知,肯定有私聊、广播、发送部分人等。简单的来设计,会设计出一个消息发送表。字段大概为,或者如果有群发、分组发、类型发时,可能要设计出两个表:

消息发送表:id、发送人、接收对象(群组id、类型id、userId)、接收类型(群组、类型、人)、发送时间

消息已读表:id、消息id、接收人、接收时间

        这种设计有个很明显的弊端,看似简单的一个功能 ,如果要过滤当前未读的数据,要先检索当前用户所属类型、群组下是否有未读消息,加上当前人是否有私聊消息。相对麻烦。

        并且,消息已读表中的数据,数量庞大,但是意义不大。

优化思路

根据发送时间来筛选气泡,去除消息已读表

每个用户附加一个拉取最后一条消息的时间,然后根据时间进行过滤。

image-20220830155822567

        如上图所示,每个用户记录当前用户接收到最后一个消息的id或者时间。如记录最后一个消息的时间。过滤时,只需要过滤发送给自己的,并且大于当前记录的消息时间即可。

        每次拉取最新消息之后,刷新用户最后接收的消息id或时间。

        注:此思路适合简单的消息通知,在如果是复杂的即时通讯功能,如钉钉中的消息已读功能实现,此思路仅可参考。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cesium是一个用于构建地理空间应用的开源JavaScript库。借助Cesium,可以通过在虚拟地球上加入各种元素,包括气泡框。 要实现一个气泡框,首先需要通过Cesium创建一个场景,并在场景中添加需要显示的实体或标记。可以使用Cesium的Entity对象或Marker对象来表示这些元素。然后,可以通过为每个实体或标记添加描述信息,将气泡框链接到相应的元素上。 在添加实体或标记时,可以为每个元素指定位置信息,例如经纬度或笛卡尔坐标。这样,当用户与虚拟地球交互时,可以根据元素的位置在相应的位置显示气泡框。 为了实现气泡框的显示效果,可以使用Cesium的Popup对象或自定义HTML元素来创建一个浮动的信息窗口。可以使用CSS样式定义气泡框的外观,例如背景颜色、边框和文本样式等。而且,Cesium提供了丰富的API来控制气泡框的显示位置、大小和内容。 要显示一个气泡框,可以在用户与元素交互时触发事件,例如当鼠标悬停在元素上或用户点击元素时。在事件处理程序中,可以根据元素的位置和描述信息,动态创建气泡框,并将其添加到场景中。在气泡框中,可以显示元素的详细信息,例如名称、描述、图标等。 总之,使用Cesium可以很方便地实现气泡框的效果。通过添加实体或标记,并使用Popup对象或自定义HTML元素,可以在虚拟地球上显示具有交互性的气泡框,以展示元素的详细信息。无论是构建地图应用还是可视化地理数据,Cesium都是一个强大的工具。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叁滴水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值