pc端介绍。
前端资源文件位于Applications\webApp\public目录中,其中dist目录存放的js和css的压缩版本文件,static存放的原版文件。下面的地址都是基于Applications\webApp\public的。
PC端主要js文件为static/js/socket.js此文件暴露一个Layui.socket出来,本插件主要通过layui.socket进行websocket连接和实现所有逻辑。使用时只需要在html页面加入相关配置参数然后引入/public/static/js/common.js即可使用。common.js会调用socket.js然后自动完成初始化。
示例:
```
<script>
var im_config = {
token: {
url:''//第一步的token请求接口地址
,type:'post'//请求方式
,dataType:'json' //请求格式类型,一般为json
}
,url_domain : ' ' //webserver地址(非80/443端口需要带着端口号) http://或https://开头
,dataType:"jsonp" //ajax请求接口(不包括上传文件和图片data获取接口及token接口)返回格式默认json 不跨域可不填 这里一般会跨域无需改动
,socketHost:'', //webSocket连接地址 即gateway地址(需要带着端口号),gateway服务器开启ssl以wss://开头,未开启以ws://开头
}
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支持以下参数:
```
//获取websocket凭证地址
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自定义第三方存储
,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: "/publice/voice/default.mp3"//声音提醒文件位置
相对于Applications/webApp
//,brief: true //是否简约模式(若开启则不显示主面板)
, title: 'WebIM' //自定义主面板最小化时的标题
//,right: '100px' //主面板相对浏览器右侧距离
//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
, initSkin: '3.jpg' //1-5 设置初始背景
//,skin: ['aaa.jpg'] //新增皮肤
,isfriend: true//是否开启好友 默认true
,isgroup: true//是否开启群组 默认true
, min: true //是否始终最小化主面板,默认false
, notice: true //是否开启桌面消息提醒,默认true
, voice: false //关闭layim自带声音
, socketHost: '' //webSocket链接地址 以ws://或wss://开头
, url_domain :''//webserver地址(非80/443端口需要带着端口号) http://或https://开头
```