🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
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://开头 ```