How to use layim to initialize history records (code attached)

The content of this article is about how to use layim to initialize historical records (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Language: PHP layui
No local cache is used, all data from the background interface

When building a work order system, customer requirements must be like QQ chat . I am an old phper who has been deeply ingrained for many years, and I immediately think of layim. However, some minor problems arose when traversing the work order history messages. After a day of familiarity, I finally figured it out. I will share my code below and make a record.
PS: I am not a professional front-end, and the method is not used well, so don’t complain
- The first is to configure layim, which is the configuration of the official document.

layim.config({
                        init: { }
                        ,voice:false
                        ,brief:false//是否简约模式，简约模式没有关闭按钮
                    });

One thing to note here is that there is no close button in [Simple Mode]. If you need a close button and don't want a list, you can use CSS to remove it.

.layui-layim{
            display: none;
        }

The next step is to traverse the historical messages

// 清空所有本地缓存消息
localStorage.clear();
// 先打开窗口
 layim.chat({
 name: '专家答疑'
      ,type: 'friend'
       ,avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
       ,id: question_id
     });
// 获取历史消息
$.ajax({
url:"{:url('meet/get_init_msg')}",
type:"post",
data:{question_id:question_id},
dataType:"json",
success:function (data) {
if(data.length > 0){
for (var i in data){
layim.getMessage({
username: "专家答疑" //消息来源用户名
      ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
      ,id: data[i]['question_id']//消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
      ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
      ,content: data[i]['content'] //消息内容
      ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
      ,mine: true //是否我发送的消息，如果为true，则会显示在右方
      ,fromid: data[i]['user_id'] //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
      ,timestamp: data[i]['addtime'] * 1000 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
      });
layim.getMessage({
             username: "专家答疑" //消息来源用户名
             ,avatar: "//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg" //消息来源用户头像
             ,id: data[i]['question_id']//消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
             ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
             ,content: data[i]['feedback']//消息内容
             ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
             ,mine: false //是否我发送的消息，如果为true，则会显示在右方
             ,fromid: data[i]['user_id'] //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
             ,timestamp: data[i]['zhuan_time'] * 1000 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
            });
           }
     }
  }
});

The final message sent and so on are all in the document, so I won’t go into details here, and finally attach all the codes
JS code :

<script>
function im(question_id)
 {
   layui.use([&#39;layim&#39;,&#39;jquery&#39;], function(){
  var layim = layui.layim
  ,$ = layui.jquery;
   //基础配置
   layim.config({
    init: {
        url:"{:url(&#39;meet/get_user_chat&#39;)}"
        ,data:{question_id:question_id}
       }
       ,voice:false
       ,brief:false//是否简约模式，简约模式没有关闭按钮
       });
       // 清空所有本地缓存消息
       localStorage.clear();
       // 先打开窗口
       layim.chat({
       name: &#39;专家答疑&#39;
       ,type: &#39;friend&#39;
       ,avatar: &#39;//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg&#39;
       ,id: question_id
       });
       // 获取历史消息
       $.ajax({
       url:"{:url(&#39;meet/get_init_msg&#39;)}",
       type:"post",
       data:{question_id:question_id},
       dataType:"json",
       success:function (data) {
       if(data.length > 0){
       for (var i in data){
       layim.getMessage({
       username: "专家答疑" //消息来源用户名
       ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
       ,id: data[i][&#39;question_id&#39;]//消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
       ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
       ,content: data[i][&#39;content&#39;] //消息内容
       ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
       ,mine: true //是否我发送的消息，如果为true，则会显示在右方
       ,fromid: data[i][&#39;user_id&#39;] //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
       ,timestamp: data[i][&#39;addtime&#39;] * 1000 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
       });
  layim.getMessage({
       username: "专家答疑" //消息来源用户名
       ,avatar: "//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg" //消息来源用户头像
       ,id: data[i][&#39;question_id&#39;]//消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
       ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
       ,content: data[i][&#39;feedback&#39;]//消息内容
       ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
       ,mine: false //是否我发送的消息，如果为true，则会显示在右方
       ,fromid: data[i][&#39;user_id&#39;] //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
       ,timestamp: data[i][&#39;zhuan_time&#39;] * 1000 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
       });
     }
  }
 }
});
// 监听发送消息
layim.on(&#39;sendMessage&#39;, function(res){
var mine = res.mine.content; //包含我发送的消息及我的信息
});
});
}
</script>

CSS code:

<style>
        .layui-layim{
            display: none;
        }
    </style>

Finally attached is a picture of the finished product:

Related recommendations:

The above is the detailed content of How to use layim to initialize history records (code attached). For more information, please follow other related articles on the PHP Chinese website!