這里介紹改動后的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