OpenIM H5 💬💻

本仓库基于开源版 OpenIM SDK 开发，提供了一款基于 Vue 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目引用了 @openim/wasm-client-sdk， Web 版本的 SDK，可以构建 Web 程序。

授权许可 :page_facing_up:

本仓库采用 GNU Affero 通用公共许可证第 3 版 (AGPL-3.0) 进行许可，并受以下附加条款的约束。不允许用于商业用途。详情请参阅 此处。

开发环境

在开始开发之前，请确保您的系统已安装以下软件：

• Node.js：版本 ≥ 16.x（手动安装 或使用 nvm 进行版本管理）
• npm：版本 ≥ 6.x（随 Node.js 一起安装）
• Git：用于代码版本控制

同时，您需要确保已经部署了最新版本的 OpenIM Server。接下来，您可以编译项目并连接自己的服务端进行测试。

运行环境

本应用支持以下浏览器和操作系统版本：

| 浏览器/操作系统 | 版本 | 状态 | | --------------- | ----------------- | ---- | | Chrome | 78 及以上 | ✅ |

说明

• Chrome：推荐使用最新版本以获得最佳体验。

快速开始

按照以下步骤设置本地开发环境：

1. 拉取代码

   git clone https://github.com/openimsdk/openim-h5-demo.git
   cd openim-h5-demo

2. 安装依赖

   npm install

3. 修改配置

   • config/dev.env.ts 和 config/pord.env.ts

     如果没有修改过服务端默认端口，则只需要修改BASE_HOST为您的服务器 ip 即可，如需配置域名和 https 访问，可以参考nginx 配置，并采用最下方的配置项，并修改BASE_DOMAIN为您的域名。

     const BASE_HOST = 'your-server-ip'
     const CHAT_URL = `http://${BASE_HOST}:10008`
     const API_URL = `http://${BASE_HOST}:10002`
     const WS_URL = `ws://${BASE_HOST}:10001`
     
     // const BASE_DOMAIN = 'your-server-domain'
     // const CHAT_URL = `http://${BASE_DOMAIN}/chat`
     // const API_URL = `http://${BASE_DOMAIN}/api`
     // const WS_URL = `ws://${BASE_DOMAIN}/msg_gateway`

4. 运行 npm run dev 来启动开发服务器。访问 http://localhost:3003 查看结果。默认情况下将同时启动 Electron 应用程序。

5. 开始开发测试！ 🎉

音视频通话

开源版支持一对一音视频通话，并且需要先部署并配置服务端。多人音视频通话、视频会议请联系邮箱 [email protected]

注意

• 如果要在 web 端进行音视频通话，只能在本地（localhost）进行调试，或者部署到 https 站点上后使用，这是因为浏览器的安全策略限制。

构建 🚀

该项目允许分别构建 Web 应用程序和 Electron 应用程序，但在构建过程中会有一些差异。

Web 应用程序

1. 运行以下命令来构建 Web 应用程序：

   npm run build

2. 构建结果将位于 dist 目录。

功能列表

说明

| 功能模块 | 功能项 | 状态 | | ------------------ | --------------------------------------------------------- | ---- | | 账号功能 | 手机号注册\邮箱注册\验证码登录 | ✅ | | | 个人信息查看\修改 | ✅ | | | 多语言设置 | ✅ | | | 修改密码\忘记密码 | ✅ | | 好友功能 | 查找\申请\搜索\添加\删除好友 | ✅ | | | 同意\拒绝好友申请 | ✅ | | | 好友备注 | ✅ | | | 是否允许添加好友 | ✅ | | | 好友列表\好友资料实时同步 | ✅ | | 黑名单功能 | 限制消息 | ✅ | | | 黑名单列表实时同步 | ✅ | | | 添加\移出黑名单 | ✅ | | 群组功能 | 创建\解散群组 | ✅ | | | 申请加群\邀请加群\退出群组\移除群成员 | ✅ | | | 群名/群头像更改/群资料变更通知和实时同步 | ✅ | | | 群成员邀请进群 | ✅ | | | 群主转让 | ✅ | | | 群主、管理员同意进群申请 | ✅ | | | 搜索群成员 | ✅ | | 消息功能 | 离线消息 | ✅ | | | 漫游消息 | ✅ | | | 多端消息 | ✅ | | | 历史消息 | ✅ | | | 消息删除 | ✅ | | | 消息清空 | ✅ | | | 消息复制 | ✅ | | | 单聊正在输入 | ✅ | | | 新消息勿扰 | ✅ | | | 清空聊天记录 | ✅ | | | 新成员查看群聊历史消息 | ✅ | | | 新消息提示 | ✅ | | | 文本消息 | ✅ | | | 图片消息 | ✅ | | | 视频消息 | ✅ | | | 表情消息 | ✅ | | | 文件消息 | ✅ | | | 语音消息 | ✅ | | | 名片消息 | ✅ | | | 地理位置消息 | ✅ | | | 自定义消息 | ✅ | | 会话功能 | 置顶会话 | ✅ | | | 会话已读 | ✅ | | | 会话免打扰 | ✅ | | REST API | 认证管理 | ✅ | | | 用户管理 | ✅ | | | 关系链管理 | ✅ | | | 群组管理 | ✅ | | | 会话管理 | ✅ | | | 消息管理 | ✅ | | Webhook | 群组回调 | ✅ | | | 消息回调 | ✅ | | | 推送回调 | ✅ | | | 关系链回调 | ✅ | | | 用户回调 | ✅ | | 容量和性能 | 1 万好友 | ✅ | | | 10 万人大群 | ✅ | | | 秒级同步 | ✅ | | | 集群部署 | ✅ | | | 互踢策略 | ✅ | | 在线状态 | 所有平台不互踢 | ✅ | | | 每个平台各只能登录一个设备 | ✅ | | | PC 端、移动端、Pad 端、Web 端、小程序端各只能登录一个设备 | ✅ | | | PC 端不互踢，其他平台总计一个设备 | ✅ | | 音视频通话 | 一对一音视频通话 | ✅ | | 文件类对象存储 | 支持私有化部署 minio | ✅ | | | 支持 COS、OSS、Kodo、S3 公有云 | ✅ | | 推送 | 消息在线实时推送 | ✅ | | | 消息离线推送，支持个推，Firebase | ✅ |

更多高级功能、音视频通话、视频会议 请联系邮箱 [email protected]

加入社区 :busts_in_silhouette:

• 🚀 加入我们的 Slack 社区
• :eyes: 加入我们的微信群

常见问题

1. 发布 web 端时，wasm 加载太慢如何解决？

   答：针对 wasm 文件采用 gzip 压缩，压缩后会大大减小体积。同时可以做 cdn 加速，加快加载速度。