LayIM即时通讯（WebIM网页聊天）开发者文档 - layui

__LayIM 开发者文档

当前文档适用于 LayIM PC端 最新版，如果你正在了解的并非该版本，你可以前往其它版本阅览： LayIM 移动版文档

在WebIM似乎已被打入冷宫的今天，LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位的前端接口支撑，不仅能让您更高效地接入到自己的通讯服务中，更能让你轻松地与 环信_、_融云_、_野狗 等第三方通讯服务平台对接。LayIM始终坚持极简的体验，致力于拉近你的用户在web间的距离。

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

模块加载名称：layim，官网地址：layim.layui.com

开始使用

LayIM基于layui模块体系，因此你获得的其实是一个包含LayIM的layui框架，不同的是，开源版的layui并不包含LayIM。捐赠后，将您获得的压缩包解压，将layui整个目录文件放入你的项目后，不用再对其代码做任何修改（方便下次升级）。然后您只需引入下述两个文件即可。

codelayui.code

  1. ./build/css/layui.css
  2. ./build/layui.js

假如你将layui放入你的/static/目录中，并且你的html页面在根目录，那么一个最直接的例子是：

codelayui.code

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LayIM测试</title>
  6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
  7. </head>
  8. <body>
  9. <script src="/static/build/layui.js"></script>
  10. <script>
  11. layui.use('layim', function(layim){
  12. //先来个客服模式压压精
  13. layim.config({
  14. brief: true //是否简约模式（如果true则不显示主面板）
  15. }).chat({
  16. name: '客服姐姐'
  17. ,type: 'friend'
  18. ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1'
  19. ,id: -2
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>

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

初始化配置

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

codelayui.code

  1. layui.use('layim', function(layim){
  2. //基础配置
  3. layim.config({
  4. init: {} //获取主面板列表信息，下文会做进一步介绍
  5. //获取群员接口（返回的数据格式见下文）
  6. ,members: {
  7. url: '' //接口地址（返回的数据格式见下文）
  8. ,type: 'get' //默认get，一般可不填
  9. ,data: {} //额外参数
  10. }
  11. //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
  12. ,uploadImage: {
  13. url: '' //接口地址
  14. ,type: 'post' //默认post
  15. }
  16. //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
  17. ,uploadFile: {
  18. url: '' //接口地址
  19. ,type: 'post' //默认post
  20. }
  21. //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
  22. ,tool: [{
  23. alias: 'code' //工具别名
  24. ,title: '代码' //工具名称
  25. ,icon: '' //工具图标，参考图标文档
  26. }]
  27. ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
  28. ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
  29. ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
  30. });
  31. });

layim.config(options)的更多可选配置项见下表：

可选项

默认值

类型

用途

brief

false

boolean

是否简约模式，如果设为 true，则主面板不会显示。一般可用于客服

title

我的LayIM

string

主面板最小化后显示的名称

min

false

boolean

用于设定主面板是否在页面打开时，始终最小化展现

right

0px

string

用于设定主面板右偏移量。该参数可避免遮盖你页面右下角已经的bar

minRight

无

string

用户控制聊天面板最小化时、及新消息提示层的相对right的px坐标。
如：minRight: '200px'

initSkin

空字符

string

设置初始背景，默认不开启。可设置./css/modules/layim/skin目录下的图片文件名
如：initSkin: '5.jpg'

isAudio

false

boolean

是否开启聊天工具栏音频

isVideo

false

boolean

是否开启开启聊天工具栏视频

notice

false

boolean

是否开启桌面消息提醒，即在浏览器之外的提醒

voice

default.mp3

string/boolean

设定消息提醒的声音文件（所在目录：./layui/css/modules/layim/voice/）
若不开启，设置 false 即可

isfriend

true

boolean

是否开启好友

isgroup

true

boolean

是否开启群组

maxLength

3000

number

可允许的消息最大字符长度

skin

null

object

拓展背景，如：

codelayui.code

  1. skin: [
  2. 'http://xxx.com/skin.jpg',
  3. 'b.png'
  4. …
  5. ]

copyright

false

boolean

是否授权。如果非授权获得，或将LayIM应用在第三方，建议保留，即不设置。

init数据格式

通过layim.config来设定init参数可获得：我的信息、好友列表、群组列表。你可以采用Ajax配置方式，以及直接赋值列表数据。

Ajax配置方式layui.code

  1. /获取主面板列表信息
  2. init: {
  3. url: '' //接口地址（返回的数据格式见下文）
  4. ,type: 'get' //默认get，一般可不填
  5. ,data: {} //额外参数
  6. }

那么该接口所返回的信息（response）应该严格按照下述的JSON格式：

codelayui.code

  1. {
  2. "code": 0 //0表示成功，其它表示失败
  3. ,"msg": "" //失败信息
  4. ,"data": {
  5. //我的信息
  6. "mine": {
  7. "username": "纸飞机" //我的昵称
  8. ,"id": "100000" //我的ID
  9. ,"status": "online" //在线状态 online：在线、hide：隐身
  10. ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
  11. ,"avatar": "a.jpg" //我的头像
  12. }
  13. //好友列表
  14. ,"friend": [{
  15. "groupname": "前端码屌" //好友分组名
  16. ,"id": 1 //分组ID
  17. ,"list": [{ //分组下的好友列表
  18. "username": "贤心" //好友昵称
  19. ,"id": "100001" //好友ID
  20. ,"avatar": "a.jpg" //好友头像
  21. ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名
  22. ,"status": "online" //若值为offline代表离线，online或者不填为在线
  23. }, …… ]
  24. }, …… ]
  25. //群组列表
  26. ,"group": [{
  27. "groupname": "前端群" //群组名
  28. ,"id": "101" //群组ID
  29. ,"avatar": "a.jpg" //群组头像
  30. }, …… ]
  31. }
  32. }

Demo：getList.json

直接赋值列表数据layui.code

  1. //里面的字段格式 同 上文的 data 中的格式。
  2. //注意：采用该方式时，不可以再配置url参数，否则会走Ajax模式
  3. init: {
  4. mine: {}
  5. ,friend: []
  6. ,group: []
  7. }

members数据格式

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

codelayui.code

  1. ,members: {
  2. url: ' '/api/im/getMembers/'
  3. ,data: {}
  4. }

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

codelayui.code

  1. {
  2. "code": 0 //0表示成功，其它表示失败
  3. ,"msg": "" //失败信息
  4. ,"data": {
  5. "list": [{
  6. "username": "马小云" //群员昵称
  7. ,"id": "168168" //群员id
  8. ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群员头像
  9. ,"sign": "让天下没有难写的代码" //群员签名
  10. }, …… ]
  11. }
  12. }

Demo：getMembers.json

上传图片

通过layim.config来设定uploadImage参数可进行图片上传，假设你进行了下述配置

codelayui.code

  1. ,uploadImage: {
  2. url: ''
  3. }

那么当点击聊天面板上传图片时，将会向uploadImage的url发送HTTP请求，进行图片上传。我们会给你传递一个name="file"的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：

codelayui.code

  1. {
  2. "code": 0 //0表示成功，其它表示失败
  3. ,"msg": "" //失败信息
  4. ,"data": {
  5. "src": "http://cdn.xxx.com/upload/images/a.jpg" //图片url
  6. }
  7. }

上传文件

通过layim.config来设定uploadImage参数可进行文件上传，事实上跟图片上传非常类似有木有？假设你进行了下述配置

codelayui.code

  1. ,uploadFile: {
  2. url: ' ''
  3. }

那么当点击聊天面板上传文件时，将会向uploadFile的url发送HTTP请求，进行文件上传。我们会给你传递一个name="file"的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：

codelayui.code

  1. {
  2. "code": 0 //0表示成功，其它表示失败
  3. ,"msg": "" //失败信息
  4. ,"data": {
  5. "src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url
  6. ,"name": "LayIM.zip" //文件名
  7. }
  8. }

扩展工具栏

你可以对聊天面板的工具栏区域进行扩展，以便实现更丰富的聊天内容。首先在你layim.config中设定好要扩展的图标、名称等信息，如：

codelayui.code

  1. layim.config({
  2. //可同时配置多个
  3. tool: [{
  4. alias: 'code' //工具别名
  5. ,title: '代码' //工具名称
  6. ,icon: '' //工具图标，参考图标文档
  7. }]
  8. })

那么在工具栏中将会出现一个代码的图标，如何在点击它时实现你想要的功能呢？很简单，你只需要：

codelayui.code

  1. //监听自定义工具栏点击，以添加代码为例
  2. layim.on('tool(code)', function(insert, send, obj){ //事件中的tool为固定字符，而code则为过滤器，对应的是工具别名（alias）
  3. layer.prompt({
  4. title: '插入代码'
  5. ,formType: 2
  6. ,shade: 0
  7. }, function(text, index){
  8. layer.close(index);
  9. insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器，主要由insert完成
  10. //send(); //自动发送
  11. });
  12. console.log(this); //获取当前工具的DOM对象
  13. console.log(obj); //获得当前会话窗口的DOM对象、基础信息
  14. });

消息盒子

你可以配置msgbox指向一个盒子页面地址，从而为主面板赋予各种系统消息机制。

codelayui.code

  1. layim.config({
  2. msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
  3. });

它指向的是我们内置的一个盒子模版（你也可以换成你自己的页面），里面写好了所有代码，你只需要按照里面的注释配置好一些接口即可。
当你试图在盒子的图标上实时获取到最新的系统消息数时，你可以借助以下方法完成。

codelayui.code

  1. layim.msgbox(5); //数字即为你通过websocket或者Ajax实时获取到的最新消息数量
  2. //它将在主面板的消息盒子icon上不断显隐提示，直到点击后自动消失

查找页面

为了避免联调的复杂性且需求不一，所以官方暂不提供该模版结构与样式，实际使用时，可移至该文件到你的项目中，对页面自行把控

codelayui.code

  1. layim.config({
  2. find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
  3. });

查看更多聊天记录

LayIM会在本地存储每个会话的最新 20 条记录。但一般服务端也要存储存储一份，为了避免联调的复杂性，我们并不内置更多聊天记录的展示。而是弹出一个聊天记录的layer窗口，这意味着你可以随意发挥聊天记录的页面。通过layim.config配置chatLog来指向聊天记录的URL。假设你进行了下述设定：

codelayui.code

  1. layim.config({
  2. //以下为我们内置的模版，也可以换成你的任意页面。若不开启，剔除该项即可
  3. chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html'
  4. });

那么，我们会在chatLog所对应的URL后面动态追加当前聊天窗口的ID（即好友或群组ID）和类型，如：/chat/log?id=123&type=friend
详细情况可以打开 chatlog.html 去了解，里面有我们写好的代码。

富文本内容格式

LayIM的聊天多类型内容解析采用内部特定的文本格式，你可以借助它在聊天内容区域呈现多样化的内容。目前我们支持的内容如下：

codelayui.code

  1. 超链接格式：_a(地址)[文本]_ 如：a(http://www.layui.com)[layui]
  2. 图片格式：_img[地址]_ 如：img[http://cdn.layui.com/xxx/a.jpg]
  3. 文件格式：_file(地址)[文本]_ 如：file(http://cdn.layui.com/download/layim.zip)[layim.zip]
  4. 音频格式：_audio[地址]_ 如：audio[http://cdn.layui.com/xxx/a.mp3]
  5. 视频格式：_video[地址]_ 如：video[http://cdn.layui.com/xxx/a.avi]

接入WebSocket

一般来说，对接到第三方通讯平台是个更靠谱的选择，比如：_环信_、_融云_、_野狗_。它们都可以是 LayIM 的最佳拍档，你会省去许多工作。

但如果你想保证绝对的数据隐私，你也可以自己搭建通讯服务。目前所有的主流Web语言都有对WebSocket做很好的支持，其中也有很多优秀的通讯框架可以任你挑选，因此万万不可畏惧它的存在，除非你真的想用Ajax轮询去解决消息I/O。WebSocket会使得你的消息接受和传递变得极其轻松，最重要的一点是，性能卓绝。WebSocket的建立非常简单：

codelayui.code

  1. layui.use('layim', function(layim){
  2. //建立WebSocket通讯
  3. //注意：如果你要兼容ie8+，建议你采用 socket.io 的版本。下面是以原生WS为例
  4. var socket = new WebSocket('ws://localhost:8090');
  5. //发送一个消息
  6. socket.send('Hi Server, I am LayIM!');

  7. codelayui.code

    1. //更多情况下，一般是传递一个JSON
    2. socket.send(JSON.stringify({
    3. type: '' //随便定义，用于在服务端区分消息类型
    4. ,data: {}
    5. }));
  8. //连接成功时触发
  9. socket.onopen = function(){
  10. socket.send('XXX连接成功');
  11. };
  12. //监听收到的消息
  13. socket.onmessage = function(res){
  14. //res为接受到的值，如 {"emit": "messageName", "data": {}}
  15. //emit即为发出的事件名，用于区分不同的消息
  16. };
  17. 另外还有onclose、onerror，分别是在链接关闭和出错时触发。
  18. //基本上常用的就上面几个了，是不是非一般的简单？
  19. });

服务端层面，不用害怕，事情也远没有那么复杂。这些文档也许可以帮助到你：LayIM 接入案例/教程大集锦，含Node.js/Java/.NET/PHP

事件监听

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

ready事件

事件名：ready，用于监听LayIM初始化就绪。由于主面板的渲染，需建立在init接口请求完毕的基础上，而一些操作必须等到主面板渲染完毕后才能操作，所以这个时候就可以放入ready事件的回调体中来执行。其回调接受一个object类型的参数，携带一些基础配置信息、我的用户信息、好友/群列表信息、本地数据库信息等，调用方式：

codelayui.code

  1. layim.on('ready', function(options){
  2. console.log(options);
  3. //do something
  4. });
  5. //注意：以下情况不会触发 ready事件，即代码无需写在ready里面
  6. * 简约模式（即brief: true时）不会触发该事件
  7. * init直接赋值mine、friend的情况下（只有设置了url才会执行 ready 事件）

监听在线状态切换

事件名：online，看到主面板你的昵称后的icon么，没错，就是它。当前支持“在线”、“隐身”两种状态切换。分别以online和hide的string类型的值传递给回调参数。如：

codelayui.code

  1. layim.on('online', function(status){
  2. console.log(status); //获得online或者hide
  3. //此时，你就可以通过Ajax将这个状态值记录到数据库中了。
  4. //服务端接口需自写。
  5. });

监听修改签名

事件名：sign
当主面板的签名被改动后触发，并返回新的签名

codelayui.code

  1. layim.on('sign', function(value){
  2. console.log(value); //获得新的签名
  3. //此时，你就可以通过Ajax将新的签名同步到数据库中了。
  4. });

监听更换背景皮肤

事件名：setSkin
当点击更换背景皮肤时触发，返回特定目录下的图片文件名和src路径

codelayui.code

  1. layim.on('setSkin', function(filename, src){
  2. console.log(filename); //获得文件名，如：1.jpg
  3. console.log(src); //获得背景路径，如：http://res.layui.com/layui/src/css/modules/layim/skin/1.jpg
  4. });

监听发送的消息

事件名：sendMessage，每当你发送一个消息，都可以通过该事件监听到。回调参数接受一个object类型的值，携带发送的聊天信息。如：

codelayui.code

  1. layim.on('sendMessage', function(res){
  2. var mine = res.mine; //包含我发送的消息及我的信息

  3. codelayui.code

    1. //mine的结构如下：
    2. {
    3. avatar: "avatar.jpg" //我的头像
    4. ,content: "你好吗" //消息内容
    5. ,id: "100000" //我的id
    6. ,mine: true //是否我发送的消息
    7. ,username: "纸飞机" //我的昵称
    8. }
  4. var to = res.to; //对方的信息

  5. codelayui.code

    1. //to的结构如下：
    2. {
    3. avatar: "avatar.jpg"
    4. ,id: "100001"
    5. ,name: "贤心"
    6. ,sign: "这些都是测试数据，实际使用请严格按照该格式返回"
    7. ,type: "friend" //聊天类型，一般分friend和group两种，group即群聊
    8. ,username: "贤心"
    9. }
  6. //监听到上述消息后，就可以轻松地发送socket了，如：
  7. socket.send(JSON.stringify({
  8. type: 'chatMessage' //随便定义，用于在服务端区分消息类型
  9. ,data: res
  10. }));
  11. });

监听接受的消息

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

codelayui.code

  1. //监听收到的聊天消息，假设你服务端emit的事件名为：chatMessage
  2. socket.onmessage = function(res){
  3. res = JSON.parse(res);
  4. if(res.emit === 'chatMessage'){
  5. layim.getMessage(res.data); //res.data即你发送消息传递的数据（阅读：监听发送的消息）
  6. }
  7. };
  8. //如果是来自于用户的聊天消息，它必须接受以下字段

  9. codelayui.code

    1. layim.getMessage({
    2. username: "纸飞机" //消息来源用户名
    3. ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
    4. ,id: "100000" //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
    5. ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
    6. ,content: "嗨，你好！本消息系离线消息。" //消息内容
    7. ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
    8. ,mine: false //是否我发送的消息，如果为true，则会显示在右方
    9. ,fromid: "100000" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
    10. ,timestamp: 1467475443306 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
    11. });
  10. //如果是来自于系统的聊天面板的消息

  11. codelayui.code

    1. layim.getMessage({
    2. system: true //系统消息
    3. ,id: 1111111 //聊天窗口ID
    4. ,type: "friend" //聊天窗口类型
    5. ,content: '对方已掉线'
    6. });

监听查看群员

事件名：members，在群聊面板中查看全部成员时触发，该事件返回获取群员接口（即layim.config中的members）的response信息。

codelayui.code

  1. layim.on('members', function(data){
  2. console.log(data);
  3. });

监听聊天窗口的切换

事件名：chatChange，坦白而言，似乎没什么卵用。不过有总比没有好。该事件返回一个object类型的参数，携带当前聊天面板的容器、基础信息等。

codelayui.code

  1. layim.on('chatChange', function(obj){
  2. console.log(obj);
  3. });

自定义一个聊天窗口

方法名：layim.chat(options)，是否似曾相识，没错，我们见过文档最开始的“客服姐姐”用的就是该方法。它允许你自定义任意模式的聊天窗口，先看例子吧：

codelayui.code

  1. //自定义聊天窗口

  2. codelayui.code

    1. layim.chat({
    2. name: '张三' //名称
    3. ,type: 'friend' //聊天类型
    4. ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
    5. ,id: 11111 //好友id
    6. })
    7. //自定义客服窗口
    8. layim.config({
    9. brief: true //简约模式，不显示主面板
    10. }).chat({
    11. name: '在线客服二' //名称
    12. ,type: 'friend' //聊天类型
    13. ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
    14. ,id: -2 //定义唯一的id方便你处理信息
    15. });
    16. layim.setChatMin(); //收缩聊天面板
  3. //自定义群聊（对于想搞一个临时性的房间，貌似是挺有意思的）

  4. codelayui.code

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

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

初始最小化聊天界面

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

codelayui.code

  1. layim.setChatMin();

更新当前会话状态

方法名：layim.setChatStatus(str)，可用于显示：对方输入状态、在线离线状态等，如：

codelayui.code

  1. //每次窗口打开或切换，即更新对方的状态
  2. layim.on('chatChange', function(res){
  3. var type = res.data.type;
  4. if(type === 'friend'){
  5. layim.setChatStatus('<span style="color:#FF5722;">在线</span>'); //模拟标注好友在线状态
  6. } else if(type === 'group'){
  7. //模拟系统消息
  8. layim.getMessage({
  9. system: true //系统消息
  10. ,id: 111111111
  11. ,type: "group"
  12. ,content: '贤心加入群聊'
  13. });
  14. }
  15. });

弹出添加面板

方法名：layim.add(data)
执行该方法将弹出一个我们内置的添加面板，可以帮助你完成：申请添加好友、申请添加群。参数格式如下：

codelayui.code

  1. layim.add({
  2. type: 'friend' //friend：申请加好友、group：申请加群
  3. ,username: 'xxx' //好友昵称，若申请加群，参数为：groupname
  4. ,avatar: 'a.jpg' //头像
  5. ,submit: function(group, remark, index){ //一般在此执行Ajax和WS，以通知对方
  6. console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
  7. console.log(remark); //获取附加信息
  8. layer.close(index); //关闭改面板
  9. }
  10. });

好友分组面板

方法名：layim.setFriendGroup(data)
执行该方法将弹出一个好友分组面板，以完成将好友追加到主面板的操作：

codelayui.code

  1. layim.setFriendGroup({
  2. type: 'friend'
  3. ,username: 'xxx' //好友昵称，若申请加群，参数为：groupname
  4. ,avatar: 'a.jpg' //头像
  5. ,group: layim.cache().friend //获取好友列表数据
  6. ,submit: function(group, index){
  7. //一般在此执行Ajax和WS，以通知对方已经同意申请
  8. //……
  9. //同意后，将好友追加到主面板
  10. layim.addList(data); //见下文
  11. }
  12. });

添加好友/群到主面板

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

codelayui.code

  1. layim.on('ready', function(res){
  2. //监听添加列表的socket事件，假设你服务端emit的事件名为：addList
  3. socket.onmessage = function(res){
  4. if(res.emit === 'addList'){
  5. layim.addList(res.data); //如果是在iframe页，如LayIM设定的add面板，则为 parent.layui.layim.addList(data);
  6. }
  7. };
  8. //需要特别注意的是回调返回的res
  9. //如果添加的是好友，res的结构必须是这样的

  10. codelayui.code

    1. {
    2. type: 'friend' //列表类型，只支持friend和group两种
    3. ,avatar: "a.jpg" //好友头像
    4. ,username: '冲田杏梨' //好友昵称
    5. ,groupid: 2 //所在的分组id
    6. ,id: "1233333312121212" //好友id
    7. ,sign: "本人冲田杏梨将结束AV女优的工作" //好友签名
    8. }
  11. //如果添加的是群组，res的结构必须是这样的

  12. codelayui.code

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

从主面板移除好友/群

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

codelayui.code

  1. layim.removeList({
  2. type: 'friend' //或者group
  3. ,id: 1238668 //好友或者群组ID
  4. });
  5. //如果是在iframe页，如LayIM设定的add面板，则为：
  6. parent.layui.layim.removeList({
  7. type: 'friend' //或者group
  8. ,id: 1238668 //好友或者群组ID
  9. });

实时更新好友列表离线状态

方法名：layim.setFriendStatus(id, type)

codelayui.code

  1. layim.setFriendStatus(11111, 'online'); //设置指定好友在线，即头像取消置灰
  2. layim.setFriendStatus(11111, 'offline'); //设置指定好友在线，即头像置灰

获取cache数据

方法名：layim.cache()，获取LayIM的cache信息，返回的信息结构和ready事件获得的信息一样，不同的是，改方法始终会获取到最新的cache。

codelayui.code

  1. //输出的信息不妨在你的Chrome控制台看看（需在引有LayIM的页面中），在此就不做列举了
  2. console.log(layim.cache())

删除本地数据

codelayui.code

  1. var cache = layui.layim.cache();
  2. var local = layui.data('layim')[cache.mine.id]; //获取当前用户本地数据
  3. //这里以删除本地聊天记录为例
  4. delete local.chatlog;
  5. //向localStorage同步数据
  6. layui.data('layim', {
  7. key: cache.mine.id
  8. ,value: local
  9. });

关于版权

LayIM目前并非开源产品，因此如果你是通过官网捐赠渠道获得LayIM，你将成为LayIM的终身会员，并可以将LayIM应用在任意正规平台。如果你通过非捐赠渠道获得LayIM，我们并不会进行过多追究，但是请勿对 LayIM 本身二次出售。版权最终解释权为：layui.com 所有

layui - 用心与你沟通

原网址: 访问
创建于: 2019-04-07 05:32:49
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论