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

置顶 luhaichuan88

已于 2023-04-03 15:08:32 修改

阅读量3.1k

点赞数

文章标签： html 前端 css

于 2020-09-24 14:44:16 首次发布

本文链接：https://blog.csdn.net/luhaichuan88/article/details/108773308

版权

说一下我的需求，就是我们的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">&#58970;</i>'
                    ,next: '<i class="layui-icon">&#xe65b;</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": "[可爱]"
}
]
}