聊天IM的时间戳显示规则

======================================================

以下规则是在体验微信操作后,推测出来的规则,可能存在一些不准确的表述

======================================================

 

参考基准

当处于正在聊天时,聊天内容比聊天时间更为重要,尽量避免时间和发送状态对聊天内容的干扰,简化界面,仅保留最核心的信息:发送者、发送内容。

 

Badge(未读消息数量)

当消息数量达到三位数时(也即消息数量 > 99),显示…而非数字,缓解/减轻强迫症患者的心理压力

 

时间戳显示

时间戳由客户端自行处理,时间戳的显示根据不同的场景进行显示,可参考下面几种典型的使用场景,但无论怎么显示,消息之间超过5分钟都需要显示时间戳了。

 

 

###点击聊天列表,进入聊天详情时(单聊或群聊)

1)获取数据

获取最近最多20条数据(20条为一页数据,超过20条时只取最近的20条,少于20条时有多少取多少)

2)显示数据

获取第一条消息的接收时间,然后将这个时间戳插入到界面并记录下来(假设使用变量lastShowTimeStamp进行记录),然后将消息按时间戳(从小到大排序,老消息在前新消息在后),追加到界面中,但需要注意时间戳的显示规则。

循环遍历每条消息时,需要判断该消息的接收时间与最后一次显示时间戳的时间间隔,当大于5分钟(300ms)时则再追加一条时间戳,同时更新lastShowTimeStamp的值。

 

###时间戳的显示规则

一天内的消息显示为:“昨天 时:分”

二天至七天内显示为:“星期X 时:分”

当大于7天时显示为:“YYYY年X月X日时:分”

时、分不足二位时,前面用0补齐,月、日不足二位时不补位。如:2016年7月13日 09:22,注意计算天数是要算天,不能拿毫秒进行比较。否则昨天上午的消息,在今天下午看时将会变成“星期X 09:10”,正确的应该是“昨天 09:10”

示例截图如下:

 

 

###聊天ing

当收到新消息时,判断当前收到的消息与lastShowTimeStamp之间的间隔,大于5分钟时就显示时间戳,同时更新lastShowTimeStamp的值为当前新消息收到的时间戳。

会出现一种情况,当5分钟内,消息很频繁而导致消息量达到100条,那么这一千条数据中间是没有任何时间戳的。如果退出聊天界面再重新进入时,参考第一条规则。

示例截图:

 

###当向下拉取消息时

向上拉取消息时,获取向上的20条数据(一页,不足一页时有多少取多少),然后根据第一条的规则来显示。

先显示时间戳,然后判断每一条时间戳与上一次显示的时间戳进行比较,间隔大于5分钟时显示新的时间戳,唯一与第一条规则不同的是,此时不要更新lastShowTimeStamp的值。因为lastShowTimeStamp的值是用来判断新消息的,老消息需要判断的话使用一个临时变量记录即可,拉取并显示完一页数据就丢弃掉了。

会出现一种情况,就是向上拉取消息时,你会遇到同一分钟内发送的消息各有一个时间戳,而且时间戳是相同的。出现的原因是消息分属在二页内了

示例截图如下:

 

 

###删除单条消息时

删除一条消息时,如果被删除的消息上一条是时间戳,而下一条不是一条消息记录时就将时间戳一并删除掉。

这样会导致一种情况,时间戳被删除掉之后,lastShowTimeStamp并没有进行更新,如果此时再接收到新消息时,它不会再显示时间戳,直到新消息超过5分钟的间隔才重新显示时间戳并更新lastShowTimeStamp的值。删除完消息后检查当前消息数,少于一页时自动再加载上一页数据,直至没有消息可供加载。

示例截图如下(第一张图是正常的,第二张图是非正常的,退出聊天重新进入或等5分钟之后便可恢复正常):

 

 

###批量删除消息时

规则与单删类似,唯一的不同的,当选中某一行时需要向上、向下遍历。

向上遍历时:

如果上一条消息是未选中状态,中止向上查找;

如果上一条消息是选中状态,继续向上不断查找,直到找到未选中消息(中止)、找到时间戳(记录下该时间戳的位置,然后向下遍历);

向下遍历时:

如果下一条消息是未选中状态,记录的时间戳位置清除,中止向下查找;

如果下一条消息是选中状态,继续向下不断查找,直到找到未选中消息(中止并清除)、找到时间戳(成功找到,也就是向前是一个时间戳,向后也是一个时间戳或是最后一条消息也记录向上查找到的时间戳)

注:批量删除时,一次最多能选择删除100条数据。消息删除后,需要判断当前消息数量是否够一页(20条),不够就再向上加载一页数据(20条);

在点击删除时,一次性进行删除操作,避免遍历影响性能。

示例截图如下:

时间: 2024-10-05 05:44:54

聊天IM的时间戳显示规则的相关文章

