根据盒子IM搭建自己的类似微信的即时通信前后端实践

  • 时间:2025-11-30 22:17 作者: 来源: 阅读:2
  • 扫一扫,手机访问
摘要:1. 盒子IM是一个仿微信实现的网页版聊天软件,不依赖任何第三方收费组件。2. 支持私聊、群聊、离线消息、发送语音、图片、文件、已读未读、群@等功能3. 支持单人、多人音视频通话(基于原生webrtc实现,需要ssl证书)4. uniapp端兼容app、h5、微信小程序,可与web端同时在线,并保持消息同步5. 后端采用springboot+netty实现,网页端使用vue,移动端使用uniapp

1. 盒子IM是一个仿微信实现的网页版聊天软件,不依赖任何第三方收费组件。

2. 支持私聊、群聊、离线消息、发送语音、图片、文件、已读未读、群@等功能

3. 支持单人、多人音视频通话(基于原生webrtc实现,需要ssl证书)

4. uniapp端兼容app、h5、微信小程序,可与web端同时在线,并保持消息同步

5. 后端采用springboot+netty实现,网页端使用vue,移动端使用uniapp

6. 服务器支持集群化部署,每个im-server仅处理自身连接用户的消息

详细文档:
https://www.yuque.com/u1475064/mufu2a


1、下载前后端源码
:https://gitee.com/bluexsx/box-im


根据盒子IM搭建自己的类似微信的即时通信前后端实践


2、部署后端代码

本地启动:

  • 安装node:v18.19.0
  • 安装jdk:17
  • 安装maven:3.9.6
  • 安装mysql:8.0,账号密码分别为root/root,创建名为im_platform的数据库,运行db/im_platfrom.sql脚本
  • 安装redis:6.2
  • 安装minio:RELEASE.2024-xx,使用默认账号、密码、端口
  • 2.启动后端服务
mvn clean package
java -jar ./im-platform/target/im-platform.jar
java -jar ./im-server/target/im-server.jar

启动前端web

cd im-web
npm install
npm run serve

访问 http://localhost:8080

4.启动uniapp-h5 将im-uniapp目录导入HBuilderX,点击菜单"运行"->"开发环境-h5" 访问 http://localhost:5173

接入消息推送

盒子IM对消息推送模块进行了剥离和封装, 如果您不关心盒子IM的业务功能,只需要一个可以将消息推送至前端的服务,则只需要启动im-server即可 然后参考以下文档进行接入:
https://www.yuque.com/u1475064/mufu2a/vn5u10ephxh9sau8

消息界面:

根据盒子IM搭建自己的类似微信的即时通信前后端实践

好友界面:

根据盒子IM搭建自己的类似微信的即时通信前后端实践

我的界面:

根据盒子IM搭建自己的类似微信的即时通信前后端实践


4、修改BUG

运行后发现该源码存在的问题:就是在uniapp前端在android手机运行后没有消息 提醒功能,然后我对前后端代码进行了修改,加入了unipush2.0推送功能;

后端代码:

添加PushConfig.java


根据盒子IM搭建自己的类似微信的即时通信前后端实践


添加PushService.java:


根据盒子IM搭建自己的类似微信的即时通信前后端实践

前端代码:

创建uniCloud云开发环境:我用的是阿里云,上传云函数。


根据盒子IM搭建自己的类似微信的即时通信前后端实践

创建unipush.js文件 :


根据盒子IM搭建自己的类似微信的即时通信前后端实践

在APP.vue文件中引入unipush.js


根据盒子IM搭建自己的类似微信的即时通信前后端实践

然后启动项目,就可以收到发送消息的提醒了,但是还有一个问题,当APp退出后可能依旧无法收到推送消息 ,我查阅了许多资料,最佳的解决方案是在unipush2.0中开通各个手机厂商通道解决这个问题,我花费了大量的精力配置了华为厂商通道,可是依旧无法实现系统级的推送服务,后来我借助了uniapp的前台服务解决了这个问题,这需要在uniapp引入一个原生插件:安卓保活(收费),成功实现app在后台运行,能稳定地收到推送消息。


根据盒子IM搭建自己的类似微信的即时通信前后端实践


根据盒子IM搭建自己的类似微信的即时通信前后端实践

  • 全部评论(0)
手机二维码手机访问领取大礼包
返回顶部