webim【LayIM】开发者文档

在WebIM似乎已被打入冷宫的今天，LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位接口支撑，竭力以最灵便的方式接入到你的实际项目中。并始终坚持极简的体验，拉近你的用户在web间的距离。我们也将推出LayIM在Node.js端的集成方案，以供服务端层面的参考。

LayIM兼容除IE6/7以外的所有浏览器，如果你的网站仍需兼容ie6/7，那么强烈建议你说服你的老板或者客户。

模块加载名称：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>

通过上述方式，便可成功加载layim。当然，你仅仅只是看到了一个"客服姐姐"的聊天面板，这等同于：Hello World!
向“客服姐姐”问好后就忘了它吧，这份文档才刚刚开始。

初始化配置

一个你必须认识的方法：layim.config(options)
控制着许多重要的配置，基本上一个完整LayIM实例的构成由它而开始，它允许你自由设定以下参数：

layui.use('layim', function(layim){//基础配置layim.config({//获取主面板列表信息init: {url: '' //接口地址（返回的数据格式见下文）,type: 'get' //默认get，一般可不填,data: {} //额外参数}//配置我的信息（如果设定了该参数，则优先读取该参数，如果没有，这读取init返回的mine信息）,mine: {"username": "LayIM体验者" //我的昵称,"id": "100000123" //我的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格式：

{"code": 0 //0表示成功，其它表示失败,"msg": "" //失败信息,"data": {//我的信息（如果layim.config已经配置了mine，则该返回的信息无效）"mine": {"username": "纸飞机" //我的昵称,"id": "100000" //我的ID,"status": "online" //在线状态 online：在线、hide：隐身,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名,"avatar": "a.jpg" //我的头像}//好友列表,"friend": [{"groupname": "前端码屌" //好友分组名,"id": 1 //分组ID,"online": 2 //在线数量，可以不传,"list": [{ //分组下的好友列表"username": "贤心" //好友昵称,"id": "100001" //好友ID,"avatar": "a.jpg" //好友头像,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名}, …… ]}, …… ]//群组列表,"group": [{"groupname": "前端群" //群组名,"id": "101" //群组ID,"avatar": "a.jpg" //群组头像}, …… ]}
}

Demo：getList.json

members数据格式

通过layim.config来设定members参数可获取群员列表，假设你进行了下述配置

,members: {url: ' '/api/im/getMembers/',data: {}
}

那么当点击群聊面板查看成员时，将会向members的url发送Ajax请求，并自动传递一个id参数（群组id）。该接口所返回的信息（response）应该严格按照下述的JSON格式：

{"code": 0 //0表示成功，其它表示失败,"msg": "" //失败信息,"data": {"owner": { "username": "贤心" //群主昵称,"id": "100001" //群主ID,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //群主头像,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //群主签名},"list": [{"username": "马小云" //群员昵称,"id": "168168" //群员id,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群员头像,"sign": "让天下没有难写的代码" //群员签名}, …… ]}
}

Demo：getMembers.json

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，分别是在链接关闭和出错时触发。//基本上常用的就上面几个了，是不是非一般的简单？

});

服务端层面，不用害怕，事情也远没有那么复杂。我们会抽空给出Node.js的官方集成案例。但对于其它服务端语言，以下已经成功接入LayIM的案例对你也许会有一定帮助：

Java：LayIM接入案例Java篇，含源码+图文
.NET：LayIM接入案例.NET篇，含源码和Gif
PHP：LayIM接入案例PHP篇 源码+Demo，强烈建议采用 Workerman
Python：等Python案例分享，暂时可阅读 http://www.jb51.net/article/51516.htm

你的服务端语言没有列举在上面？额。。。那一定是你的语言太冷门了，自己去网搜资料吧。

查看更多聊天记录

为了避免联调的复杂性，我们并不内置更多聊天记录的展示。而是弹出一个聊天记录的layer窗口，这意味着你可以随意发挥聊天记录的页面。通过layim.config配置chatLog来指向聊天记录的URL。假设你进行了下述设定：

layim.config({chatLog: '/chat/log/' //聊天记录地址，如果未填， 则不在聊天面板显示该icon
});

那么，我们会在chatLog所对应的URL后面动态追加当前聊天窗口的ID（即好友或群组ID）和类型，如：/chat/log?id=123&type=friend

请注意：当你自建一个更多聊天记录的动态页面时，我们建议您通过Ajax来获取聊天记录，因为LayIM发送的内容，可能包含链接、图片等多媒体信息，它们需要 parent.layui.layim.content(content)方法来解析

查找好友/群

同样为了避免联调的复杂性，我们并不内置查找好友/群功能。而是弹出一个layer窗口，这意味着你可以随意发挥该查找页面。通过layim.config配置find来指向查找的页面URL。如：

layim.config({find: '/find/all/' //查找好友/群地址。如果未填，不不在主面板显示该icon
});

