この記事の内容は、layim を使用して履歴レコードを初期化する方法 (コード付き) に関するもので、一定の参考価値があります。必要な友人はそれを参照できます。
言語: PHPlayui
ローカル キャッシュは使用されず、すべてのデータはバックグラウンド インターフェイスから取得されます
作業指示システムを構築する場合、顧客の要件は QQ チャットのようなものでなければなりません。私は長年にわたって深く根付いた古いphperであり、すぐにlayimのことを思い出します。ただし、作業指示履歴メッセージを確認するときに、いくつかの小さな問題が発生しました。1 日かけて慣れてきた後、ようやく問題を理解しました。以下にコードを共有し、記録しておきます。
追記: 私はプロのフロントエンドではないし、この方法はあまり活用されていないので、文句は言わないでください。
- まず、layim の設定です。これは公式ドキュメントの設定です。
layim.config({ init: { } ,voice:false ,brief:false//是否简约模式,简约模式没有关闭按钮 });
ここで注意すべき点は、[シンプルモード]には閉じるボタンがないことです。閉じるボタンが必要でリストは不要な場合は、CSS を使用して削除できます。
.layui-layim{ display: none; }
次のステップは、履歴メッセージをたどることです
// 清空所有本地缓存消息 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 }); } } } });
送信された最終メッセージなどはすべてドキュメントに記載されているため、ここでは詳細には触れず、最後にすべてのメッセージを添付しますコード
JSコード:
<script> function im(question_id) { layui.use(['layim','jquery'], function(){ var layim = layui.layim ,$ = layui.jquery; //基础配置 layim.config({ init: { url:"{:url('meet/get_user_chat')}" ,data:{question_id:question_id} } ,voice:false ,brief:false//是否简约模式,简约模式没有关闭按钮 }); // 清空所有本地缓存消息 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 }); } } } }); // 监听发送消息 layim.on('sendMessage', function(res){ var mine = res.mine.content; //包含我发送的消息及我的信息 }); }); } </script>
CSSコード:
<style> .layui-layim{ display: none; } </style>
最後に完成品の写真を添付します:
関連する推奨事項:
以上がlayim を使用して履歴レコードを初期化する方法 (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。