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

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

示例截图如下:

目录
相关文章
|
3月前
|
安全 前端开发 关系型数据库
IM即时通讯系统开发技术规则
IM即时通讯系统开发涵盖客户端与服务器端,涉及前端、后端、网络通信及多媒体处理等技术领域,支持文字、语音、图片、视频等多种实时交流方式。开发流程包括需求分析、技术选型、系统设计、开发实现、测试优化及部署维护等阶段,需关注网络通信、多媒体处理、安全性及可扩展性等关键技术点,广泛应用于社交、客服、团队协作及游戏等领域。
|
Java Android开发 数据安全/隐私保护
im即时通讯开发/聊天软件系统/社交APP源码搭建/私有化部署聊天原生开发源码快速搭建
由IM技术专家打造的基于 Java 实现的即时通讯(IM)项目 我们提供私有化即时通讯解决方案,独立部署在您自己的服务器上、代码可以开源、支持二次开发、苹果端上线指导,源码出售,提供远程技术指导,全程指导服务器部署打包. 特点:原生开发 超高并发 音视频通话
im即时通讯开发/聊天软件系统/社交APP源码搭建/私有化部署聊天原生开发源码快速搭建
|
14天前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
23 1
|
7月前
|
机器学习/深度学习 自然语言处理 机器人
【Tensorflow+自然语言处理+LSTM】搭建智能聊天客服机器人实战(附源码、数据集和演示 超详细)
【Tensorflow+自然语言处理+LSTM】搭建智能聊天客服机器人实战(附源码、数据集和演示 超详细)
768 10
|
7月前
|
JSON 算法 Dubbo
Netty入门实践-模拟IM聊天
本文以入门实践为主,通过原理+代码的方式,实现一个简易IM聊天功能。分为2个部分:Netty的核心概念、IM聊天简易实现。
|
7月前
|
自然语言处理 算法 数据库
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
127 0
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
93 0
|
7月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
261 0
|
JSON 安全 前端开发
得物自研客服IM中收发聊天消息背后的技术逻辑和思考实现
本文将探秘得物自研客服IM中收发聊天消息背后的技术逻辑和思考实现,帮助大家了解如何在IM聊天场景中提供高效、安全、可靠和良好的用户体验。
79 0
|
存储 编解码 安全
基于Netty的IM聊天加密技术学习:一文理清常见的加密概念、术语等
本文正好借此机会,以Netty编写的IM聊天加密为例,为入门者理清什么是PKI体系、什么是SSL、什么是OpenSSL、以及各类证书和它们间的关系等,并在文末附上简短的Netty代码实示例,希望能助你通俗易懂地快速理解这些知识和概念!
223 0
基于Netty的IM聊天加密技术学习:一文理清常见的加密概念、术语等

热门文章

最新文章