>[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>
<!--開發時引入static/js/common.js線上環境建議引入壓縮版文件dist/js/common.js-->
<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>
<!--調試模式會引入static/js/common.js非調試模式會引入dist/js/common.js-->
<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源碼。