这里介绍改动后的pc端layim（只介绍改动部分）主要是方便不满足需求的用户自定义开发。强烈建议直接在socket.js中更改而不是单独将layim提出来。
#### **这里只介绍改动部分更多说明请参考:** [layim原版文档](https://www.layui.com/doc/modules/layim.html)
### 初始化配置
方法：layim.config(options)
改动：增加一些socket.js用到的必要参数对layim无影响，不做过多介绍。
```
Layui.use('layim', function(layim){
//基础配置
layim.config({
token:{
url:''
}
//初始化接口
, init: {
url: '/im/getMyInfo'
, data: {}
}
//获取群员接口（返回的数据格式见下文）
, members: {
url: '/im/getGroupUser' //接口地址（返回的数据格式见下文）
, type: 'post' //默认get，一般可不填
, data: {} //额外参数
}
//上传图片接口（返回的数据格式见下文），若不开启图片上传，填false
, uploadImage: {
url: "/im/upImg" //上传地址 webserver自有地址为 /im/upImg
,up_way:"up" //上传方式 up上传到自有服务器 qiniu上传到七牛云 custom自定义第三方存储
,data:{} //上传时附带参数
,data_url:false //附带参数请求地址格式{url:"请求地址"，type:"请求method",dataType:'返回数据格式建议json/jsonp'} 接口返回格式： {code:0,message:'',data:{'':""}} code0成功 code 1失败 message错误信息 data上传附带的参数 会传给done回调函数
,done:false //自定义上传完成处理处理函数 函数返回格式{code:0,message:'',data{src:''}} code0成功 code 1失败 message错误信息 data.src文件件完整地址
,error:false //上传失败函数接收三个参数 index 当前文件的索引 ， upload 重新上传的方法 ， e XMLHttpRequest 对象
}
//上传文件接口（返回的数据格式见下文），若不开启文件上传，填false
, uploadFile: {
url: '/im/upFile' //上传地址 webserver自有地址为 /im/upFile
,up_way:"up" //上传方式 up上传到自有服务器 qiniu上传到七牛云 custom自定义第三方存储
（必须结socket.js中才有用）
,data:{} //上传时附带参数
,data_url:false //附带参数请求地址格式{url:"请求地址"，type:"请求method",dataType:'返回数据格式建议json/jsonp'} 接口返回格式： {code:0,message:'',data:{'':""}} code0成功 code 1失败 message错误信息 data上传附带的参数 会传给done回调函数
,done:false //自定义上传完成处理处理函数 函数返回格式{code:0,message:'',data{src:''}} code0成功 code 1失败 message错误信息 data.src文件件完整地址
,error:false //上传失败函数接收三个参数 index 当前文件的索引 ， upload 重新上传的方法 ， e XMLHttpRequest 对象
}
//获取消息盒子个数
, messageBox: {
url: "/im/getMsgNum"
, type: 'post'
}
//修改签名接口
, editSign: {
url: "/im/editSign"
, type: 'post'
}
//修改在线状态接口
, editStatus: {
url: "/im/editStatus"
, type: 'post'
}
,addGroup:{ //申请添加群组
url:'/im/addGroup'
, type:'post'
}
, groupMemberMenu: { //获取群组成员右键菜单
url: "/im/groupMemberMenu"
, type: 'post'
}
, editGroupdescribe: { //修改群名片
url: '/im/editGroupdescribe'
, type: 'post'
}
, memberGag: { //禁言
url: '/im/memberGag'
, type: 'post'
}
, cancelGag: { //取消禁言
url: '/im/cancelGag'
, type: 'post'
}
, setAdmin: { //设为管理
url: '/im/setAdmin'
, type: 'post'
}
, removeAdmin: { //取消管理
url: '/im/removeAdmin'
, type: 'post'
}
, leaveGroup: { //离开该群组
url: '/im/leaveGroup'
, type: 'post'
},
addFriend:{ //申请添加好友
url:'/im/addFriend'
, type:'post'
},
editDescribe: { //修改好友备注
url: '/im/editDescribe'
, type: 'post'
}
, moveFriend: { //移动好友分组
url: '/im/moveFriend'
, type: 'post'
}
, removeFriend: { //删除好友
url: '/im/removeFriend'
, type: 'post'
}
, addFriendGroup: { //添加好友分组
url: '/im/addFriendGroup'
, type: 'post'
}
, editFriendGroup: { //修改好友分组
url: '/im/editFriendGroup'
, type: 'post'
}
, delFriendGroup: { //删除好友分组
url: '/im/delFriendGroup'
, type: 'post'
}
, Information: { //查看资料地址
url: '/im/delFriendGroup'
, type: 'post'
}
, msgbox: '/index/msgbox' //消息盒子页面地址，
, find: '/index/find' //发现页面地址，若不开启，剔除该项即可
, chatLog: '/im/chatlog' //聊天记录页面地址，若不开启，剔除该项即可
//常规设置
, isVoice: true//是否播放声音
, voicePath: "default.mp3"//声音提醒文件位置
//,brief: true //是否简约模式（若开启则不显示主面板）
, title: 'WebIM' //自定义主面板最小化时的标题
//,right: '100px' //主面板相对浏览器右侧距离
//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
, initSkin: '3.jpg' //1-5 设置初始背景
//,skin: ['aaa.jpg'] //新增皮肤
//,isfriend: false //是否开启好友
//,isgroup: false //是否开启群组
, min: true //是否始终最小化主面板，默认false
, notice: true //是否开启桌面消息提醒，默认false
, voice: false //声音提醒，默认开启，声音文件为：default.wav
, socketHost: '' //webSocket链接地址 以ws://或wss://开头
, url_domain :''
});
});
```
配置项参考：
|可选项|默认值|类型|用途|
|---|---|---|---|
|brief|false|boolean|是否简约模式，如果设为 true，则主面板不会显示。一般可用于客服目前仅支持false客服模式请自行开发 |
|title|WebIM|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|拓展背景|
|copyright |false|boolean|是否授权。设置true后会隐藏版权信息|
*****
### 初始化
初始化layim
改动:返回格式修改
init数据格式
```
//通过ajax请求获取主面板列表信息
init: {
url: '' //接口地址（返回的数据格式见下文）
,type: 'get' //默认get，一般可不填
,data: {} //额外参数
,dataType:'json'//默认json跨域时用jsonp
}
```
返回格式（json/jsonp)
```
{
"code": 0,//状态码0表示成功，1表示失败
"message": "查询成功",//描述信息
"data": {//返回数据
//我的信息
"mine": {
"username": "云天001",//昵称
"id": 15,//用户id
"status": "online",//在线状态 online在线 hide：隐身
"remark": "我就是我不一样的烟火啦啦啦啦啦了",//签名
"avatar": "http://localhost:2346/public/uploads/avatar/20180131\\bfecc8dbee48b3bcac84b4dd159c8ac8.png"//头像
},
//好友列表
"friend": [{
"groupname": "测试分组1",//好友分组名
"id": 24,//分组id
"list": [{
"id": 22,//好友用户id
"username": "测试",//好友备注名
"sign": "阿斯顿",//好友签名
"avatar": "http://localhost:2346/public/uploads\/avatar/20180731/48192ad6f53a50e9c91b60043f24f90b.png",//好友头像
"status": "online",//好友在线状态online在线offline离线
"friend_id": 20//好友表关联id
}]
}, {
"groupname": "好友分组2",
"id": 25,
"list": []
}, {
"groupname": "测试分组3",
"id": 26,
"list": []
}],
//群组
"group": [{
"groupname": "测试4564231231235456456",//群组名称
"id": 1,//群组id
"avatar": "http://localhost:2346/public/uploads/avatar/ce\\cc72e8c336a7c24a1c7fa68255a1b3.jpg",//群组头像
"members": 2,//群成员数量
"tr_no": "1566123132"//群号码
}, {
"groupname": "测试名字",
"id": 2,
"avatar": "http://localhost:2346/public/uploads/groupAvatar/A8213406792459402.png",
"members": 1,
"tr_no": "1534833831"
}]
}
}
```
*****
### 获取群员列表
通过layim.config来设定members参数可获取群员列表
改动：返回格式更改
默认配置为：
```
//获取群员接口（返回的数据格式见下文）
, members: {
url: '/im/getGroupUser' //接口地址（返回的数据格式见下文）
, type: 'post' //默认get，一般可不填
, data: {} //额外参数
}
```
返回格式为json/jsonp
```
{
"code": 0,//状态码0表示成功，1表示失败
"message": "查询成功",//描述信息
"data": {
//成员列表
"list": [{
"avatar": "http:\/\/localhost:2346\/\/public\/uploads\/avatar\/20180131\\bfecc8dbee48b3bcac84b4dd159c8ac8.png",//头像
"username": "群主",//群名片
"sign": "我就是我不一样的烟火啦啦啦啦啦了",//签名
"id": 15,//用户id
"auth": 2,//身份0普通成员1管理员 3群主
"nickname": "云天001"//用户昵称
}, {
"avatar": "http:\/\/localhost:2346\/\/public\/uploads\/avatar\/20180731\/48192ad6f53a50e9c91b60043f24f90b.png",
"username": "管理员1号",
"sign": "阿斯顿",
"id": 22,
"auth": 1,
"nickname": "测试3test"
}],
"my_auth": 2,//我在本群的身份
"my_id": 15//我的id
}
}
```
*****
### 上传图片
通过layim.config来设定uploadImage参数可进行图片上传
改动：返回格式更改，扩展上传时可自定义上传参数扩展，自定义上传出错函数，自定义上传返回格式转换函数（用于第三方上传）
默认配置为：
```
//上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
, uploadImage: {
url: "/im/upImg" //上传地址 webserver自有地址为 /im/upImg
,up_way:"up" //上传方式 up上传到自有服务器 qiniu上传到七牛云 custom自定义第三方存储不在socket.js中调用用此参数无效直接忽略即可
,data:{} //上传时附带参数
,data_url:false //附带参数请求地址格式{url:"请求地址"，type:"请求method",dataType:'返回数据格式建议json/jsonp'} 接口返回格式： {code:0,message:'',data:{'':""}} code0成功 code 1失败 message错误信息 data上传附带的参数 会传给done回调函数
,done:false //自定义上传完成处理处理函数 函数返回格式{code:0,message:'',data{src:''}} code0成功 code 1失败 message错误信息 data.src文件件完整地址
,error:false //上传失败函数接收三个参数 index 当前文件的索引 ， upload 重新上传的方法 ， e XMLHttpRequest 对象
}
```
参数说明：
|名称 |默认值 | 说明|
|---|---|---|
| url | /im/upImg | 图片上传地址 |
|data|{}|上传时附带的参数
|
|data_url|false|上传时请求此地址得到附带参数，具体格式和返回格式见下文|
|done|false|上传完成后处理返回信息为所需要格式(主要用于第三方存储无法按照上传要求格式返回数据)
|error|false|自定义上传出错时处理函数|
上传时将会向uploadImage的url发送HTTP请求，进行图片上传。我们会给你传递一个name="file"的文件表单域，你接受即可，如果上传时需要加上附带参数可以配置data参数 如`data:{name:'aa.jpg'}`
如果是需要动态获取的附带参数则需要设置data_url上传前会先请求data_url的地址然后将返回的data附加在文件表单域中一块提交给上传地址.
data_url参数格式为：
```
{
url:""，//请求地址
type:"",//请求method：get/post
dataType:''//返回数据格式建议json/jsonp
}
```
对应的返回格式为（json）：
```
{
code:0,//状态0成功1失败
message:'',//描述信息
data:{}//需要附带的参数上传时会将此值一块提交
}
```
当data_url和data参数同时存在时会data_url的返回值会覆盖data
上传地址返回格式应为（json）
```
{
"code": 0,//状态0成功1失败
"message": "上传成功",//描述信息
"data": {
"src": "http://localhost:2346/public/uploads/images/AA244683285250980.jpg"//文件地址
}
}
```
如果上传地址无法按上面所说格式返回可以设置done参数来转换一下格式。
done为一个函数接受两个参数res和data,res为上传地址返回的数据data为自定义的上传附带参数。
done函数应返回一个严格遵守上面上传地址返回格式的json对象。
设置方式示例：
```
done:function (res,data) {
return {code:0,message:'上传成功',data:{src:data.cdnurl+'/'+res.key}}
}
```
当上传出现http请求错误时会报一个上传失败的错误提示，用户可以自定义error参数来处理此错误
error为一个函数接受 index,upload,e三个参数其中index（当前文件的索引）、upload（重新上传的方法）的用法请参考[layui文件上传](https://www.layui.com/doc/modules/upload.html)。e为XMLHttpRequest 对象。
设置方式示例：
```
error:function (index,upload,e) {
try {
var info = JSON.parse(e.response);
layer.msg(info.error,{icon:0,anim: 6});
}catch (e){
layer.msg('上传失败',{icon:0,anim: 6});
}
}
```
### 上传文件
通过layim.config来设定uploadImage参数可进行文件上传，事实上跟图片上传非常类似。
改动：返回格式更改，扩展上传时可自定义上传参数扩展，自定义上传出错函数，自定义上传返回格式转换函数（用于第三方上传）
```
//上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
uploadFile: {
url: '/im/upFile' //上传地址 webserver自有地址为 /im/upFile
,up_way:"up" //上传方式 up上传到自有服务器 qiniu上传到七牛云 custom自定义第三方存储
不在socket.js中调用用此参数无效直接忽略即可
,data:{} //上传时附带参数
,data_url:false //附带参数请求地址格式{url:"请求地址"，type:"请求method",dataType:'返回数据格式建议json/jsonp'} 接口返回格式： {code:0,message:'',data:{'':""}} code0成功 code 1失败 message错误信息 data上传附带的参数 会传给done回调函数
,done:false //自定义上传完成处理处理函数 函数返回格式{code:0,message:'',data{src:''}} code0成功 code 1失败 message错误信息 data.src文件件完整地址
,error:false //上传失败函数接收三个参数 index 当前文件的索引 ， upload 重新上传的方法 ， e XMLHttpRequest 对象
}
```
相关说明参考上面的上传图片，配置完全一样。
*****
### 添加好友/群到主面板
方法:layim.addList(res);
改动：res格式修改
```
//添加好友
{
avatar: "http://localhost:2346/public/uploads/avatar/20180117dc855b07189a02f22f08f0e0db1d9e17.jpg"//好友头像
,friend_id: "22"//好友关联id
,groupid: 1//所在的分组id
,id: 17//好友id
,sign: "1"//好友签名
,status: "online"//在线状态 online在线offline离线
,type: "friend"//列表类型，只支持friend和group两种
,username: "a121111"//好友昵称
}
//添加群组
{
type: 'group' //列表类型，只支持friend和group两种
,avatar: "a.jpg" //群组头像
,groupname: 'Angular开发' //群组名称
,id: "12333333" //群组id
}
```
*****
### 设置主面板在线状态
方法:layim.setStatus(status);
改动:此函数为新增函数
说明:设置主面板我的在线状态status的值为online或hide
*****
### 设置主面板签名
方法:layim.setSign(sign);
改动:此函数为新增函数
说明:设置主面板我的签名sign为签名字符串
*****
### 修改好友签名
方法:layim.setFriendSign(data);
改动:此函数为新增函数
说明:修改好友的签名 data格式为{id:1,sign:'新的签名啦啦啦'} id为好友的用户id sign为新的爱情那么字符串
*****
### 修改好友备注名
方法:layim.setFriendName(data);
改动:此函数为新增函数
说明:修改好友的备注名 data格式为{id:1,username:'新备注'} id为好友的用户id sign为新的备注名
*****
### 添加好友分组
方法:layim.addFriendGroup(data);
改动:此函数为新增函数
说明:添加新的好友分组到主面板 data格式为{id:1,groupname:'分组名称',list[]} id为好友分组id groupname为分组名称 list必须为空数组[]
*****
### 修改好友分组名称
方法:layim.setFriendGroupName(data);
改动:此函数为新增函数
说明:重新设置好友分组的名称 data格式为{id:1,groupname:'分组名称'} id为好友分组id groupname为分组名称
*****
### 删除好友分组
方法:layim.removeFriendGroup(data);
改动:此函数为新增函数
说明:删除聊天面板的好友分组 data格式为{id:1} id为好友分组id
