# IM即时聊天-web

**Repository Path**: raingad/im-chat-front

## Basic Information

- **Project Name**: IM即时聊天-web
- **Description**: 基于vue2.0的即时聊天源码，可以为企业快速构建内部聊天应用、团队私密聊天。支持文本、文件、图片、语音、视频等消息格式，还支持点对点音视频聊天，支持web端、桌面端（electron-vue）和uniapp。uniapp可以打包成小程序、h5、APP。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://im.raingad.com
- **GVP Project**: No

## Statistics

- **Stars**: 1092
- **Forks**: 286
- **Created**: 2021-04-24
- **Last Updated**: 2026-09-14

## Categories & Tags

**Categories**: im

**Tags**: 即时聊天, IM, 音视频通话, PHP, WebSocket

## README

# Raingad-IM 即时聊天（前端 · 含后台管理）



> ⚠️ **本仓库已停止维护**，前端代码已迁移至后端仓库统一管理。请前往新地址获取最新代码：[https://gitee.com/raingad/im-instant-chat](https://gitee.com/raingad/im-instant-chat)

---

> 一款开源的即时通信系统，前后端配合使用，主要用于学习交流，为大家提供即时通讯的开发思路。许多功能需自行开发，初衷是快速搭建企业内部通讯、内网交流与社区交流系统。

本仓库为 **前端源码（含后台管理）**，需搭配后端服务使用。

---

## 高级版功能预告

> 功能更强大的 **高级版** 即将上线，以下重磅能力正在路上，敬请期待，**高级版目前仅面向企业用户**。想抢先体验或了解详情，欢迎[加入交流群](#交流群)联系作者，高级版于2026年9月10日上线。

| 功能 | 简介 |
| --- | --- |
| **钱包** | 内置钱包账户，支持余额管理与资金收付等场景 |
| **朋友圈** | 类微信朋友圈的动态发布、浏览与互动 |
| **投诉管理** | 后台受理并处理用户投诉，规范社区秩序 |
| **版本管理** | 客户端版本的发布、更新与升级管理 |
| **消息合并转发** | 将多条聊天记录合并为一条，一键转发至其他会话 |
| **消息定向推送** | 面向指定用户或群体精准推送消息通知 |

---

## 相关链接

| 类型 | 链接 | 备注 |
| --- | --- | --- |
| 技术分享站（官网） | https://www.shooyu.cn | 书瑜网 |
| 前端源码（含后台管理） | https://gitee.com/raingad/im-chat-front | 本仓库，仅维护后台管理 |
| 后端源码（已编译前端） | https://gitee.com/raingad/im-instant-chat | |
| Web 端演示 | http://im.raingad.com/index.html | |
| 移动端 H5 演示 | http://im.raingad.com/h5 | |
| 桌面端 / 安卓端 | 请进前端演示页下载 | 持续更新 |

---

## 体验账号

| 账号 | 密码 | 说明 |
| --- | --- | --- |
| `13800000002` | `123456` | 尾号 2、3、4 …… 18、19、20 密码均相同 |
| `13800000020` | `123456` | |

---

## 功能特性

**消息与会话**

- 支持单聊和群聊，可发送表情、图片、语音、视频和文件消息
- 单聊支持消息已读 / 未读状态显示、在线状态显示
- 支持置顶联系人、消息免打扰
- 支持新消息声音提醒、浏览器通知
- 支持文件、图片和绝大部分媒体文件在线预览

**群组管理**

- 群聊创建、删除与群成员管理
- 群公告、群禁言、@群成员
- 支持管理员撤回群成员消息、限制群成员互加好友

**音视频通话**

- 支持一对一音视频通话（已打通 Web 端和移动端，小程序不支持）

**多端与模式**

- 支持移动端（由 uniapp 开发，可打包 H5、APP 和小程序）【需付费】
- APP 支持通知栏消息推送（需开启 unipush 模块及手机通知权限，仅支持 APP 在线推送）
- 全新支持企业模式和社区模式，社区模式支持注册、添加好友功能


---

## 软件架构

| 端 | 技术栈 | 获取方式 |
| --- | --- | --- |
| 后端 | `ThinkPHP6 + Workerman + Redis` | [开源仓库](https://gitee.com/raingad/im-instant-chat) |
| 前端 | `Vue2 + Lemon-IMUI + Element-UI` | 本仓库 |
| 桌面端 | `Vue2 + Lemon-IMUI + Element-UI + Electron` | 联系作者，捐赠获取 |
| 移动端 | `uniapp for Vue3 + Pinia` | 联系作者，捐赠获取 |

---

## 快速开始

**1. 克隆代码**

```bash
git clone https://gitee.com/raingad/im-chat-front.git
```

**2. 安装依赖**

```bash
npm install
```

**3. 配置服务端域名**

修改项目根目录下的 `.env.development` 文件，将 `VUE_APP_BASE_API` 改为自己的后端域名：

```ini
VUE_APP_BASE_API = 'your-backend-domain.com'
```

> 构建后部署到服务端时，运行时会自动获取服务端域名。

**4. 本地开发调试**

```bash
npm run serve
```

默认访问地址为 `https://localhost:3001`（开发服务器已开启 HTTPS）。

**5. 打包构建**

```bash
npm run build
```

**6. 部署**

将打包生成的 `dist` 目录下的所有文件，覆盖到后端的 `public` 目录即可。

---

## 部署环境要求

**服务端环境**

| 环境 | 版本要求 | 推荐版本 | 备注 |
| --- | --- | --- | --- |
| Linux | >= 7.0 | 7.9 | 更低版本未做测试 |
| Nginx | >= 1.17 | 最新版 | |
| PHP | >= 7.1 | 7.3 | 不兼容 PHP 8 与 7.4 |
| MySQL | >= 5.7 | 5.7 | 必须 5.7 及以上 |
| Redis | >= 5.0 | 7.0 | |

**前端构建环境**

| 环境 | 版本要求 | 备注 |
| --- | --- | --- |
| Node.js | >= 14.0.0 | 更低版本未做测试 |
| npm | >= 7.0.0 | |

---

## 目录结构

```
im-chat-front
├── src
│   ├── api            # 接口请求（好友、消息、IM、后台管理等）
│   ├── assets         # 静态资源（图片、样式等）
│   ├── components     # 公共组件
│   ├── directive      # 自定义指令
│   ├── router         # 路由配置
│   ├── store          # Vuex 状态管理
│   ├── utils          # 工具函数（请求、鉴权、缓存、校验等）
│   ├── views          # 页面视图
│   │   ├── manage     # 后台管理（用户、群组、文件、消息、设置）
│   │   └── message    # 聊天主界面
│   ├── App.vue
│   ├── main.js
│   └── permission.js  # 路由权限控制
├── .env.development   # 开发环境变量
├── vue.config.js      # Vue CLI 配置
└── package.json
```

---

## 最新更新

> 完整更新记录请查看服务端仓库右侧「发行版」更新日志。

**v6.4.0**（2026 年 7 月 1 日）

1. 重构移动端 @成员功能，支持点击 @成员模块查看用户详情
2. 全新表情包上线，可快速使用最近使用过的表情
3. 服务端支持集群化部署，大幅提升并发能力
4. 服务端提供压测脚本，可自行压测
5. 桌面端新增探索功能，与移动端保持同步
6. 移动端和桌面端均支持 Web 应用开发以扩展系统功能
7. 优化文本消息复制逻辑
8. 优化移动端首页展示效果
9. 修复若干 bug

---

## 界面截图
（界面展示版本为5.2.0，请以演示截图为准）
**聊天与消息**

![聊天界面](src/assets/img/qunliao.png)

![语音视频消息卡片](src/assets/img/shipinxmsg.png)

**音视频通话**

![音视频通话](src/assets/img/webrtccall.png)

![音视频通话](src/assets/img/webrtc.png)

**好友与资料**

![新朋友](src/assets/img/newfriend.png)

![资料修改](src/assets/img/setting.png)

![资料](src/assets/img/usercard.png)

**后台管理**

![后台首页](src/assets/img/manage.png)

![后台设置](src/assets/img/managesetting.png)

![用户管理](src/assets/img/users.png)

![群聊管理](src/assets/img/groups.png)

![消息监控](src/assets/img/message.png)

![文件管理](src/assets/img/files.png)

---

## 安装服务

作者提供本系统的安装服务，包括后端和前端部署到线上，可手把手教学，保证项目完美运行。

- **费用**：200 元 / 次
- **赠送**：详细的安装教程及接口文档

如有需要，可进群联系作者。

---

## 交流群

请先认真阅读本文档，如有问题可留言；有购买移动端需求可加入交流群。

> ⚠️ 仅限**遇到问题**或**有购买移动端需求**时申请加入（长时间不活跃者将被定期清理）。加群前请先点 Star，否则不予通过。

### 企业微信交流群（推荐）

请扫描下方二维码加入企业微信交流群：

![企业微信交流群](src/assets/img/contact_me_qr.png)

### QQ 交流群（逐步取消中）

> QQ 交流群将逐步取消，请优先加入上方企业微信群。

[QQ 交流群：1031495465](https://qm.qq.com/q/RgHdvLGiMk)

---

## 免责声明

### 1. 基本声明

本软件作为开源项目提供，在法律允许的最大范围内，开发者不对软件的功能性、安全性或适用性作出任何形式的保证，无论是明示的还是暗示的。

### 2. 使用风险声明

2.1 本软件按“现状”提供，使用者需自行承担使用本软件的全部风险。
2.2 开发者不对软件的运行可靠性、适用性或与特定需求的兼容性提供任何保证。
2.3 使用者应在充分评估风险的基础上决定是否使用本软件。

### 3. 责任限制与豁免

在任何情况下，开发者及其关联方均不对因使用或无法使用本软件而导致的任何损失或损害承担责任，包括但不限于：

- 数据丢失或泄露
- 利润损失
- 系统中断
- 商业机会损失
- 其他直接、间接或衍生性损失

### 4. 用户义务与责任

4.1 使用者应确保其对本软件的使用符合所有适用的法律法规要求。
4.2 对本软件进行修改、分发或二次开发的使用者，需自行承担由此产生的全部责任，包括但不限于：

- 法律风险
- 知识产权风险
- 安全风险
- 数据保护责任

### 5. 开发者权利

5.1 开发者保留对本软件进行更新、修改、调整或停止维护的权利。
5.2 开发者可能在不事先通知的情况下修改本软件或相关服务。
5.3 开发者保留对本免责声明进行修改的权利。

### 6. 其他条款

6.1 本免责声明的任何部分被认定为无效或不可执行时，其余部分仍然有效。
6.2 本免责声明的最终解释权归开发者所有。

---

## 开源协议

本项目基于 [Apache License 2.0](./License) 开源。