##简述
本webim是基于 layim 和环信webim3.X开发而成的,本项目仅供学习使用,使用前请先到layim官网获取layim的授权许可 。目前已完成的功能有: 1.好友/群内的文字、表情、图片、文件 在线/离线消息发送和接收。 2.查看群员列表。 3.面板内快速查找。 4.面板右键自定义事件 5.修改签名 6.自定义上传背景皮肤 7.搜索好友/群 8.添加好友/群 9.新建群 10.消息盒子展示 11.查看/修改个人信息 12.实时获取好友在线状态 13.挤下线提醒 14.文件储存在七牛云 15.增删改 好友/好友分组 ##说明 1 群组管理相关功能不久就能完成了
原则上是不建议自行修改layim.js文件的,因为这样不利于后期的维护升级。
体验地址:test.guoshanchina.com
体验帐号:
用户名:911088 密码:123456
用户名:1570855 密码:123456
用户名:1570845 密码:123456
用户名:911058 密码:123456
用户名:910992 密码:123456
用户名:911067 密码:123456
用户名:911100 密码:123456
用户名:911085 密码:123456
开始之前,你要了解layui扩展第三方插件的方法,然后在环信注册帐号并创建应用。
-
layui绑定扩展
layui.config({ base: 'static/js/' }).extend({ socket: 'socket', });
-
layim,socket初始化
layui.use(['layim', 'jquery', 'socket'], function (layim, socket) { var $ = layui.jquery; var socket = layui.socket; var token = $('body').data('token'); var rykey = $('body').data('rykey'); socket.config({ user: token, pwd: rykey , layim: layim, }); layim.config({ init: { url: 'class/doAction.php?action=get_user_data', data: {} }, //获取群成员 members: { url: 'class/doAction.php?action=groupMembers', data: {} } //上传图片接口 , uploadImage: { url: 'class/doAction.php?action=uploadImage' //(返回的数据格式见下文) , type: '' //默认post } //上传文件接口 , uploadFile: { url: 'class/doAction.php?action=uploadFile' // , type: '' //默认post } //自定义皮肤 ,uploadSkin: { url: 'class/doAction.php?action=uploadSkin' , type: 'post' //默认post } ,systemSkin: {//选择系统皮肤 url: 'class/doAction.php?action=systemSkin' , type: 'post' //默认post } , isAudio: false //开启聊天工具栏音频 , isVideo: false //开启聊天工具栏视频 //扩展工具栏 // , tool: [{ // alias: 'code' // , title: '代码' // , icon: '' // }] ,title: '我的webim' ,copyright:true , initSkin: '1.jpg' //1-5 设置初始背景 , notice: true //是否开启桌面消息提醒,默认false , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可 , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址,若不开启,剔除该项即可 , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址,若不开启,剔除该项即可 }); });
-
socket.js 内容比较长就不贴出来了,需要源码的朋友可以在这里下载https://github.com/shmilylbelva/webim,当然最好是star一下,因为我会继续完善该项目的。
【注意】github 上传的代码已去除layim.js,所以下载代码后请在你获取到 layim.js授权后将 layim.js 拖进 static / layui / lay / modules / 文件夹内方可运行。