>[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源码。
