首页 > 建站教程 > JS、jQ、TS >  聊天IM的时间戳显示规则正文

聊天IM的时间戳显示规则

我爱模板网在做一个就诊APP的聊天功能时,界面要显示聊天时间,参考了QQ和微信,发现时间显示规则比较复杂,在网上找了篇文章,说的比较好,这里记录下:

参考基准

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

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条);

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

示例截图如下: