更新:2021-6-4 11:41:46

LayIM 前端文档

当前文档适用于 LayIM PC 端版本,如果你正在了解的并非该版本,请选择对应的版本阅读:


LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案,采用 HTML、CSS、JavaScript 编写,其包含的只是一套前端源代码素材和相关的模拟示例,不具备后台程序以数据库存储等功能。因此实际使用时,需要自己开发后端语言或对接云服务平台(如:融云、环信等)。

开始使用

LayIM 是基于 layui 模块体系的扩展组件。使用时,将您获得的压缩包解压,将文件放入你的项目后,不用再对其代码做任何修改(方便下次升级)。然后您只需引入下述两个文件即可。

./layui/css/layui.css
./layui/layui.js

一个最直接的例子是:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LayIM 测试</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<script src="./layui/layui.js"></script>
<script>
//以下为 layim 最新版写法
layui.config({
  layimPath: '../dist/' //配置 layim.js 所在目录
  ,layimAssetsPath: '../dist/layim-assets/' //layim 资源文件所在目录
}).extend({
  layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
}).use('layim', function(layim){ //加载组件
  //先来个客服模式压压精
  layim.config({
    brief: true //是否简约模式(如果true则不显示主面板)
  }).chat({
    name: '一个新窗口'
    ,type: 'friend'
    ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1'
    ,id: -2
  });
});
</script>
</body>
</html>

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

初始化配置

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

layui.config({
  layimPath: '../dist/' //配置 layim.js 所在目录
  ,layimAssetsPath: '../dist/layim-assets/' //layim 资源文件所在目录
}).extend({
  layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
}).use('layim', function(layim){ //加载组件
  //基础配置
  layim.config({
 
    init: {} //获取主面板列表信息,下文会做进一步介绍
 
    //获取群员接口(返回的数据格式见下文)
    ,members: {
      url: '' //接口地址(返回的数据格式见下文)
      ,type: 'get' //默认get,一般可不填
      ,data: {} //额外参数
    }
    
    //上传图片接口(返回的数据格式见下文),若不开启图片上传,剔除该项即可
    ,uploadImage: {
      url: '' //接口地址
      ,type: 'post' //默认post
    } 
    
    //上传文件接口(返回的数据格式见下文),若不开启文件上传,剔除该项即可
    ,uploadFile: {
      url: '' //接口地址
      ,type: 'post' //默认post
    }
    //扩展工具栏,下文会做进一步介绍(如果无需扩展,剔除该项即可)
    ,tool: [{
      alias: 'code' //工具别名
      ,title: '代码' //工具名称
      ,icon: '' //工具图标,参考图标文档
    }]
    
    ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可
    ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址,若不开启,剔除该项即可
    ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址,若不开启,剔除该项即可
  });
}); 

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 拓展背景,如:
skin: [ 
  'http://xxx.com/skin.jpg', 
  'b.png'
  …
]             
            
copyright false boolean 是否授权。如果非授权获得,或将LayIM应用在第三方,建议保留,即不设置。

init数据格式

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

/获取主面板列表信息
init: {
  url: '' //接口地址(返回的数据格式见下文)
  ,type: 'get' //默认get,一般可不填
  ,data: {} //额外参数
}  

那么该接口所返回的信息(response)应该严格按照下述的 JSON 格式:

{
  "code": 0 //0表示成功,其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
  
    //我的信息
    "mine": {
      "username": "纸飞机" //我的昵称
      ,"id": "100000" //我的ID
      ,"status": "online" //在线状态 online:在线、hide:隐身
      ,"sign": "在深邃的编码世界,做一枚轻盈的纸飞机" //我的签名
      ,"avatar": "a.jpg" //我的头像
    }
    
    //好友列表
    ,"friend": [{
      "groupname": "前端码屌" //好友分组名
      ,"id": 1 //分组ID
      ,"list": [{ //分组下的好友列表
        "username": "贤心" //好友昵称
        ,"id": "100001" //好友ID
        ,"avatar": "a.jpg" //好友头像
        ,"sign": "这些都是测试数据,实际使用请严格按照该格式返回" //好友签名
        ,"status": "online" //若值为offline代表离线,online或者不填为在线
      }, …… ]
    }, …… ]
    
    //群组列表
    ,"group": [{
      "groupname": "前端群" //群组名
      ,"id": "101" //群组ID
      ,"avatar": "a.jpg" //群组头像
    }, …… ]
  }
}

也可以直接赋值列表数据:

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

members 数据格式

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

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

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

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

上传图片

通过 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
  }
}      

上传文件