事件监听

方法：layim.on(event, callback)
用于LayIM事件监听。接受两个参数。第一个参数event即事件名，第二个参数callback即事件回调。

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: "100000" //我的id,mine: true //是否我发送的消息,username: "纸飞机" //我的昵称
}var to = res.to; //对方的信息
//to的结构如下：
{avatar: "avatar.jpg",id: "100001",name: "贤心",sign: "这些都是测试数据，实际使用请严格按照该格式返回",type: "friend" //聊天类型，一般分friend和group两种，group即群聊,username: "贤心"
}//监听到上述消息后，就可以轻松地发送socket了，如：socket.send({type: 'chatMessage' //随便定义，用于在服务端区分消息类型,data: res}); });

监听接受的消息

事件的监听并非layim提供，而是WebSocket提供。
检测到WebSocket事件后，执行layim的内置方法：layim.getMessage(options)
即可显示消息到聊天面板（如果消息所指定的聊天面板没有打开，则会进入本地的消息队列中，直到指定的聊天面板被打开，方可显示。），这是一个对你有用的例子：

//监听收到的聊天消息，假设你服务端emit的事件名为：chatMessage
socket.onmessage = function(res){if(res.emit === 'chatMessage'){layim.getMessage(res.data); //res.data即你发送消息传递的数据}
};
//它必须接受以下字段
layim.getMessage({username: "纸飞机" //消息来源用户名,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像,id: "100000" //聊天窗口来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取,content: "嗨，你好！本消息系离线消息。" //消息内容,mine: false //是否我发送的消息，如果为true，则会显示在右方,timestamp: 1467475443306 //服务端动态时间戳
});

监听查看群员

事件名：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)，是否似曾相识，没错，我们见过文档最开始的“客服姐姐”用的就是该方法。它允许你自定义任意模式的聊天窗口，先看例子吧：

//自定义在线客服

layim.config({brief: true //简约模式，不显示主面板
}).chat({name: '在线客服一' //名称,type: 'kefu' //聊天类型,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像,id: -1 //定义唯一的id方便你处理信息
}).chat({name: '在线客服二' //名称,type: 'kefu' //聊天类型,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像,id: -2 //定义唯一的id方便你处理信息
});
layim.setChatMin(); //收缩聊天面板

//自定义群聊（对于想搞一个临时性的房间，貌似是挺有意思的）

layim.chat({name: 'LayIM畅聊',type: 'group' //群组类型,avatar: 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1',id: 10000000 //定义唯一的id方便你处理信息,members: 123 //成员数，不好获取的话，可以设置为0
});

该方法结合brief: true（简约模式），可以免去较为复杂的数据配置。轻量地建立一个聊天面板。拥有较大的平台实用性。可以预见的是，它应该会成为LayIM一个露脸率最高的存在。想象一下吧，对你而言是否如此？

初始最小化聊天界面

方法名：layim.setChatMin()，如果你在初始的状态下不想展开聊天面板（譬如悬浮的在线客服），那么该方法会派上用场，使用很简单，就不过多啰嗦了。

layim.setChatMin();

添加好友/群到主面板

方法名：layim.addList(options)，当你的WebSocket监听到有好友或者群新增时，需让LayIM的主面板同步添加的信息，可用该方法。先看看例子：

layim.on('ready', function(res){//监听添加列表的socket事件，假设你服务端emit的事件名为：addListsocket.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: "1233333312121212" //好友id,sign: "本人冲田杏梨将结束AV女优的工作" //好友签名
}

//如果添加的是群组，res的结构必须是这样的

{type: 'group' //列表类型，只支持friend和group两种,avatar: "a.jpg" //群组头像,groupname: 'Angular开发' //群组名称,id: "12333333" //群组id
}

});

从主面板移除好友/群

方法名：layim.removeList(options)，当你的WebSocket监听到有好友或者群删除时，需让LayIM的主面板同步删除的信息，可用该方法。它的调用非常简单，只需要传两个key：

