littlebot
Published on 2025-04-02 / 1 Visits
0

【源码】基于 layim 和环信 webim3.X 的 WebIM 即时通讯系统

项目简介

本项目是基于 layim环信 webim3.X 开发的 WebIM 即时通讯系统,仅用于学习。使用前需先到 layim 官网 获取 layim 的授权许可。

项目的主要特性和功能

  1. 消息交互:支持好友/群内文字、表情、图片、文件的在线/离线消息收发。
  2. 群组管理:可查看群员列表,支持新建群,具备群管理功能(增删管理员、修改群名片、单个群员禁言解除禁言、踢人)。
  3. 搜索添加:支持面板内快速查找,可搜索、添加好友/群。
  4. 个人信息:能查看/修改个人信息,修改签名,自定义上传背景皮肤。
  5. 状态提醒:实时获取好友在线状态,有挤下线提醒。
  6. 消息盒子:展示消息盒子。
  7. 好友管理:支持增删改好友/好友分组。
  8. 文件存储:文件储存在七牛云。

安装使用步骤

准备工作

  1. 了解 layui 扩展第三方插件的方法。
  2. 在环信注册帐号并创建应用。

配置文件修改

  1. 修改 static/js/webim.config.js 环信配置文件的 appkey(需先到环信注册添加应用获取)。
  2. 修改 class/config.php 配置文件。
  3. 若想在本地运行 demo 且无 layim.js 文件,可到 test.guoshanchina.com 登录后通过查看页面源码找到 layim.js 文件下载并保存到对应文件位置。

代码配置

  1. layui 绑定扩展 javascript layui.config({ base: 'static/js/' }).extend({ socket: 'socket', });
  2. 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】