通过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" //文件名
  }
}      

扩展工具栏

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

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

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

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

消息盒子

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

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

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

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

查找页面

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

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

查看更多聊天记录

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

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

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

富文本内容格式

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

超链接格式:a(地址)[文本]       如:a(http://www.layui.com)[layui]   
图片格式:img[地址]            如:img[http://cdn.layui.com/xxx/a.jpg]
文件格式:file(地址)[文本]      如:file(http://cdn.layui.com/download/layim.zip)[layim.zip]
音频格式:audio[地址]          如:audio[http://cdn.layui.com/xxx/a.mp3]
视频格式:video[地址]          如:video[http://cdn.layui.com/xxx/a.avi]

WebSocket

一般来说,对接到第三方通讯平台是个更靠谱的选择,比如:环信、融云、野狗。它们都可以是 LayIM 的最佳拍档,你会省去许多工作。但如果你想保证绝对的数据隐私,你也可以自己搭建通讯服务。目前所有的主流Web语言都有对WebSocket做很好的支持,其中也有很多优秀的通讯框架可以任你挑选,因此万万不可畏惧它的存在,除非你真的想用Ajax轮询去解决消息I/O。WebSocket会使得你的消息接受和传递变得极其轻松,最重要的一点是,性能卓绝。WebSocket的建立非常简单:

layui.use('layim', function(layim){
  
  //建立WebSocket通讯
  //注意:如果你要兼容ie8+,建议你采用 socket.io 的版本。下面是以原生WS为例
  
  var socket = new WebSocket('ws://localhost:8090');
  
  //发送一个消息
  socket.send('Hi Server, I am LayIM!');
codelayui.code
//更多情况下,一般是传递一个JSON
socket.send(JSON.stringify({
  type: '' //随便定义,用于在服务端区分消息类型
  ,data: {}
})); 
  //连接成功时触发
  socket.onopen = function(){
    socket.send('XXX连接成功'); 
  };
  
  //收到的消息事件
  socket.onmessage = function(res){
    //res为接受到的值,如 {"emit": "messageName", "data": {}}
    //emit即为发出的事件名,用于区分不同的消息
  };
  
  另外还有onclose、onerror,分别是在链接关闭和出错时触发。
  
  //基本上常用的就上面几个了,是不是非一般的简单?
  
  
});

服务端层面,不用害怕,事情也远没有那么复杂。这些文档也许可以帮助到你:LayIM 开发教程(由第三方提供),含 Node.js/Java/.NET/PHP

事件

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

ready事件

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

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

触发在线状态切换

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

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

触发修改签名

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

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

触发更换背景皮肤

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

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

触发发送的消息

事件名: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(JSON.stringify({
    type: 'chatMessage' //随便定义,用于在服务端区分消息类型
    ,data: res
  })); 
  
});

触发接受的消息

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

//触发收到的聊天消息,假设你服务端emit的事件名为:chatMessage
socket.onmessage = function(res){
  res = JSON.parse(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: "嗨,你好!本消息系离线消息。" //消息内容
  ,cid: 0 //消息id,可不传。除非你要对消息进行一些操作(如撤回)
  ,mine: false //是否我发送的消息,如果为true,则会显示在右方
  ,fromid: "100000" //消息的发送者id(比如群组中的某个消息发送者),可用于自动解决浏览器多窗口时的一些问题
  ,timestamp: 1467475443306 //服务端时间戳毫秒数。注意:如果你返回的是标准的 unix 时间戳,记得要 *1000
});

//如果是来自于系统的聊天面板的消息
layim.getMessage({
  system: true //系统消息
  ,id: 1111111 //聊天窗口ID
  ,type: "friend" //聊天窗口类型
  ,content: '对方已掉线'
});

触发查看群员

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

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

触发聊天窗口的切换

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

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

自定义一个聊天窗口

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

//自定义聊天窗口
layim.chat({
  name: '张三' //名称
  ,type: 'friend' //聊天类型
  ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
  ,id: 11111 //好友id
})
 
//自定义客服窗口
layim.config({
  brief: true //简约模式,不显示主面板
}).chat({
  name: '在线客服二' //名称
  ,type: 'friend' //聊天类型
  ,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.setChatStatus(str),可用于显示:对方输入状态、在线离线状态等,如:

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

弹出添加面板

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

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

好友分组面板

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

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

添加好友/群到主面板

方法名: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: "1233333312121212" //好友id
  ,sign: "90 年代女神" //好友签名
}

//如果添加的是群组,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.setFriendStatus(id, type)

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

获取缓存

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

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

删除本地记录

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