大家好，欢迎来到IT知识分享网。
webim【LayIM】开发者文档
模块加载名称：layim，官网地址：layim.layui.com
开始使用
LayIM基于layui模块体系，因此你获得的其实是一个包含LayIM的layui框架，不同的是，开源版的layui并不包含LayIM。捐赠后，将您获得的压缩包解压，将layui整个目录文件放入你的项目后，不用再对其代码做任何修改（方便下次升级）。然后您只需引入下述两个文件即可。
layim 一个纯前端webim插件，说纯前端也是有点扯淡，数据存储还是要服务支持的，layim目前是Web IM应用解决方案，致力于通过丰富的IM交互，及高度开放的接口，让其自由接入到你的Web系统。
layim是Web IM应用”非云端”解决方案
layim目前是Web IM应用”非云端”解决方案，致力于通过丰富的IM交互，及高度开放的接口，让其自由接入到你的Web系统。你可以通过付费的方式，获得LayIM的全部代码。当然，对layui具有一定贡献的亲们，也可以无需付费直接获得LayIM开发版。资金来源是对LayIM可持续性发展的唯一保障，如果你对此反感，可无视 layim的存在，或在Fly社区反馈建议。
layim涵盖功能，20项以上功能
在线状态设置、好友分组展示、群组、历史会话、右键菜单操作、搜索好友/群组、换肤、关于、主面板最小化/展开状态记录、私聊面板、群聊面板、多聊天切换、消息提醒、表情、图片上传、文件上传、聊天记录及其本地化存储、快捷键发送设置、聊天面板最小化、在线客服/自定义聊天模式 。
webim【LayIM】开发者文档
模块加载名称：layim，官网地址：layim.layui.com
开始使用
LayIM基于layui模块体系，因此你获得的其实是一个包含LayIM的layui框架，不同的是，开源版的layui并不包含LayIM。捐赠后，将您获得的压缩包解压，将layui整个目录文件放入你的项目后，不用再对其代码做任何修改（方便下次升级）。然后您只需引入下述两个文件即可。
./layui/css/layui.css ./layui/layui.js假如你将layui放入你的/static/目录中，并且你的html页面在根目录，那么一个最直接的例子是：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LayIM测试</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<script src="layui.js"></script>
<script>
layui.use('layim', function(layim){
//先来个客服模式压压精
layim.config({
brief: true //是否简约模式（如果true则不显示主面板）
}).chat({
name: '客服姐姐'
,type: 'kefu'
,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1'
,id: -2
});
});
</script>
</body>
</html>初始化配置
layui.use('layim', function(layim){ //基础配置 layim.config({ //获取主面板列表信息 init: { url: '' //接口地址（返回的数据格式见下文） ,type: 'get' //默认get，一般可不填 ,data: {} //额外参数 } //配置我的信息（如果设定了该参数，则优先读取该参数，如果没有，这读取init返回的mine信息） ,mine: { "username": "LayIM体验者" //我的昵称 ,"id": "" //我的ID ,"status": "online" //在线状态 online：在线、hide：隐身 ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名 ,"avatar": "a.jpg" //我的头像 } //获取群员接口 ,members: { url: '' //接口地址（返回的数据格式见下文） ,type: 'get' //默认get，一般可不填 ,data: {} //额外参数 } //上传图片接口（返回的数据格式见下文） ,uploadImage: { url: '' //接口地址（返回的数据格式见下文） ,type: 'post' //默认post } //上传文件接口（返回的数据格式见下文） ,uploadFile: { url: '' //接口地址（返回的数据格式见下文） ,type: 'post' //默认post } //增加皮肤选择，如果不想增加，可以剔除该项 ,skin: [ 'http://xxx.com/skin.jpg' ] ,brief: false //是否简约模式（默认false，如果只用到在线客服，且不想显示主面板，可以设置 true） ,title: '我的LayIM' //主面板最小化后显示的名称 ,min: false //用于设定主面板是否在页面打开时，始终最小化展现。默认false，即记录上次展开状态。 ,minRight: null //【默认不开启】用户控制聊天面板最小化时、及新消息提示层的相对right的px坐标，如：minRight: '200px' ,maxLength: 3000 //最长发送的字符长度，默认3000 ,isfriend: true //是否开启好友（默认true，即开启） ,isgroup: true //是否开启群组（默认true，即开启） ,right: '0px' //默认0px，用于设定主面板右偏移量。该参数可避免遮盖你页面右下角已经的bar。 ,chatLog: '/chat/log/' //聊天记录地址（如果未填则不显示） ,find: '/find/' //查找好友/群的地址（如果未填则不显示） ,copyright: false //是否授权，如果通过官网捐赠获得LayIM，此处可填true }); }); 上面的参数中，brief、skin、min、isgroup、chatLog、copyright等参数都是非必填项，本身具有默认值。而对于init（初始化接口）、members（查看群员接口）、uploadImage（上传图片接口）、uploadFile（上传文件接口）所返回的数据格式，下面将逐一展示
init数据格式
通过layim.config来设定init参数可获得我的信息、好友列表、群组列表，假设你进行了下述配置
init: { url: '/api/im/getList/' } 那么该接口所返回的信息（response）应该严格按照下述的JSON格式：
Demo：getList.json
{ "code": 0 //0表示成功，其它表示失败 ,"msg": "" //失败信息 ,"data": { //我的信息（如果layim.config已经配置了mine，则该返回的信息无效） "mine": { "username": "纸飞机" //我的昵称 ,"id": "" //我的ID ,"status": "online" //在线状态 online：在线、hide：隐身 ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名 ,"avatar": "a.jpg" //我的头像 } //好友列表 ,"friend": [{ "groupname": "前端码屌" //好友分组名 ,"id": 1 //分组ID ,"online": 2 //在线数量，可以不传 ,"list": [{ //分组下的好友列表 "username": "贤心" //好友昵称 ,"id": "" //好友ID ,"avatar": "a.jpg" //好友头像 ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名 }, …… ] }, …… ] //群组列表 ,"group": [{ "groupname": "前端群" //群组名 ,"id": "101" //群组ID ,"avatar": "a.jpg" //群组头像 }, …… ] } }members数据格式
通过layim.config来设定members参数可获取群员列表，假设你进行了下述配置
,members: { url: ' '/api/im/getMembers/' ,data: {} } 那么当点击群聊面板查看成员时，将会向members的url发送Ajax请求，并自动传递一个id参数（群组id）。该接口所返回的信息（response）应该严格按照下述的JSON格式：
Demo：getMembers.json
{ "code": 0 //0表示成功，其它表示失败 ,"msg": "" //失败信息 ,"data": { "owner": { "username": "贤心" //群主昵称 ,"id": "" //群主ID ,"avatar": "http://tp1.sinaimg.cn//180//1" //群主头像 ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //群主签名 } ,"list": [{ "username": "马小云" //群员昵称 ,"id": "" //群员id ,"avatar": "http://tp4.sinaimg.cn//180//1" //群员头像 ,"sign": "让天下没有难写的代码" //群员签名 }, …… ] } } uploadImage数据格式
通过layim.config来设定uploadImage参数可进行图片上传，假设你进行了下述配置
,uploadImage: { url: '' } 那么当点击聊天面板上传图片时，将会向uploadImage的url发送HTTP请求，进行图片上传。我们会给你传递一个name=”file”的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：
{ "code": 0 //0表示成功，其它表示失败 ,"msg": "" //失败信息 ,"data": { "src": "http://cdn.xxx.com/upload/images/a.jpg" //图片url } } uploadFile数据格式
通过layim.config来设定uploadImage参数可进行文件上传，事实上跟图片上传非常类似有木有？假设你进行了下述配置
,uploadFile: { url: ' '' }那么当点击聊天面板上传文件时，将会向uploadFile的url发送HTTP请求，进行文件上传。我们会给你传递一个name=”file”的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：
{ "code": 0 //0表示成功，其它表示失败 ,"msg": "" //失败信息 ,"data": { "src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url ,"name": 'LayIM.zip' //文件名 } }接入WebSocket
万万不可畏惧它的存在，除非你真的想用Ajax轮询去解决消息I/O。WebSocket会使得你的消息接受和传递变得极其轻松，最重要的一点是，性能卓绝。WebSocket的建立非常简单：
layui.use('layim', function(layim){ //建立WebSocket通讯 //注意：也可以直接采用 socket.io的版本，下面是以原生WS为例 var socket = new WebSocket('ws://localhost:8090'); //发送一个消息 socket.send('Hi Server, I am LayIM!'); //更多情况下，一般是传递一个JSON socket.send(JSON.stringify({ type: '' //随便定义，用于在服务端区分消息类型 ,data: {} })); //连接成功时触发 socket.onopen = function(){ socket.send('XXX连接成功'); }; //监听收到的消息 socket.onmessage = function(res){ //res为接受到的值，如 {"emit": "messageName", "data": {}} //emit即为发出的事件名，用于区分不同的消息 }; 另外还有onclose、onerror，分别是在链接关闭和出错时触发。 //基本上常用的就上面几个了，是不是非一般的简单？ });查看更多聊天记录
为了避免联调的复杂性，我们并不内置更多聊天记录的展示。而是弹出一个聊天记录的layer窗口，这意味着你可以随意发挥聊天记录的页面。通过layim.config配置chatLog来指向聊天记录的URL。假设你进行了下述设定：
layim.config({ chatLog: '/chat/log/' //聊天记录地址，如果未填， 则不在聊天面板显示该icon });查找好友/群
同样为了避免联调的复杂性，我们并不内置查找好友/群功能。而是弹出一个layer窗口，这意味着你可以随意发挥该查找页面。通过layim.config配置find来指向查找的页面URL。如：
layim.config({ find: '/find/all/' //查找好友/群地址。如果未填，不不在主面板显示该icon }); 事件监听
ready事件
事件名：ready，用于监听LayIM初始化就绪。由于主面板的渲染，需建立在init接口请求完毕的基础上，而一些操作必须等到主面板渲染完毕后才能操作，所以这个时候就可以放入ready事件的回调体中来执行。其回调接受一个object类型的参数，携带一些基础配置信息、我的用户信息、好友/群列表信息、本地数据库信息等，调用方式：
layim.on('ready', function(options){ console.log(options); //do something }); //注意：简约模式（即brief: true时）不会触发该事件监听在线状态切换
事件名：online，看到主面板你的昵称后的icon么，没错，就是它。当前支持“在线”、“隐身”两种状态切换。分别以online和hide的string类型的值传递给回调参数。如：
layim.on('online', function(status){ console.log(status); //获得online或者hide //此时，你就可以通过Ajax将这个状态值记录到数据库中了。 //服务端接口需自写。 }); 监听发送的消息
事件名：sendMessage，每当你发送一个消息，都可以通过该事件监听到。回调参数接受一个object类型的值，携带发送的聊天信息。如：
layim.on('sendMessage', function(res){ var mine = res.mine; //包含我发送的消息及我的信息 //mine的结构如下： { avatar: "avatar.jpg" //我的头像 ,content: "你好吗" //消息内容 ,id: "" //我的id ,mine: true //是否我发送的消息 ,username: "纸飞机" //我的昵称 } var to = res.to; //对方的信息 //to的结构如下： { avatar: "avatar.jpg" ,id: "" ,name: "贤心" ,sign: "这些都是测试数据，实际使用请严格按照该格式返回" ,type: "friend" //聊天类型，一般分friend和group两种，group即群聊 ,username: "贤心" } //监听到上述消息后，就可以轻松地发送socket了，如： socket.send({ type: 'chatMessage' //随便定义，用于在服务端区分消息类型 ,data: res }); });监听接受的消息
//监听收到的聊天消息，假设你服务端emit的事件名为：chatMessage socket.onmessage = function(res){ if(res.emit === 'chatMessage'){ layim.getMessage(res.data); //res.data即你发送消息传递的数据 } }; //它必须接受以下字段 layim.getMessage({ username: "纸飞机" //消息来源用户名 ,avatar: "http://tp1.sinaimg.cn//180//1" //消息来源用户头像 ,id: "" //聊天窗口来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id） ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取 ,content: "嗨，你好！本消息系离线消息。" //消息内容 ,mine: false //是否我发送的消息，如果为true，则会显示在右方 ,timestamp: 06 //服务端动态时间戳 });监听查看群员
事件名：members，在群聊面板中查看全部成员时触发，该事件返回获取群员接口（即layim.config中的members）的response信息。
layim.on('members', function(data){ console.log(data); });监听聊天窗口的切换
事件名：chatChange，坦白而言，似乎没什么卵用。不过有总比没有好。该事件返回一个object类型的参数，携带当前聊天面板的容器、基础信息等。
layim.on('chatChange', function(data){ console.log(data); });自定义一个聊天窗口
方法名：layim.chat(options)，是否似曾相识，没错，我们见过文档最开始的“客服姐姐”用的就是该方法。它允许你自定义任意模式的聊天窗口，先看例子吧：
1. 自定义在线客服
layim.config({ brief: true //简约模式，不显示主面板 }).chat({ name: '在线客服一' //名称 ,type: 'kefu' //聊天类型 ,avatar: 'http://tp1.sinaimg.cn//180//1' //头像 ,id: -1 //定义唯一的id方便你处理信息 }).chat({ name: '在线客服二' //名称 ,type: 'kefu' //聊天类型 ,avatar: 'http://tp1.sinaimg.cn//180//1' //头像 ,id: -2 //定义唯一的id方便你处理信息 }); layim.setChatMin(); //收缩聊天面板 2. 自定义群聊（对于想搞一个临时性的房间，貌似是挺有意思的）
layim.chat({ name: 'LayIM畅聊' ,type: 'group' //群组类型 ,avatar: 'http://tp2.sinaimg.cn//50//1' ,id: //定义唯一的id方便你处理信息 ,members: 123 //成员数，不好获取的话，可以设置为0 });该方法结合brief: true（简约模式），可以免去较为复杂的数据配置。轻量地建立一个聊天面板。拥有较大的平台实用性。可以预见的是，它应该会成为LayIM一个露脸率最高的存在。想象一下吧，对你而言是否如此？
初始最小化聊天界面
方法名：layim.setChatMin()，如果你在初始的状态下不想展开聊天面板（譬如悬浮的在线客服），那么该方法会派上用场，使用很简单，就不过多啰嗦了。
layim.setChatMin();添加好友/群到主面板
方法名：layim.addList(options)，当你的WebSocket监听到有好友或者群新增时，需让LayIM的主面板同步添加的信息，可用该方法。先看看例子：
layim.on('ready', function(res){ //监听添加列表的socket事件，假设你服务端emit的事件名为：addList socket.onmessage = function(res){ if(res.emit === 'addList'){ layim.addList(res.data); //如果是在iframe页，如LayIM设定的add面板，则为 parent.layui.layim.addList(data); } }; //需要特别注意的是回调返回的res //如果添加的是好友，res的结构必须是这样的 { type: 'friend' //列表类型，只支持friend和group两种 ,avatar: "a.jpg" //好友头像 ,username: '冲田杏梨' //好友昵称 ,groupid: 2 //所在的分组id ,id: "21212" //好友id ,sign: "本人冲田杏梨将结束AV女优的工作" //好友签名 } //如果添加的是群组，res的结构必须是这样的 { type: 'group' //列表类型，只支持friend和group两种 ,avatar: "a.jpg" //群组头像 ,groupname: 'Angular开发' //群组名称 ,id: "" //群组id } });从主面板移除好友/群
方法名：layim.removeList(options)，当你的WebSocket监听到有好友或者群删除时，需让LayIM的主面板同步删除的信息，可用该方法。它的调用非常简单，只需要传两个key：
layim.removeList({ type: 'friend' //或者group ,id: //好友或者群组ID }); //如果是在iframe页，如LayIM设定的add面板，则为： parent.layui.layim.removeList({ type: 'friend' //或者group ,id: //好友或者群组ID });获取列表元素
LayIM的好友/群的列表所在元素，附带唯一的id，由固定前缀“layim-”+动态的type和id字符拼接而成，如id=”layim-friend10000″，通过查找id选择器获得该元素后，你就可以对其进行头像置灰等处理了。
获取cache数据
方法名：layim.cache()，获取LayIM的cache信息，返回的信息结构和ready事件获得的信息一样，不同的是，改方法始终会获取到最新的cache。
//输出的信息不妨在你的Chrome控制台看看（需在引有LayIM的页面中），在此就不做列举了 console.log(layim.cache()) 无需接口的功能
LayIM有许多功能是无需接口来处理的，在此特别列举几个比较常见的：
关于版权
LayIM目前并非开源产品（以后也许会开源），因此如果你是通过捐赠渠道获得LayIM，可以通过layer.config设定copyright: true来剔除LayIM主面板的关于信息，这就表示你已经过授权。当然，如果你想友好地保留，我们也是非常欢迎的。如果你通过非捐赠渠道获得LayIM，我们并不会进行追究，但是请勿进行销售，这是唯一的红线吧。
另外，再次强调一点：LayIM虽然并不开源，但layui是完全免费且开源的。LayIM是我们为数不多的接受收费的产品。因为一定资金的来源，是对我们整个开发流可持续发展的有力保障。仍然是那句话，如果你对LayIM的“收费”表示厌恶，请忽视它的存在。即便是没有一个人为LayIM买单，我们仍然会坚持初衷，即：通过极简的体验，拉近你的用户在web间的距离。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/111946.html
