前言

https://gitee.com/bluexsx/box-im

1. 项目简介

盒子IM是一个旨在提供类似微信体验的聊天工具,支持私聊、群聊、音视频通话等核心功能。该项目采用MIT开源协议,允许用户自由使用、修改和分发,非常适合用于学习即时通讯技术或作为企业内部沟通工具的基础框架。

2. 核心特色功能

该项目不仅模仿了微信的界面风格,还实现了多种实用的沟通方式:

  • 多端支持:支持 Web 端(Vue)和移动端(UniApp),覆盖 PC 和手机用户。
  • 多媒体消息:支持发送图片、文件、语音、Emoji表情,并支持视频聊天
  • 消息管理:具备离线消息推送功能,确保用户上线后能收到错过的消息。
  • 群组功能:支持创建群聊,并具备群聊相关的管理功能。

3. 技术实现特点

该项目的技术栈选型注重高性能跨平台,具体架构如下:

层级 技术栈 说明
后端 SpringBoot + Netty 使用 SpringBoot 处理业务逻辑和 API,利用 Netty 这一高性能网络框架处理底层长连接通信,保证消息的实时性和高并发能力。
前端 Vue.js (Web端) 构建响应式的 Web 界面,提供流畅的用户交互体验。
移动端 UniApp 基于 Vue 语法,一套代码可编译到 iOS、Android、H5 等多个平台,实现跨端开发。
数据库 MySQL 存储用户信息、聊天记录等结构化数据。
缓存 Redis 用于缓存用户会话、热点数据,提升系统响应速度。

总结:盒子IM是一个技术栈成熟、功能完整的开源 IM 项目,其SpringBoot + Netty的后端组合确保了服务的高性能,Vue + UniApp的前端组合则实现了多端覆盖,非常适合开发者进行二次开发或技术学习。

前端部分

技术栈

  • Vue 2.7.16 + Vue Router 3.6
  • Pinia 2.1(状态管理)
  • Element UI 2.15(UI 组件库)
  • WebSocket(实时通信)
  • WebRTC(音视频通话)
  • Axios(HTTP 请求)
  • LocalForage(本地存储)

核心功能模块

  1. 聊天功能 (src/components/chat/)

    • 私聊和群聊消息
    • 消息历史记录
    • @提醒功能
    • 已读/未读状态
    • 表情包支持
  2. 好友管理 (src/components/friend/)

    • 添加好友
    • 好友列表
  3. 群组管理 (src/components/group/)

    • 创建群组
    • 群成员管理
    • 群成员选择器
  4. 音视频通话 (src/components/rtc/)

    • 私聊视频通话
    • 群组视频会议
  5. 用户系统

    • 登录/注册
    • 用户信息管理
    • 设置功能

项目特点

  • 支持多环境配置(development/test/production)
  • 支持 iframe 集成方案
  • 支持 hash 路由模式
  • 代码分割优化(vendor、element-ui 单独打包)
  • 完善的 API 代理配置

启动命令

npm install              # 安装依赖
npm run serve           # 开发环境
npm run serve:test      # 测试环境
npm run serve:prod      # 生产环境
npm run build:prod      # 生产构建
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