이 기사의 내용은 Layim을 사용하여 기록 기록을 초기화하는 방법(코드 포함)에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
언어: PHP+layui
로컬 캐시를 사용하지 않고 모든 데이터는 백그라운드 인터페이스에서 가져옵니다
작업 주문 시스템을 구축할 때 고객 요구 사항은 QQ 채팅과 같아야 합니다. 나는 수년 동안 깊이 뿌리박힌 늙은 페퍼인데, 즉시 레이임이 생각난다. 그러나 작업 주문 내역 메시지를 순회할 때 몇 가지 사소한 문제가 발생했습니다. 하루를 숙지한 후 마침내 아래에 코드를 공유하고 기록해 보겠습니다.
PS: 저는 전문적인 프론트엔드도 아니고, 방법이 잘 사용되지 않으니 욕하지 마세요
- 첫 번째는 공식 문서의 구성인 레이임(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>
마지막으로 완성품 사진 첨부:
관련 추천:
위 내용은 Laim을 사용하여 내역 기록을 초기화하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!