零基础构建开源项目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。接下来,您可以编译项目并连接自己的服务端进行测试。

运行环境

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

浏览器/操作系统 版本 状态

Chrome 78 及以上 ✅

Windows Windows 10 及以上 ✅

macOS 10.15 及以上 ✅

Linux 18.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:// V I T E B A S E H O S T : 10001 V I T E A P I U R L = h t t p : / / VITE_BASE_HOST:10001 VITE_API_URL=http:// VITEBASEHOST:10001VITEAPIURL=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

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

开始开发测试!

音视频通话

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

构建

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

Web 应用程序

运行以下命令来构建 Web 应用程序:npm run build

构建结果将位于 dist 目录。

Electron 应用程序

使用 package_electron.json 替换 package.json 文件的内容,只保留 Electron 运行所需的依赖项,这将显著减小包的大小。同时,修改打包脚本。

在对应系统下运行以下命令之一来构建 Electron 应用程序:

如果需要交叉编译,仅支持在 mac 环境下打包其他系统安装包,windows 或 linux 下仅支持打包对应系统安装包。

macOS:

npm run build:mac

Windows:

npm run build:win

Linux:

npm run build:linux

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

功能列表

说明

功能模块 功能项 状态

账号功能 手机号注册\邮箱注册\验证码登录 ✅

个人信息查看\修改 ✅

多语言设置 ✅

修改密码\忘记密码 ✅

好友功能 查找\申请\搜索\添加\删除好友 ✅

同意\拒绝好友申请 ✅

好友备注 ✅

是否允许添加好友 ✅

好友列表\好友资料实时同步 ✅

黑名单功能 限制消息 ✅

黑名单列表实时同步 ✅

添加\移出黑名单 ✅

群组功能 创建\解散群组 ✅

申请加群\邀请加群\退出群组\移除群成员 ✅

群名/群头像更改/群资料变更通知和实时同步 ✅

群成员邀请进群 ✅

群主转让 ✅

群主、管理员同意进群申请 ✅

搜索群成员 ✅

消息功能 离线消息 ✅

漫游消息 ✅

多端消息 ✅

历史消息 ✅

消息删除 ✅

消息清空 ✅

消息复制 ✅

单聊正在输入 ✅

新消息勿扰 ✅

清空聊天记录 ✅

新成员查看群聊历史消息 ✅

新消息提示 ✅

文本消息 ✅

图片消息 ✅

视频消息 ✅

表情消息 ✅

文件消息 ✅

语音消息 ✅

名片消息 ✅

地理位置消息 ✅

自定义消息 ✅

会话功能 置顶会话 ✅

会话已读 ✅

会话免打扰 ✅

REST API 认证管理 ✅

用户管理 ✅

关系链管理 ✅

群组管理 ✅

会话管理 ✅

消息管理 ✅

Webhook 群组回调 ✅

消息回调 ✅

推送回调 ✅

关系链回调 ✅

用户回调 ✅

容量和性能 1 万好友 ✅

10 万人大群 ✅

秒级同步 ✅

集群部署 ✅

互踢策略 所有平台不互踢 ✅

每个平台各只能登录一个设备 ✅

PC 端、移动端、Pad 端、Web 端、小程序端各只能登录一个设备 ✅

PC 端不互踢,其他平台总计一个设备 ✅

音视频通话 一对一音视频通话 ✅

文件类对象存储 支持私有化部署 minio ✅

支持 COS、OSS、Kodo、S3 公有云 ✅

推送 消息在线实时推送 ✅

消息离线推送,支持个推,Firebase ✅

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

加入社区

加入我们的 Slack 社区

加入我们的微信群

常见问题

发布 web 端时,wasm 加载太慢如何解决?

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

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 将在新的技术时代扮演更加核心的角色,为各种应用场景提供支持,增强效率和安全性,成为一个不可缺少的关键工具。

相关推荐
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
猫头虎3 小时前
如何排查并解决项目启动时报错Error encountered while processing: java.io.IOException: closed 的问题
java·开发语言·jvm·spring boot·python·开源·maven
崔庆才丨静觅3 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax