layim-pc端 · webim-plugin

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