项目简介
本项目是基于 layim 和 环信 webim3.X 开发的 WebIM 即时通讯系统,仅用于学习。使用前需先到 layim 官网 获取 layim 的授权许可。
项目的主要特性和功能
- 消息交互:支持好友/群内文字、表情、图片、文件的在线/离线消息收发。
- 群组管理:可查看群员列表,支持新建群,具备群管理功能(增删管理员、修改群名片、单个群员禁言解除禁言、踢人)。
- 搜索添加:支持面板内快速查找,可搜索、添加好友/群。
- 个人信息:能查看/修改个人信息,修改签名,自定义上传背景皮肤。
- 状态提醒:实时获取好友在线状态,有挤下线提醒。
- 消息盒子:展示消息盒子。
- 好友管理:支持增删改好友/好友分组。
- 文件存储:文件储存在七牛云。
安装使用步骤
准备工作
- 了解 layui 扩展第三方插件的方法。
- 在环信注册帐号并创建应用。
配置文件修改
- 修改
static/js/webim.config.js
环信配置文件的 appkey(需先到环信注册添加应用获取)。 - 修改
class/config.php
配置文件。 - 若想在本地运行 demo 且无 layim.js 文件,可到
test.guoshanchina.com
登录后通过查看页面源码找到 layim.js 文件下载并保存到对应文件位置。
代码配置
- layui 绑定扩展
javascript layui.config({ base: 'static/js/' }).extend({ socket: 'socket', });
-
layim 和 socket 初始化 ```javascript 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' //聊天记录页面地址,若不开启,剔除该项即可 });
}); ```
运行项目
完成上述步骤后,即可运行项目。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】