网易云信im 的聊天记录展示

说一下我的需求，就是我们的app集成了网易云信的im实时聊天功能，然后产品说运营后台需要页面可以查询并展示两个人的聊天记录,聊天记录有文本消息，语音，图片、文件，视频，自定义消息登等，都需要展示出来，语音，视频要支持可以点击查看。也就是一个聊天记录的展示功能，难道要自己写一个吗，这也太nice了，不不不我不要，我们的管理后台ui用的是layui框架，就去看了一下它的组件，发现它有一个layim的插件，里面包含了一套展示聊天历史记录的样式，就试着弄了下居然成了，这里记录一下：

首先引入layim相关的js与css样式，因为layim是一个收费插件，所以下载的layui js文件里面是没有layim js与css样式的，需要自己去网上找lay im 的插件包，然后放到layui下面的模块里面，然后新建一个要展示聊天记录的html页面，里面的内容如下:

{include file="public/header.html"}
<html>
<head><meta charset="UTF-8"><title>聊天记录</title><style>body .layim-chat-main {height: auto;}.layim-chat-mine img{width:400px;height:500px;border-radius:1%}</style>
</head>
<body>
<div class="layim-chat-main"><ul id="LAY_view"></ul>
</div>
<div id="LAY_page" style="margin: 0 10px;"></div>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data.data, function(index, item){if(item.fromUserId == d.data.uid){ }}<li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.fromUserLogo }}"><cite><i>{{ item.sendtime}}</i>{{ item.fromUserName}}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>{{# } else { }}<li><div class="layim-chat-user"><img src="{{ item.fromUserLogo }}"><cite>{{ item.fromUserName }}<i>{{ item.sendtime }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>{{# }
}); }}
</textarea><script type="application/javascript">layui.use(['layim', 'laypage'], function () {var layim = layui.layim, layer = layui.layer, laytpl = layui.laytpl, $ = layui.jquery, laypage = layui.laypage;//开始请求聊天记录var param = location.search; //获取url上面的参数，参数上有消息的类型var array=param.replace("?fromUserId=", "").replace("toUserId=", "").split("&");var fromUserId = array[0];var toUserId=array[1];var res = {code: 0, msg: '', uid: fromUserId, data:""};//console.log(res);$.ajax({type: 'get',url: '/invite_chat/data_detail',dataType: 'json',data:{"fromUserId":fromUserId, "toUserId":toUserId, "page":1, "limit":100},contentType: "application/json;charset=UTF-8",beforeSend: function () {layer.load(1, { //icon支持传入0-2content: '查询中...',success: function (layero) {layero.find('.layui-layer-content').css({'padding-top': '39px','width': '60px'});}});},complete: function () {layer.closeAll('loading');},success: function (msg) {laypage.render({elem: 'LAY_page',count: res.data.total,limit: res.data.limit,prev: '<i class="layui-icon"></i>',next: '<i class="layui-icon"></i>',layout: ['prev', 'next'],curr: res.data.limit,jump: function(obj, first){//obj包含了当前分页的所有参数，比如：//首次不执行if(first){var page = res.data.limit;}else{var page = obj.curr;}$.ajax({type: 'get',url: '/invite_chat/data_detail',dataType: 'json',data: {"fromUserId": fromUserId, "toUserId": toUserId, page: obj.curr || 1, "limit":100},contentType: "application/json;charset=UTF-8",success: function (msg) {res.data=msg.data.records;var html = laytpl(LAY_tpl.value).render({data: res});$('#LAY_view').html(html);}})}});},error: function (err) {console.log("err:", err);}});});
</script>
</body>
</html>

然后在你要弹出聊天记录的页面调用这个页面，里面的ajax请求去调服务器的聊天记录接口，返回相应的聊天记录，并封装成，如下json格式(这一步建议在服务端做) ：

{
"code": 0,
"msg": "",
"uid": "22241",
"data": [
{
"fromUserId": 64759,
"fromUserName": "123",
"fromUserLogo": "logo图片地址",
"toUserId": 22241,
"toUserName": "狮子-个人",
"toUserLogo": "logo图片地址",
"sendtime": "2020-09-18 16:30:30",
"content": "file(可访问的文件地址)[93bf7154c5c76d570173a3f672f90aaf.txt]"
},
{
"fromUserId": 64759,
"fromUserName": "123",
"fromUserLogo": "",
"toUserId": 22241,
"toUserName": "狮子-个人",
"toUserLogo": "",
"sendtime": "2020-09-18 16:30:08",
"content": "img[可访问的图片地址]"
},
{
"fromUserId": 64759,
"fromUserName": "123",
"fromUserLogo": "",
"toUserId": 22241,
"toUserName": "狮子-个人",
"toUserLogo": "",
"sendtime": "2020-09-18 16:29:43",
"content": "audio[可访问的音频文件地址]"
},
{
"fromUserId": 22241,
"fromUserName": "狮子-个人",
"fromUserLogo": "",
"toUserId": 64759,
"toUserName": "123",
"toUserLogo": "",
"sendtime": "2020-09-07 10:29:30",
"content": "[可爱]"
}
]
}

然后就能展示出来，效果图如下：

这是客户端的相关代码，然后服务端也要做相关的处理，才能展示文件，视频，音频等，相关代码如下：

需要根据网易云信im接口返回的消息的类型转换成layui可以解析的相关消息类型，这样就可以实现在运营后台用layim 展示网易云信im的历史消息记录，可以算借尸还魂了吧哈哈

请大家关注下博客谢谢

欢迎小伙伴加微信探讨

网易云信im 的聊天记录展示相关推荐

网易云信IM小程序上线？我们是这么做的！
为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力演示提供开发者小程序开发参考换句话说就是 ...
微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
连麦互动直播方案全实践3：网易云信连麦互动的实现方案
毫无疑问直播是当前移动互联网最热门的领域之一,在超强热度的引导下直播领域也吸引了大量的商业资本.在各大直播应用万花齐放的时刻,也正是直播应用面临的真正风口.站在这个风口上,直播应用只把握好风向标,推出 ...
网易云信携手武汉三好教育，共筑教育援疆的「云桥梁」
"教育兴则国家兴,教育强则国家强."从往至今,随着时代向前,教育的重要性愈发凸显:人才的汇聚涌现.文化的多元交融.科技的探索创新,均离不开优质的教育资源. 而教育信息化的加速推进, ...
网易云信助力长沙银行打造远程视频银行 | 字母点评数字化先锋案例
关于"数字化先锋"系列数字化转型是迈向数字经济社会的重要一步,是数字化技术与传统产业融合的重要进程.在数字化的探索中,不乏先锋者的身影,这些"数字化先锋"凭借 ...
网易云信助力中国航空工业集团，打造数字化云办公平台
近年来,创新技术的不断升级迭代和突如其来的新冠肺炎疫情对各行各业数字化转型的推动,让企业管理者普遍认同数字化.智能化的企业运营模式能够有效助力企业抗击风险.提升效能.获得长远发展.不管企业属于什么行业 ...
教师节特辑丨网易云信：素质教育「名师」是如何炼成的？
又到一年教师节,在这个特殊的节日里,你的脑海中会浮现什么? 是老师们每天的谆谆教诲与循循善诱,还是他们带来的妙趣横生.灵动鲜活的课堂,亦或是他们创造的科技感十足.多维互动的教学模式? 说起教学模式,科 ...
娱乐社交，玩票大的！网易云信“2021融合通信开发者大赛”正式收官！
引言每一位开发者,都是改变世界的坚实力量每一处创新,都是在向下个时代一往无前地迈进 5月29日,2021年网易MCtalk泛娱乐科技峰会在京召开.峰会现场,由网易云信主办的首届"娱乐 ...
亮相LiveVideoStackCon 2021，网易云信分享QoS优化之道
2021年4月16日,多媒体技术领域盛会LiveVideoStackCon音视频技术大会在上海举行.本届会议以"新技术,新机会"为主题,聚焦在音频.视频.图像等技术的最新探索与应用 ...

网易云信im 的聊天记录展示

网易云信im 的聊天记录展示相关推荐

最新文章

热门文章