聊天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条）；

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

示例截图如下：