layim.removeList({type: 'friend' //或者group,id: 1238668 //好友或者群组ID
});
//如果是在iframe页，如LayIM设定的add面板，则为：
parent.layui.layim.removeList({type: 'friend' //或者group,id: 1238668 //好友或者群组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会自动记录你每次打开的聊天窗口到本地数据库（localStorage）、所以这一块无需通过接口去渲染。
#主面板的展开状态、#好友分组的展开状态、#皮肤的选择：同样都会记录到本地数据库
#搜索好友/群组：LayIM内部会按照关键字检索出搜索结果。
#消息提醒：LayIM内置强大的消息提醒机制，你只需要监听消息，并获取消息，LayIM将为您处理好一切。
#聊天记录：LayIM为您的每个对话存储最新的50条记录到本地，当你下次打开时，仍然会初始化渲染这些内容。但我们仍然建议你的服务端也存储一份记录，因为“查看更多聊天记录”已经不再属于LayIM管辖
#更多亮点：潜藏在LayIM的每一处细节。

关于版权

LayIM目前并非开源产品（以后也许会开源），因此如果你是通过捐赠渠道获得LayIM，可以通过layer.config设定copyright: true来剔除LayIM主面板的关于信息，这就表示你已经过授权。当然，如果你想友好地保留，我们也是非常欢迎的。如果你通过非捐赠渠道获得LayIM，我们并不会进行追究，但是请勿进行销售，这是唯一的红线吧。

另外，再次强调一点：LayIM虽然并不开源，但layui是完全免费且开源的。LayIM是我们为数不多的接受收费的产品。因为一定资金的来源，是对我们整个开发流可持续发展的有力保障。仍然是那句话，如果你对LayIM的“收费”表示厌恶，请忽视它的存在。即便是没有一个人为LayIM买单，我们仍然会坚持初衷，即：通过极简的体验，拉近你的用户在web间的距离。

LayIM的作者是贤心一人，版权最终解释权归他所有。

Layui - 用心与你沟通

本文链接：webim框架【layim】一个纯前端webim插件http://www.51xuediannao.com/js/jquery/layim.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

个人记录：使用angularJS时layer.open无法绑定元素解决方法
试用情况： layer只是以js引入公共页面时，使用layer.open打开页面层(type:1)时，在angular中的controller.js与view绑定的元素不成功时，试了很多方法，后来想了一下，用$(layero).find(textarea[XXXXX]).val()…...
2024/4/21 15:48:55
鹤壁双眼皮多少钱
...
2024/4/21 15:48:55
割双眼皮窄点
...
2024/4/21 15:48:52
切割双眼皮一年的恢复图
...
2024/4/30 21:26:36
vue+tinymce5 富文本编辑器使用、踩坑
注：此教程适用于 tinymce 5.x 版本（如果是tinymce 4.x，则可能不会实现 ）安装与配置操作（1）安装npm install -s tinymce/tinymce-vue npm install -s tinymce （2）在node_modules找到…...
2024/4/20 14:47:45
霸州有做双眼皮的店吗
...
2024/4/20 14:47:43
三点定位双眼皮不满意修改
...
2024/4/20 14:47:42
割双眼皮可以吃羊排吗
...
2024/4/20 14:47:41
去皮割双眼皮和做鼻子一起做会很痛吗
...
2024/4/21 15:48:52
割双眼皮最好是在月经前后多久
...
2024/4/28 2:21:50
双眼皮於血怎么快速消除
...
2024/4/28 19:13:13
割双眼皮第12天
...
2024/4/30 7:13:17
割双眼皮睁眼练习好不好
...
2024/4/27 16:16:28
全切双眼皮12天图片
...
2024/4/25 2:06:58
React使用笔记
1、网页基础使用 1.1 jsx 1.全称: JavaScript XML 2.react定义的一种类似于XML的JS扩展语法: JS XML本质是React.createElement(component, props, …children)方法的语法糖 3.作用: 用来简化创建虚拟DOM 1)写法：var ele Hello JSX!2)注意1：它不是字…...
2024/4/21 15:48:44
最标准双眼皮宽度
...
2024/4/24 6:41:15
Vue快速入门巩固篇
文章目录Vue前端发展史三端统一Node.jsVue.js前端为主的MV*模式Node.js带来的全栈时代第一个Vue项目什么是MVVM为什么要使用MVVMMVVM的组成部分为什么使用Vue.jsMVVM的实现者Vue.js测试Vue数据绑定Vue基本语法v-bind指令，绑定属性v-if、v-else-if、v-elsefor循环Vue…...
2024/4/21 15:48:44
react项目级应用框架搭建
react项目级应用框架搭建项目目录结构记录自己的每个学习足迹1. 第一步创建项目2. 引入 antd 组件库3. 接下来是加入redux状态管理4. 路由的配置5. http请求6. proxy代理7.引入路经问题8. 最终的的package.json文件项目目录结构记录自己的每个学习足迹做项目,学习技术,学习框…...
2024/4/21 15:48:41
react学习笔记一：入门级小白到脚手架（create-react-app）开发项目
文章目录前言一、helloworld二、React jsx2.1 jsx2.2 动态展示列表数据2.3 虚拟dom创建的两种方式2.4 代码实例2.5 步骤2.6 技术点三、组件化、模块化3.1 组件3.2 组件化3.3 模块3.4 模块化四、组件定义两种方式3.1 代码实例3.2 技术点五、组件三个属性：state、prop…...
2024/4/26 5:52:01
手摸手学前端：vue-cli4图形化方式创建一个Vue种子项目
前言 cli版本号：vue/cli 4.2.3 JavaScript的强大不必多言。做为一名后端开发工程师，不会前端是不行的，这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现，彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛…...
2024/4/21 15:48:40

webim【LayIM】开发者文档