零基础构建开源项目OpenIM桌面应用和pc web- Electron篇

OpenIM 为开发者提供开源即时通讯 SDK，作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM，开发者可以构建安全可靠的即时通讯应用，如 WeChat、Zoom、Slack 等。

本仓库基于开源版 OpenIM SDK 开发，提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk，分别为 Electron 版本和 Web 版本的 SDK，可以同时构建 PC Web 程序和桌面应用（Windows、macOS、Linux）。

 

 

开发环境

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

• 操作系统：Windows 10 或更高版本、macOS 10.15 或更高版本
• Node.js：版本 ≥ 16.x（手动安装 或使用 nvm 进行版本管理）
• npm：版本 ≥ 6.x（随 Node.js 一起安装）
• Git：用于代码版本控制

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

运行环境

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

浏览器/操作系统版本状态Chrome78 及以上✅WindowsWindows 10 及以上✅macOS10.15 及以上✅Linux18.04 及以上✅

说明

• Chrome：推荐使用最新版本以获得最佳体验。
• 操作系统：确保您的系统版本符合要求，以避免兼容性问题。

快速开始

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

• 拉取代码

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

• 安装依赖

npm install

• 修改配置
• .env
  如果没有修改过服务端默认端口，则只需要修改VITE_BASE_HOST为您的服务器 ip 即可，如需配置域名和 https 访问，可以参考nginx 配置，并采用最下方的配置项，并修改VITE_BASE_DOMAIN为您的域名。
• 
  VITE_BASE_HOST=your-server-ip
• VITE_WS_URL=ws://$VITE_BASE_HOST:10001
• VITE_API_URL=http://$VITE_BASE_HOST:10002
• VITE_CHAT_URL=http://$VITE_BASE_HOST:10008
• # VITE_BASE_DOMAIN=your-server-domain
• # VITE_WS_URL=wss://$VITE_BASE_DOMAIN/msg_gateway
• # VITE_API_URL=https://$VITE_BASE_DOMAIN/api
• # VITE_CHAT_URL=https://$VITE_BASE_DOMAIN/chat

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

音视频通话

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

构建

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

Web 应用程序

1. 运行以下命令来构建 Web 应用程序：npm run build
2. 构建结果将位于 dist 目录。

Electron 应用程序

1. 使用 package_electron.json 替换 package.json 文件的内容，只保留 Electron 运行所需的依赖项，这将显著减小包的大小。同时，修改打包脚本。
2. 在对应系统下运行以下命令之一来构建 Electron 应用程序：
   如果需要交叉编译，仅支持在 mac 环境下打包其他系统安装包，windows 或 linux 下仅支持打包对应系统安装包。

• macOS:
  npm run build:mac
• Windows:
  npm run build:win
• Linux:
  npm run build:linux

1. 构建结果将位于 release 目录下。

功能列表

说明

功能模块功能项状态账号功能手机号注册\邮箱注册\验证码登录✅
个人信息查看\修改✅
多语言设置✅
修改密码\忘记密码✅好友功能查找\申请\搜索\添加\删除好友✅
同意\拒绝好友申请✅
好友备注✅
是否允许添加好友✅
好友列表\好友资料实时同步✅黑名单功能限制消息✅
黑名单列表实时同步✅
添加\移出黑名单✅群组功能创建\解散群组✅
申请加群\邀请加群\退出群组\移除群成员✅
群名/群头像更改/群资料变更通知和实时同步✅
群成员邀请进群✅
群主转让✅
群主、管理员同意进群申请✅
搜索群成员✅消息功能离线消息✅
漫游消息✅
多端消息✅
历史消息✅
消息删除✅
消息清空✅
消息复制✅
单聊正在输入✅
新消息勿扰✅
清空聊天记录✅
新成员查看群聊历史消息✅
新消息提示✅
文本消息✅
图片消息✅
视频消息✅
表情消息✅
文件消息✅
语音消息✅
名片消息✅
地理位置消息✅
自定义消息✅会话功能置顶会话✅
会话已读✅
会话免打扰✅REST API认证管理✅
用户管理✅
关系链管理✅
群组管理✅
会话管理✅
消息管理✅Webhook群组回调✅
消息回调✅
推送回调✅
关系链回调✅
用户回调✅容量和性能1 万好友✅
10 万人大群✅
秒级同步✅
集群部署✅


互踢策略所有平台不互踢✅
每个平台各只能登录一个设备✅
PC 端、移动端、Pad 端、Web 端、小程序端各只能登录一个设备✅
PC 端不互踢，其他平台总计一个设备✅音视频通话一对一音视频通话✅文件类对象存储支持私有化部署 minio✅
支持 COS、OSS、Kodo、S3 公有云✅推送消息在线实时推送✅
消息离线推送，支持个推，Firebase✅

更多高级功能、音视频通话、视频会议 请联系邮箱 contact@openim.io

加入社区

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

常见问题

1. 发布 web 端时，wasm 加载太慢如何解决？
   答：针对 wasm 文件采用 gzip 压缩，压缩后会大大减小体积。同时可以做 cdn 加速，加快加载速度。
2. CKEditorError: ckeditor-duplicated-modules

答：依赖冲突，执行npm dedupe整理依赖

关于OpenIM

作为开源即时通讯（IM）领域的先驱，OpenIM 已在 GitHub 获得超过 15,000 星标，这一成就归功于全球开发者社区的广泛支持。随着数据保护和隐私安全日益受到重视，越来越多的组织选择私有部署 IM 解决方案，这与国内软件行业的快速增长相得益彰。特别是在政府和企业部门，随着信息技术的快速更新和创新应用的广泛实施，IM 系统的需求正在经历飞速增长。

同时，随着协同办公软件市场的不断扩大，“安全可控”已成为其核心要求。在人工智能生成内容（AIGC）之后的时代，IM 作为主要的人机交互界面，其在通讯、协作和安全方面的作用将更加显著。展望未来，我们相信 OpenIM 将在新的技术时代扮演更加核心的角色，为各种应用场景提供支持，增强效率和安全性，成为一个关键工具。

 

github: 仓库地址

developer: 开发文档

作为开源即时通讯（IM）领域的先驱，OpenIM 已在 GitHub 获得超过 15,000 星标，这一成就归功于全球开发者社区的广泛支持。随着数据保护和隐私安全日益受到重视，越来越多的组织选择私有部署 IM 解决方案，这与国内软件行业的快速增长相得益彰。特别是在政府和企业部门，随着信息技术的快速更新和创新应用的广泛实施，IM 系统的需求正在经历飞速增长。

同时，随着协同办公软件市场的不断扩大，“安全可控”已成为其核心要求。在人工智能生成内容（AIGC）之后的时代，IM 作为主要的人机交互界面，其在通讯、协作和安全方面的作用将更加显著。展望未来，我们相信 OpenIM 将在新的技术时代扮演更加核心的角色，为各种应用场景提供支持，增强效率和安全性，成为一个不可缺少的关键工具。

---