说一下我的需求,就是我们的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-2
content: '查询中...',
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的历史消息记录 ,可以算借尸还魂了吧哈哈
请大家关注下博客谢谢
欢迎小伙伴加微信探讨