如何利用layim实现历史记录的初始化(附代码)
本篇文章给大家带来的内容是关于如何利用layim实现历史记录的初始化(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 语言:PHP+layui 在做一个工单系统的时候,客户要求必须要像QQ聊天一样。我这多年根深蒂固的老phper,直接想起来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.webp' ,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.webp" //消息来源用户头像 ,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 }); } } } }); 最后的发送消息什么的,文档上面都有,这里就不多说来,最后附一个全部代码 <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.webp' ,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.webp" //消息来源用户头像 ,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> 最后附上一张成品图: 相关推荐: |
相关内容
-
你支持800万用户Firefox吗如何能在火狐浏览器上
你支持800万用户Firefox吗如何能在火狐浏览器上中国的道路,,2...
-
如何设置用户权限|如何设置用户权限密码
如何设置用户权限|如何设置用户权限密码,,如何设置用户权限密...
-
linux – 如何为Debian中的所有用户设置PATH?
linux – 如何为Debian中的所有用户设置PATH?,适用于,用户,我有...
-
pb获取电脑硬盘号|一pb硬盘
pb获取电脑硬盘号|一pb硬盘,,一pb硬盘1PB是等于1024TB,等于1024...
-
金蝶系统管理员删除|金蝶用户管理员删了怎么办
金蝶系统管理员删除|金蝶用户管理员删了怎么办,,1.金蝶用户管...
-
qq音乐隐私设置|qq音乐隐私设置中获取qq好友关
qq音乐隐私设置|qq音乐隐私设置中获取qq好友关系不见了,,1. qq...
-
如何删除电脑上的用户|如何删除电脑上的用户名
如何删除电脑上的用户|如何删除电脑上的用户名和密码,,如何删...
-
台式机还是笔记本夏天给电脑用户买什么
台式机还是笔记本夏天给电脑用户买什么,,随着暑假的到来,许多同...
-
电脑qq如何登录密码忘记了怎么办|电脑登录qq消
电脑qq如何登录密码忘记了怎么办|电脑登录qq消息密码忘记了...
-
添加网络打印机|添加网络打印机要输入用户名密
添加网络打印机|添加网络打印机要输入用户名密码,,添加网络打...
-
金蝶软件显示与其它用户有冲突|金蝶KIS专业版出
金蝶软件显示与其它用户有冲突|金蝶KIS专业版出现“当前使用...
-
低端家庭用户如何购买CPU
低端家庭用户如何购买CPU,,大家都知道,随着电脑配件价格的不断...
-
Win7系统开机显示“正在获取网络地址”怎么办
Win7系统开机显示“正在获取网络地址”怎么办,网络地址,系统,...
-
查看qq消息快捷键|查看qq消息快捷键是什么
查看qq消息快捷键|查看qq消息快捷键是什么,,1. 查看qq消息快捷...
-
获取电脑的ip|获取电脑的管理员权限
获取电脑的ip|获取电脑的管理员权限,,1. 获取电脑的管理员权限...