文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用JS将聊天记录聚合在一起

2024-12-03 15:18

关注

前言

我们在QQ上聊天时,同一分钟的聊天记录会被放在一起展示,当我们发送消息时,每条消息的发送时间都会精确到秒,那么他是如何实现将这些数据按分钟划分到一起的显示的呢?

今天在给我开源项目的聊天记录添加消息发送时间展示时,正好遇到了这个问题,一开始想不明白应该如何处理这些数据,后来经过一番思考后,终于有了实现思路,将其实现了,本文就跟大家分享下我的实现思路以及过程,欢迎各位感兴趣的开发者阅读本文。

实现思路

先跟大家看下我的数据,如下所示:

  1. [{ 
  2.  "createTime""2020-12-21 20:58:19"
  3.  "avatarSrc""https://www.528045.com/file/upload/202412/02/wcf1pzzcecb.jpg"
  4.  "msgId""121710f399b84322bdecc238199d6888"
  5.  "msgText""/坏笑/"
  6.  "userName""神奇的程序员"
  7.  "userId""c04618bab36146e3a9d3b411e7f9eb8f"
  8.  "status"false 
  9. }, { 
  10.  "createTime""2020-12-21 20:58:22"
  11.  "avatarSrc""https://www.528045.com/file/upload/202412/02/wcf1pzzcecb.jpg"
  12.  "msgId""121710f399b84322bdecc238199d6888"
  13.  "msgText""还有人吗"
  14.  "userName""神奇的程序员"
  15.  "userId""c04618bab36146e3a9d3b411e7f9eb8f"
  16.  "status"false 
  17. }, { 
  18.  "createTime""2020-12-21 20:58:46"
  19.  "avatarSrc""https://www.528045.com/file/upload/202412/02/wcf1pzzcecb.jpg"
  20.  "msgId""121710f399b84322bdecc238199d6888"
  21.  "msgText""聊天记录,添加了消息发送时间"
  22.  "userName""神奇的程序员"
  23.  "userId""c04618bab36146e3a9d3b411e7f9eb8f"
  24.  "status"false 
  25. }, { 
  26.  "createTime""2020-12-21 20:58:52"
  27.  "avatarSrc""https://www.528045.com/file/upload/202412/02/wcf1pzzcecb.jpg"
  28.  "msgId""121710f399b84322bdecc238199d6888"
  29.  "msgText""现在看起来就方便多了"
  30.  "userName""神奇的程序员"
  31.  "userId""c04618bab36146e3a9d3b411e7f9eb8f"
  32.  "status"false 
  33. }, { 
  34.  "createTime""2020-12-21 21:35:27"
  35.  "avatarSrc""https://www.528045.com/file/upload/202412/02/wcf1pzzcecb.jpg"
  36.  "msgId""121710f399b84322bdecc238199d6888"
  37.  "msgText""/坏笑/"
  38.  "userName""神奇的程序员"
  39.  "userId""c04618bab36146e3a9d3b411e7f9eb8f"
  40.  "status"false 
  41. }] 

观察上方数据,我们发现:每个消息对象都有一个createTime属性,它是消息的发送时间,精确到了时分秒,现在我们要做的就是把同一分钟的时间只保留一个createTime属性,渲染时间的时候只渲染拥有createTime属性的对象,这样就做到了将相同分钟的数据渲染到了一起。

大体思路就是这样,接下来我们看下具体的思路:

  1. 声明一个对象命名为timeObj,存放消息对象里createTime字段的年-月-日 时:分,声明一个新的消息记录数组finalTextList存放处理好的数据
  2. 遍历消息记录数组,获取当前遍历到的消息记录对象
  3. 获取遍历到的消息记录对象的createTime属性,截取 年-月-日 时:分,声明一个变量time来保存
  4. 判断time是否存在于timeObj中
  5. 如果存在就删除遍历到的消息记录对象中的createTime属性,将删除属性后的消息记录对象放进finalTextList中
  6. 否则将time作为属性放进timeObj中,将遍历到的消息记录对象原封不动的放进finalTextList中