Wireshark技巧-过滤规则和显示规则

Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在Wireshark通过winpacp抓包时可以过滤掉不符合条件的包,提高我们的分析效率. 如果要填写过滤规则,在菜单栏找到capture->options,弹出下面对话框,在capture filter输入框内填写相应的过滤规则,点击下方的start 就生效了. 1.只抓取HTTP报文 tcp port 80 解析:上面是只抓取tcp 协议中80端口的包,大部分Web网站都是工作在80端口的,

Wireshark技巧-过滤规则和显示规则【转】

转自:https://www.cnblogs.com/icez/p/3973873.html Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在Wireshark通过winpacp抓包时可以过滤掉不符合条件的包,提高我们的分析效率. 如果要填写过滤规则,在菜单栏找到capture->options,弹出下面对话框,在capture filter输入框内填写相应的过滤规则,点击下方的start 就生效了. 1.只抓取HTTP报文 tcp por

图片下载本地缓存时间戳显示图片方法

来源:http://ask.dcloud.net.cn/article/511 源码下载 参考文章http://ask.dcloud.net.cn/article/256http://ask.dcloud.net.cn/article/397 说明:为了方便,里面使用的图片来源是从上面文章中的源码项目获取的.说明:参考了上面文章中的思路,然后自己重新写了一个较为完整的图片本地缓存显示工具.功能1.第一次显示图片时下载到本地,然后之后如果本地存在缓存(根据url),则显示本地缓存的图片2. 基于p

JAVA聊天室客户端不显示内容,服务端没问题的原因总算找到了

o(≧口≦)o刚才打了很多内容,结果忘了网络断开了,没法自动存稿.结果一发布把内容都弄没了.气死,不写了. 今天讲的是JAVAEE,讲的很快,主要就重点或者是和SE不一样的才过一下,差不多的就跳过去,让我们自己看PPT......(没掉的内容)...... 上周做了个简单的聊天室功能代码,一直出错.发的内容只能在服务端看到,客户端却看不到.字符串一直等待接收,但就是收不到.对着老师的代码改了好几遍,还是不行.还让老师帮忙看了很久,也还是没发现问题.今天下午又试着做了一遍,不过代码不熟,还是按照自

android 网络运营商名称显示规则(锁屏界面,下拉列表)

一:Background & 相关flow MTK Operator name display在手机中分成两种类型: 1. Sim卡名称: 根据开机从SIM卡中读取的IMSI去到Spn-conf.xml中(如果是MVNO的卡则是Virtual-spn-conf-by-***.xml中)匹配得到的name,会保存在SIMInfo这个database中,后续sim卡的名称就从此database中取得 关于MVNO可以参考如下FAQ: ID: FAQ09811 [NW]如何区分MNO和MVNO 使用场

php格式化时间戳显示友好的时间

在项目中时间一律显示为2014-10-20 10:22显得很呆板.在微博.QQ空间等网站通常会显示为几秒前,几分钟前,几小时前等容易阅读的时间,我们称之为友好的时间格式.那么用php怎么实现呢? 大体思路如下: 如果是跨年并且大于3天就显示为具体的时间 如果是今天的 如果是一分钟内则显示几秒之前 如果是一小时内则显示几分钟前 如果是当天且大于一小时则显示为几小时前 如果是昨天则显示为昨天几点 如果是前天则显示为前天几点 如果大于三天(没有跨年)则显示为几月几号 根据以上思路就不难写出实现代码了:

table-layout 显示规则以及其他一些零碎的东西

首先对中文显示的不够好 对中文失效 auto是表格的宽和高都会随着内容增多而改变  而fixed只会增加表格的高度   宽度不会发生改变 table中的td的宽,高会根据内容的多少而变化: fixed:如果内容是中文的话td的宽度固定,高度根据内容的多少而变化,没有限制.如果是英文的话,宽高不变,内容宽度如果超出就会溢出. 一,border:外边框:二,vertical-align: 1 top/middle/bottom; 2,默认:middle:,三,border-collapse: 1,可

iOS 图片 的 聊天气泡显示 Objective-C 和 Swift

如何实现聊天软件的图片显示的剪裁后的气泡呢 Objective-C: <pre name="code" class="objc">- (void)viewDidLoad { [super viewDidLoad]; UIImageView *ImageView01 = [[UIImageView alloc] init]; [ImageView01 setFrame:CGRectMake(90, 190, 120, 180)]; [ImageView01

js jq插件 显示中文时间戳 刚刚 N分钟前 N小时前 今天 上午 下午

$.fn.extend({ /* ** 时间戳显示为[不久前,刚刚,N分钟前,N小时前,N天前,N周前,N月前,N年N月N日]的处理 ** eg. ** $('1517451000000').commonTimeStamp(); // 2018年02月01日 ** $(new Date('2018-02-01 15:10:00').getTime()).commonTimeStamp(); // 1分钟前 */ "commonTimeStamp": function () { // 补