关于layIM的一些使用记录

LayIM基于layui模块体系，聊天界面类似QQ，可以说就是仿照着QQ来的。整个前段代码基于JQ。
你需要购买付费的版本，才能使用layim。比较坑的地方就是传输的数据格式要和官网格式一样，没有自定义内容
这里主要讲pc版:

layIm的一些功能：
聊天功能：

image.png

个人信息界面，包括我拥有的群，群好友，消息记录等：

image.png

搜索，消息盒子，添加好友：

image.png

image.png

image.png

等功能其他功能。

开始使用

第一步：

下载相关layui的资源文件包，在自己的html文件里面引用进来。

image.png

第二步：

按照下述的代码加载layim就可得到一个简单的layim的模板了。对，没错，是最简单的模板。只是一个聊天框的UI界面。

 //此处需改成自己的引用路径


//此处需改成自己的引用路径

运行效果图

image.png

接下来正餐开始

（配置初始化）

使用语句
layim.config({}）
注：以下语句均在layui.use('layim', function(layim){}）里面

  //基础配置
  layim.config({
     
    init: {} //获取主面板列表信息，参数为：我的信息，好友列表，群组列表。等可以采取ajax配置的方式
/*
    ajax配置方式
    init:{
    url:''/接口地址
    ,type:''//默认为get 
    ,data:{}额外参数
}

*/
 
    //获取群员接口，获取群成员列表 当点击群聊面板查看成员是，将会向下面配置的地址发送ajax请求，传入参数为群组的id
    ,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' //聊天记录页面地址，若不开启，剔除该项即可
      brief: false，默认false 是否为简约模式，简约模式主界面不会显示，一般可用于客服
      
   //,title: 'WebIM' //自定义主面板最小化时的标题
    //,right: '100px' //主面板相对浏览器右侧距离
    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
    ,initSkin: '5.jpg' //1-5 设置初始背景
    //,skin: ['aaa.jpg'] //新增皮肤
    // ,isfriend: false //是否开启好友
    // ,isgroup: true //是否开启群组
    //,min: true //是否始终最小化主面板，默认false
    ,notice: false //是否开启桌面消息提醒，默认false
    //,voice: false //声音提醒，默认开启，声音文件为：default.mp3

  });  

方法名：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: '约吗'
  ,type: 'group' //群组类型
  ,avatar: 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
  ,id: 10000000 //定义唯一的id方便你处理信息
  ,members: 123 //成员数，不好获取的话，可以设置为0
});

方法名：layim.setChatMin(), 初始最小化聊天界面

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

layim.setChatMin();

方法名：layim.setChatStatus(str), 更新当前会话状态

可用于显示：对方输入状态、在线离线状态等，

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

（事件监听）

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

!!!!监听发送的消息

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

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

var to = res.to; //对方的信息
//监听到上述消息后，就可以轻松地发送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即你发送消息传递的数据（阅读：[监听发送的消息](https://www.layui.com/doc/modules/layim.html#onsendMessage)）
  }  };

 //如果是来自于用户的聊天消息，它必须接受以下字段
  

    ### code[layui.code](http://www.layui.com/doc/modules/code.html)

      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
     });

    

  //如果是来自于系统的聊天面板的消息
 

    ### code[layui.code](http://www.layui.com/doc/modules/code.html)

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

    

事件名：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
});      
     

未完待续。。。