Comment utiliser layim pour initialiser les enregistrements d'historique (code ci-joint)

Le contenu de cet article explique comment utiliser layim pour initialiser des enregistrements historiques (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Langue : PHP+layui
Aucun cache local n'est utilisé, toutes les données de l'interface en arrière-plan

Lors de la création d'un système de bon de travail, le client exige que le chat comme QQ Idem . Je suis un vieux phper profondément enraciné depuis de nombreuses années, et je pense immédiatement aux laïcs. Cependant, quelques problèmes mineurs sont survenus lors du parcours des messages de l'historique des bons de travail. Après une journée de familiarité, j'ai finalement compris, je vais partager mon code ci-dessous et faire un enregistrement.
PS : je ne suis pas un front-end professionnel, et la méthode n'est pas bien utilisée, donc ne vous plaignez pas
- La première est de configurer layim, qui est la configuration du document officiel.

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

Une chose à noter ici est que le [Mode simple] n'a pas de bouton de fermeture. Si vous avez besoin d'un bouton de fermeture et que vous ne voulez pas de liste, vous pouvez utiliser CSS pour le supprimer.

.layui-layim{
            display: none;
        }

L'étape suivante consiste à parcourir les messages historiques

// 清空所有本地缓存消息
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
            });
           }
     }
  }
});

Le message final envoyé et ainsi de suite sont tous dans le document, je n'entrerai donc pas dans les détails ici, et enfin joindre le code complet
Code JS :

<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>

Code CSS :

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

Enfin, une photo du produit fini est jointe :

Connexe recommandé :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!