mobile端 · webim-plugin

>[danger]注意：手機端瀏覽器websocket連接不穩定，需要開啟屏幕常亮才能保持連接，黑屏或瀏覽器進入后臺時間過長均會導致連接斷開。前端資源文件位于Applications\webApp\public目錄中，其中dist目錄存放的js和css的壓縮版本文件,static存放的原版文件。下面的地址都是基于Applications\webApp\public的。手?機端主要分為兩部分一部分為需要引入已有網站手機端html頁面中的，一個是自帶手機端聊天面板中的。 ## 1.已有網站引入說明。已?有網站引入js文件為static/js/socketDefine.js,此文件暴露一個Layui.socket出來，本js主要通過layui.socket進行websocket連接,然后在收到消息后調用配置的自定義函數進行操作,并未進聊天功能進行任何處理，只是一個消息接收。還有另外一個功能監聽class im_mobile的點擊，進行跳轉到自帶聊天面板。使用時只需要在html頁面加入相關配置參數然后引入/public/static/js/common.js即可使用。common.js會調用socketDefine.js然后自動完成初始化。引入?示例： ``` <script> var im_config = { mobile_define :true//此參數為true代表調用socketDefine.js ,token: { url:''//第一步的token請求接口地址 ,type:'post'//請求方式 ,dataType:'json' //請求格式類型，一般為json } ,referer_url:location.href //即時通訊出錯的回跳地址 ,url_domain : '' //webserver地址（非80/443端口需要帶著端口號） http://或https://開頭 ,socketHost:'' //webSocket連接地址即gateway地址（需要帶著端口號），gateway服務器開啟ssl以wss://開頭,未開啟以ws://開頭 //收到消息的自動處理示例此函數接收兩個值一個是消息類型type 一個是消息內容 ,messageCallBack:function(type,data) { //這里需要自定義這里是一個收到聊天消息后更改消息數量的展示 if (data.remove_cid) {//有值代表是本人發送的消息 return ; } if(type == 'message'){//代表收到一條聊天消息,更改消息個數docment的值 $('.msg-num').html(parseInt($('.msg-num').html())+1); $('.msg-num').show(); } if(type == 'messageList'){//代表剛進入時請求的離線消息數量。data為離線消息數組。 $('.msg-num').html(data.length); $('.msg-num').show(); } } } function myDefined(Layui,layer,layim,$,socket){ //自定義js處理請寫在這里可直接使用layui;lay;socket和$ 注:jQuery版本為jQuery1.11最穩定的一個版本 } </script>  <script src="webserver地址（非80/443端口需要帶著端口號）/public/static/js/common.js" charset="utf-8"></script> ``` im_config支持參數說明: ``` token:{//獲取token接口 url:'' } //自定義收到消息回調處理(必須是函數類型) ,messageCallBack:function (type,data) { return ; } //常規設置 ,notice:true//是否開啟桌面消息提醒，即在瀏覽器之外的提醒 ,voice: "/public/static/layui/css/modules/layim/voice/default.wav"//聲音提醒文件位置 ,socketHost: '' //webSocket鏈接地址以ws://或wss://開頭 ,url_domain :''//webserver地址（非80/443端口需要帶著端口號） http://或https://開頭 ,referer_url:location.href ``` ## 2.手機端聊天面板介紹手機?端聊天面板是另一個網頁,位置位于Applications\webApp\view\Index\index.html 用?戶可以自由查看里面代碼，這里做簡要介紹 ?里面的js是用到的static/js/socketMobile.js此文件暴露一個Layui.socket出來，本js主要通過layui.socket進行websocket連接然后進行相關處理。引入方式也是引入/public/static/js/common.js然后配置im_cofig使用的。 ?common.js會判斷是否在手機端打開，如果在手機端打開會引入socketMobile.js，否則會引入socket.js所以測試開發時一定要以手機手機打開此頁面。 html已有代碼為： ``` <script> var im_config = { token:"<{$smarty.get.token}>" ,referer_url:"<{$smarty.get.referer_url}>" ,url_domain :location.origin //imwebserver地址 ,dataType:"json"//aja請求接口(不包括上傳文件和圖片data獲取接口及token接口)返回格式默認json 不跨域可不填 ,socketHost:"<{$gateway_host}>" // webSocket鏈接地址 gateway服務器開啟ssl以wss://開頭,未開啟以ws://開頭 <{if $im_file eq false}> //上傳圖片接口（返回的數據格式見下文），若不開啟圖片上傳，填false , uploadImage:false //上傳文件接口（返回的數據格式見下文），若不開啟圖片上傳，填false , uploadFile:false <{elseif $up_config eq true}> //上傳圖片接口（返回的數據格式見下文），若不開啟圖片上傳，填false , uploadImage: { url: "<{$up_config.uploadurl}>" //上傳地址 webserver自有地址為 /im/upImg ,up_way:"<{$up_config.type}>" //上傳方式 up上傳到自有服務器 qiniu上傳到七牛云 custom自定義第三方存儲 ,data_url:{url:'<{$up_config.data_url}>',type:'post',dataType:'json'} //附帶參數請求地址 {code:0,message:'',data:{'':""}} code0成功 code 1失敗 message錯誤信息 data上傳附帶的參數會傳給done回調函數 } //上傳文件接口（返回的數據格式見下文），若不開啟圖片上傳，填false , uploadFile: { url: '<{$up_config.uploadurl}>' //上傳地址 webserver自有地址為 /im/upFile ,up_way:"<{$up_config.type}>" //上傳方式 up上傳到自有服務器 qiniu上傳到七牛云 custom自定義第三方存儲 ,data_url:{url:'<{$up_config.data_url}>',type:'post',dataType:'json'} //附帶參數請求地址 {code:0,message:'',data:{'':""}} code0成功 code 1失敗 message錯誤信息 data上傳附帶的參數會傳給done回調函數 } <{/if}> } function myDefined(Layui,layer,layim,$,socket){ //將參數暴露到全局 window.Layui = Layui; window.layer = layer; window.layim = layim; window.$=$; window.socket = socket; //自定義js處理請寫在這里可直接使用layui;lay;socket和$ 注:$為msui組件不是jquery但包含jquery詳細語法請參考 http://m.sui.taobao.org/ } </script>  <script type='text/javascript' src='/public/<{$__STATIC__}>/js/common.js' charset='utf-8'></script> ``` 其?中im_config可接收參數包括： ``` { token:null//token即時通訊token //初始化接口 , init: { url: '/im/getMyInfo' , data: {} } //上傳圖片接口（返回的數據格式見下文），若不開啟圖片上傳，剔除該項即可 , 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 對象 } //上傳文件接口（返回的數據格式見下文），若不開啟文件上傳，剔除該項即可 , uploadFile: { url: '/im/upFile' //上傳地址 webserver自有地址為 /im/upFile ,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 對象 } //聊天記錄接口 , chatLog: { url:'/im/chatlog'//接口地址 , type: 'post' //默認post } ,addFriend:{ //申請添加好友 url:'/im/addFriend' , type:'post' } ,addGroup:{ //申請添加群組 url:'/im/addGroup' , type:'post' } ,remmondFriend:{ //推薦好友 url:'/im/getRemmondFriend' , type:'post' } ,getUser:{ //查找用戶 url:'/im/getUser' , type:'post' } ,getGroup:{ //查找群組 url:'/im/getGroup' , type:'post' } , msgbox: { //消息盒子列表 url:'/im/getMsg' ,type:'post' } //獲取消息盒子個數 , messageBox: { url: "/im/getMsgNum" , type: 'post' } , handleMsg:{ //處理消息盒子請求消息 url:'/im/handleMsg' ,type:'post' } //獲取群員接口 , members: { url: '/im/getGroupUser' //接口地址 , type: 'post' , data: {} //額外參數 } , 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' } //擴展工具欄可同時配置多個 ,tool: [ // { // alias: 'code' //工具別名 // ,title: '代碼' //工具名稱 // ,iconUnicode: '' //圖標字體的unicode，可不填 // ,iconClass: '' //圖標字體的class類名 // } // { // alias: 'chatlog' //工具別名 // ,title: '聊天記錄' //工具名稱 // ,iconUnicode: '' //圖標字體的unicode，可不填 // ,iconClass: '' //圖標字體的class類名 // } ] //更多列表可同時配置多個 ,moreList: [{ alias: 'msgbox' ,title: '消息盒子' ,iconUnicode: '' //圖標字體的unicode，可不填 ,iconClass: '' //圖標字體的class類名 },{ alias: 'clearCache' ,title: '清除緩存' ,iconUnicode: '' //圖標字體的unicode，可不填 ,iconClass: '' //圖標字體的class類名 }] //常規設置 ,title: 'WebIM' //標題 ,chatTitleColor:'#40affe'//設置會話頂部標題的顏色 ,tabIndex:1//用戶設定初始打開的Tab項下標 , isVoice: true//是否播放聲音 , voicePath: "/publice/voice/default.mp3"//聲音提醒文件位置相對于Applications/webApp ,isNewFriend:true//是否在聯系人面板開啟新的朋友 ,isgroup:true//是否在聯系人面板開啟群聊 ,notice:true//是否開啟桌面消息提醒，即在瀏覽器之外的提醒 ,voice:false//關閉layim自帶聲音 ,maxLength:3000//可允許的消息最大字符長度 ,copyright:false//是否授權。 ,brief: false //是否簡約模式（若開啟則不顯示主面板） ,socketHost: ''//webSocket鏈接地址以ws://或wss://開頭 ,url_domain :''//webserver地址因為在webserver下所以可不填 ,referer_url:false//主網站地址，出錯后會跳轉回本網站 } ``` 其?中參數用戶可根據需要自行去Applications\webApp\view\Index\index.html修改。如?需二次開發建議用戶修改Applications\webApp\view\Index\index.html和socketMobiel,非必要不建議用戶修改mobile/layim源碼。