零基础构建开源项目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 程序和桌面应用(Wi

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)。

v2-dce84879b203731a5d9ac7ebdf2bfe9c_1440w.jpg

开发环境
在开始开发之前,请确保您的系统已安装以下软件:

操作系统: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://$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

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

v2-2b9c31540c88f7c4039d1d125ee6be81_1440w.jpg

github: 仓库地址

developer: 开发文档

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

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

目录
相关文章
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
2734 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
3087 11
|
运维 网络安全 文件存储
找不到类似 Docker Desktop 的 Web 管理界面?试试这些开源方案
Docker Desktop 是本地容器化开发的利器,但存在无法通过 Web 远程管理、跨平台体验不一致等问题。为此,推荐几款轻量级、可 Web 化管理的 Docker 工具:Portainer 功能全面,适合企业级运维;CasaOS 集成应用商店和 NAS 功能,适合家庭/个人开发环境;Websoft9 提供预集成环境,新手友好。这些工具能有效提升容器管理效率,满足不同场景需求。
1359 3
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1283 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
1365 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
2091 18
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
1349 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
1308 0
|
JavaScript API
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
2087 3