处理好数据后,我们在渲染时判断当前渲染项里是否存在createTime,如果存在就渲染。

实现过程

接下来,我们在拿到接口返回的数据后将其按照上述思路进行处理。

处理接口返回的数据

如下所示res.data.messageTextList为接口返回的消息记录列表。

  1. // 消息内容列表 
  2. const messageTextList: Array = res.data.messageTextList; 
  3. // 处理好的消息内容数组 
  4. const finalTextList: Array = []; 
  5. // 时间存放对象 
  6. const timeObj: { [key: string]: boolean } = {}; 
  7. // 处理消息内容列表,同一分钟的数据只保留一个创建时间 
  8. for (let i = 0; i < messageTextList.length; i++) { 
  9.     // 消息对象 
  10.     const messageObj = messageTextList[i]; 
  11.     // 获取时间的 年-月-日 时:分 
  12.     const time = (messageObj.createTime as string).substring(0, 16); 
  13.     // timeObj中已经存在time,则移除当前消息对象的createTime 
  14.     if (_.has(timeObj, time)) { 
  15.         // 移除createTime属性 
  16.         _.unset(messageObj, "createTime"); 
  17.         // 将移除createTime属性的消息对象放进处理好的消息数组中 
  18.         finalTextList.push(messageObj); 
  19.     } else { 
  20.         // 将time作为key放进timeObj中 
  21.         timeObj[time] = true
  22.         // 原封不动的将消息对象放进处理好的消息数组中 
  23.         finalTextList.push(messageObj); 
  24.     } 
  25. // 渲染消息列表 
  26. this.renderPage(finalTextList, {}); 

上述代码中的msgListType为消息记录对象的类型定义,has为lodash的方法用于判断对象中是否包含某个属性,unset也为lodash的方法用于移除对象中的某个属性。

处理推送数据

收到服务端推送的数据时,我们要将服务端推送的消息聚合到已经渲染的聊天记录里,如果不是同一分钟的消息则渲染新的时间,因此我们要取出当前推送消息的createTime字段,截取年-月-日 时:分判断其是否在已渲染的消息记录列表里,如果不存在则原封不动的渲染,否则就删除createTime字段后渲染,代码如下:

  1. // 接收到服务端推送的新消息,渲染单个消息对象 
  2. const thisSenderMessageObj: msgListType = { 
  3.     msgText: msgObj.msgText, 
  4.     avatarSrc: msgObj.avatarSrc, 
  5.     userId: msgObj.userId, 
  6.     userName: msgObj.userName, 
  7.     createTime: msgObj?.createTime 
  8. }; 
  9.  
  10. // 找到消息记录列表中与新消息的同一分钟的消息,移除新消息的createTime对象 
  11. for (let i = 0; i < this.senderMessageList.length; i++) { 
  12.     const messageObj: msgListType = this.senderMessageList[i]; 
  13.     // 截取当前消息与新消息发送时间的 年-月-日 时:分,判断其是否相等 
  14.     if (_.isEqual(    messageObj.createTime?.substring(0,16),thisSenderMessageObj.createTime?.substring(0, 16))) { 
  15.         // 移除新消息的createTime属性 
  16.         _.unset(thisSenderMessageObj, "createTime"); 
  17.    } 
  18.  
  19. // 解析并渲染 
  20. this.messageParsing(thisSenderMessageObj); 

msgObj为服务端推送的消息

渲染页面

接下来我们看看页面的渲染代码,如下所示,只渲染对象中包含createTime属性的数据

  1. --消息发送时间--> 
  2. "snder-time-panel" v-if="item.createTime"
  3.   {{ item.createTime.substring(5, 16) }} 
 

实现效果

最后我们来看看实现的效果,如下所示:

我们再来发送一条消息看看效果,如下所示:图片太大此处无法显示,请在尾部阅读原文进行查看。

项目地址

代码地址:message-display.vue

在线体验地址:chat-system

本文转载自微信公众号「 神奇的程序员k」,作者 神奇的程序员k 。转载本文请联系 神奇的程序员k公众号。

 

来源:神奇的程序员k内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