⭐ Gitee 潜力项目 | 前后端分离 | 生产就绪 | 真实企业级架构

你是否曾想亲手实现一个类似微信的即时通讯系统？
你是否厌倦了各种半吊子的聊天Demo，渴望一套真正能上线的完整解决方案？
今天，它来了！

WebChat —— 一款功能完整、代码规范、生产就绪的IM前后端项目，前端Vue3 + 后端SpringBoot，覆盖单聊、群聊、语音、图片、文件、朋友圈、好友管理、在线状态、操作日志……你所想到的IM功能，这里全都有！

无论你是求职需要项目亮点的应届生，还是准备接私活的自由开发者，或是团队急需快速搭建IM底座的技术Leader，这篇万字长文都将带你吃透WebChat的每一处设计。文末直接附源码获取方式，白嫖党的春天来了！🔥

---

📑 目录

1. 项目背景：为什么你需要一个自己的IM系统？
2. 效果先行：看完这几张图你就知道多炸裂
3. 技术栈全解析：前后端都用了什么神仙框架？
4. 系统架构：高并发IM背后的设计哲学
5. 核心功能实现亮点（硬核干货）
   • 5.1 WebSocket + STOMP 实时消息推送
   • 5.2 原生 MediaRecorder 语音录制（“按住说话”）
   • 5.3 JWT + Redis 单点登录互踢 + 限流防爆破
   • 5.4 朋友圈动态发布与互动（类微信社交闭环）
   • 5.5 会话列表排序、未读数管理与消息撤回
   • 5.6 AOP 注解驱动：登录校验、操作日志、消息推送
6. 数据库设计：MySQL百万级消息表优化思路
7. 项目特色（为什么要吹爆它）
8. 后续规划：WebRTC音视频通话已在路上
9. 快速上手：三步跑起来
10. 源码获取 + 交流群

---

一、项目背景：为什么你需要一个自己的IM系统？

即时通讯已渗透到生活的每个角落：社交、电商、在线教育、远程办公……然而市面上开源的IM项目要么功能残缺（只会发文本），要么技术老旧（jQuery + PHP），要么前后端割裂（无从下手）。

WebChat 的出现就是为了填这个坑。

• 前端：Vue 3 + Vite + Element Plus + WebSocket，现代前端最佳实践。
• 后端：Spring Boot 2.6 + MyBatis-Plus + Redis + JWT，企业级架构。
• 功能闭环：从注册登录、好友申请、单聊群聊、文件语音，到朋友圈、操作日志、在线状态……真实复刻95%的微信基础体验。

无论你是想学习Vue3 Composition API + WebSocket 实战，还是研究SpringBoot 注解驱动 + Redis 高可用设计，这套代码都值得反复阅读。

---

二、效果先行：看完这几张图你就知道多炸裂

2.1 登录页 & 注册页

登录页支持用户名/密码输入，集成 JWT Token 认证机制，并提供“记住密码”功能（加密存储至本地）。
注册页包含昵称、用户名、密码、确认密码等字段，前端实时校验格式（如用户名唯一性、密码强度等），提交后调用后端 RESTful API 完成用户创建。

两大核心亮点

• 安全与体验兼顾：密码传输前 BCrypt 加密，登录失败超过5次触发限流（Redis临时锁定IP 15分钟），防止暴力破解。
• 状态智能保持：登录成功后 Token 自动存入 localStorage，刷新页面无需重新登录；点击“退出”则清除本地状态并跳回登录页。
  
  JWT Token + 记住密码 + 优雅的表单校验

2.2 主界面 – 三栏微信风格布局

左侧导航栏（TabBar） 包含“消息”、“联系人”、“朋友圈”、“个人中心”四个核心模块，高亮当前选中项，切换时右侧内容随之变化。
中间列表区（LeftList） 根据当前导航展示不同内容：消息模块显示会话列表（带未读数、最后消息时间戳）；联系人模块按好友分组展示好友与群组，支持折叠/展开。
右侧内容区（RightWindow） 展示聊天窗口或详情页，聊天窗口顶部为会话信息，中间为气泡式消息流（本人消息靠右绿色，对方靠左灰色），底部为工具栏（表情、图片、文件、语音录制）及输入框。

三大交互亮点：

• 实时未读角标：会话列表自动累计未读消息，红色数字清晰醒目。
• 消息自动滚动：新消息到达时平滑滚动至底部，向上浏览历史时不会强制跳动。
• 响应式适配：窗口宽度小于768px时，列表区与聊天区自动切换为全屏抽屉模式，适配手机端操作。
  
  整个界面色彩柔和、布局紧凑。

2.3 语音录制（“按住说话”）

基于浏览器原生 MediaRecorder API 实现，无需引入任何第三方录音库，即实现“按住说话、上滑取消”的类微信体验。用户长按“按住说话”按钮时，首先请求麦克风权限（首次会弹出授权提示），获得授权后开始录制音频（WebM 格式），界面同时显示录音时长倒计时（最长 60 秒）。若手指上滑超过阈值，松开后自动取消录制；若正常松开，则自动将音频上传至后端并构造语音消息通过 WebSocket 实时发送给对方。

三大技术亮点：

• 原生高性能：直接调用浏览器底层音频接口，无额外开销，录制清晰流畅。
• 交互友好：实时显示波形动画和计时，上滑区域高亮提示取消，用户体验细腻。
• 自动压缩上传：录制完成的 Blob 数据转为 FormData 异步上传，成功后返回音频 URL 并推送消息。
  
  MediaRecorder 原生录制，60秒倒计时，上滑取消，松手发送

2.4 朋友圈模块（社交属性拉满）

朋友圈模块为用户提供了发布图文/视频动态、点赞、评论等完整的社交互动体验。点击左侧导航栏“朋友圈”图标后，中间列表区以时间轴形式展示所有好友发布的动态卡片（按时间倒序排列），每条动态包含发布者头像/昵称、发布时间、正文内容、图片九宫格（或视频封面）、点赞列表及评论列表。顶部提供“发布”按钮，点击后弹出基于 @form-create/element-ui 动态表单构建的发布窗口，支持输入文本、上传最多 9 张图片或 1 个视频，并可选择地理位置。

三大交互亮点：

• 即时互动反馈：点击❤️点赞图标，状态实时切换（高亮红色/灰色），并通过 WebSocket 通知动态作者；评论支持嵌套回复（@某人），评论列表即时刷新。
• 流畅的浏览体验：动态列表支持下拉加载更多（Intersection Observer 实现滚动触底），图片网格采用 CSS Grid 自适应布局（最多 3 列）。
• 智能缓存：Vuex 管理动态数据，vuex-persistedstate 缓存最近 50 条动态，减少网络请求，降低服务器压力。
  

2.5 消息类型一览

支持 文本、图片、文件、语音、视频、系统消息 六种主流消息类型，每种消息在气泡内都有专属的渲染样式和交互方式。

• 文本消息：普通文本展示，支持换行和 Emoji 表情，长按可复制。
• 图片消息：显示压缩后的缩略图，点击后全屏预览并支持手势缩放；多图自动排列。
• 文件消息：展示文件图标、文件名及大小，点击直接触发浏览器下载。
• 语音消息：展示音频波形条和时长，点击即可播放（支持暂停/续播），未读时显示小红点。
• 视频消息：展示视频封面图，点击调起播放器全屏播放。
• 系统消息：居中灰色文字（如“对方撤回了一条消息”、“你已成为群成员”），仅提示不参与交互。

以上只是冰山一角，更多细节等你运行项目后亲自挖掘。

---

三、技术栈全解析：前后端都用了什么神仙框架？

前端（Vue3 军火库）

类别	技术	版本	作用
核心	Vue 3 + Vite	3.5.13 / 6.1.0	组合式API，极速热更新
UI	Element Plus + 图标库	2.11.8	桌面级组件库
动态表单	@form-create/element-ui	2.6.3	朋友圈发布引擎
状态管理	Vuex 4 + persistedstate	4.1.0	localStorage 持久化
网络	Axios + SockJS + Stomp.js	1.15.0	HTTP + WebSocket
工具	dayjs	1.11.20	人性化时间格式化
多媒体	MediaRecorder API	原生	录音无依赖

后端（SpringBoot 全家桶）

类别	技术	版本	作用
核心	Spring Boot	2.6.13	Web, WebSocket, Data, Cache, AOP
ORM	MyBatis-Plus	3.5.5	简化CRUD，逻辑删除，分页
安全	JWT (jjwt) + BCrypt	0.12.x	无状态认证，密码加密
缓存	Redis + Lettuce	-	Token缓存，在线状态，限流
消息	WebSocket + STOMP	-	实时双向通信
日志	AOP + 异步记录	-	操作日志自动入库
构建	Maven	3.6+	依赖管理

前后端分离，RESTful API + WebSocket 双通道，完美适配分布式部署。

---

四、系统架构：高并发IM背后的设计哲学

4.1 分层架构图

• 前端层：采用 Vue3 技术栈构建前端应用，作为整个系统的入口，直接对外发起业务请求。
• 网关层：部署 Nginx 服务，承接 Vue3 前端的所有请求，同时承担反向代理与负载均衡核心能力，将请求合理分发至后端服务集群，实现流量统一管控。
• 应用服务层：搭建 Spring Boot 后端服务集群，服务设计为无状态架构，支持快速水平扩容，保障系统高并发、高可用能力。
• 数据持久层：数据库采用 MySQL 主从架构，实现数据读写分离、数据备份与故障容错；
  缓存中间件使用 Redis，通过哨兵模式或集群模式部署，提升缓存高可用，用于热点数据缓存、接口提速、分布式会话等场景。
  

4.2 关键流程

• HTTP请求：Axios → 网关 → Controller → Service → Mapper → DB
• WebSocket：握手拦截器（Token认证） → STOMP订阅 → 异步推送
• AOP切面：@RequireLogin 统一鉴权；@OperationLog 自动记日志；@PushMessage 推送消息；@PushFriendRequest 推送好友请求

4.3 WebSocket 连接时序

• 前端发起连接：前端在用户登录成功后，从本地存储获取 JWT Token，通过 SockJS 客户端向服务端 WebSocket 端点发起连接请求，并将 Token 作为查询参数附加在 URL 中（例如 /api/ws?token=xxx），用于服务端鉴权。
• 后端握手认证：后端的 WebSocket 握手拦截器（HandshakeInterceptor）提取 URL 中的 Token，校验其合法性与有效期。若验证通过，则将用户标识（如 userId）存入 WebSocket 会话的 Principal 中，并返回握手成功响应。
• 订阅个人消息队列：前端收到握手成功信号后，通过 STOMP 协议向服务端订阅专属队列 /user/queue/msg。该队列是点对点通道，服务端会将发给当前用户的消息路由至此。
• 实时消息推送：当有其他用户向当前用户发送消息（或系统产生通知）时，后端使用 SimpMessagingTemplate 将消息异步推送到 /user/queue/msg。前端通过之前建立的订阅连接实时接收消息，解析后更新界面（会话列表、聊天记录、未读角标等）。
  

---

五、核心功能实现亮点（硬核干货）

5.1 WebSocket + STOMP 实时消息推送 🔌

📌 痛点：传统HTTP轮询为何不适合IM？

在即时通讯场景中，消息的时效性至关重要。如果采用传统的 HTTP 短轮询（每隔几秒请求一次“是否有新消息”），会带来三个严重问题：

1. 资源浪费：即使没有新消息，客户端也要不断发起请求，占用服务器线程、网络带宽和数据库连接。
2. 高延迟：轮询间隔无法做到太短（通常设为2~5秒），消息到达后用户最多需要等待一个轮询周期才能看到，体验差。
3. 服务器压力：当在线用户数达到成千上万时，每秒会产生海量无效请求，容易引发“惊群效应”或数据库缓存击穿。

另一种方案是 HTTP 长轮询（Long Polling），虽然能减少请求次数，但本质上仍是“半双工”——服务器需挂起连接直到有新消息或超时，对连接数和代理服务器不友好。

---

🚀 方案：WebSocket + STOMP 子协议

WebSocket 是 HTML5 提供的全双工通信协议，它建立在 TCP 之上，一旦连接建立，客户端和服务器可以随时互相发送数据，没有 HTTP 的请求-响应限制。但原生 WebSocket 只支持文本或二进制数据的收发，缺乏消息路由、订阅/发布、消息类型等高层语义。

为此，我们引入 STOMP（Simple Text Oriented Messaging Protocol）——一个简单的文本导向消息协议。它类似于 HTTP 的命令/响应风格，定义了以下关键动作：

• CONNECT / DISCONNECT：建立/断开连接
• SEND：发送消息到某个目的地（destination）
• SUBSCRIBE / UNSUBSCRIBE：订阅/取消订阅某个目的地
• MESSAGE：服务器推送的消息帧

STOMP 的优势：

• 无需自定义消息格式，前后端统一遵循 STOMP 帧结构。
• 后端可以像操作消息队列一样，通过 @MessageMapping 注解处理 SEND 请求，用 SimpMessagingTemplate 广播或点对点推送。
• 支持用户队列（/user/queue/msg），自动将消息路由到指定用户的唯一会话。

5.2 原生 MediaRecorder 语音录制 🎙️

无第三方依赖，纯浏览器API实现“按住说话”：

1. 请求麦克风权限 getUserMedia
2. MediaRecorder 录制音频（WebM格式）
3. 实时计时（最长60秒） + 上滑取消（监听touchmove计算位移）
4. 松手后自动上传到后端，返回URL
5. 构造语音消息体通过WebSocket发送

移动端适配：增大热区（44px），禁用页面缩放，触摸反馈细腻。

5.3 JWT + Redis 单点登录互踢 + 限流 🔐

安全设计：

• 登录：账号密码 → BCrypt校验 → 生成JWT → 存储到Redis（key: token:userid）
• 互踢：新登录时删除旧Token，旧设备下次请求返回401强制下线
• 限流：同一IP连续失败5次，锁定15分钟（Redis计数）
• Token校验：拦截器从Header提取Token，校验Redis中存在且未过期

5.4 朋友圈动态发布与互动（社交属性闭环）📱

WebChat不仅是一个聊天工具，更是一个微型社交平台。

发布动态：

• 点击“朋友圈” → 顶部发布按钮 → 动态表单（文本+最多9张图片/1个视频+地理位置）
• 基于 @form-create/element-ui 动态渲染，支持后续扩展字段
• 提交后调用后端上传多媒体资源，异步推送给所有好友

动态展示与交互：

• 时间线卡片：头像/昵称/发布时间/正文/九宫格图片/视频封面
• 点赞：❤️ 图标实时切换，高亮红色，WebSocket通知作者
• 评论：支持嵌套回复（@某人），评论列表即时刷新
• 数据缓存：Vuex管理动态列表，vuex-persistedstate 缓存最近50条

技术难点：图片网格CSS Grid自适应 + 滚动加载（Intersection Observer）+ 评论输入框失焦自动收起。

5.5 会话列表排序、未读数管理与消息撤回

• 排序：置顶优先 → 按最后消息时间倒序
• 未读数：后端维护每个会话的 unread_count，前端收到消息且不是当前会话时+1
• 消息撤回：软标记 is_recalled=1，前端展示“对方撤回了一条消息”
• 语义化预览：图片消息显示“[图片]”，文件显示“[文件]”，语音显示“[语音]”

5.6 AOP 注解驱动：开发效率飙升 🚀

三个自定义注解：

@RequireLogin          // 方法级别登录校验
@OperationLog         // 自动记录操作日志到数据库
@PushMessage          // 方法执行后自动推送WebSocket消息

效果：业务代码只关注核心逻辑，横切关注点完全解耦。

---

六、数据库设计：MySQL百万级消息表优化思路

核心表结构预览：

表名	说明	数据量预估	索引策略
user	用户表	10w	主键id，uk(username)
friend	好友关系	50w	联合索引(user_id, friend_id)
message	消息表	1000w+	复合索引(session_id, send_time) + 按月分表(后续)
user_session	会话表	50w	索引(user_id, session_id)
sys_operation_log	操作日志	1000w+	异步写入，按季度归档

完整建表语句在项目中 docs/schema.sql，支持一键导入。

分页优化：message 表查询采用 id > lastId limit 20 的游标方式，避免传统 offset 性能问题。

---

七、项目特色（为什么要吹爆它）

✨ 完整IM闭环：单聊 + 群聊 + 好友管理 + 群管理 + 朋友圈 + 在线状态 + 操作日志
✨ 企业级安全：BCrypt + JWT + Redis互踢 + 登录限流 + CORS配置
✨ 高性能：WebSocket异步推送 + Redis缓存 + MyBatis-Plus分页优化
✨ 高可维护：AOP解耦 + 注解驱动 + 统一异常处理 + 分层清晰
✨ 生产就绪：操作日志全记录、Docker部署脚本、Nginx配置示例
✨ 精致UI：微信风格 + 响应式（手机/PC自适应）+ 丝滑动效

独有的加分项：

• 原生语音录制（不引入第三方SDK）
• 朋友圈社交模块（超越普通聊天项目）
• 前端30+组件化，后端模块化，可直接二次开发接私活

---

八、快速上手：三步跑起来

前端启动

git clone https://gitee.com/walii/webchat-front.git
cd webchat-front
npm install
# 修改 src/api/request.js 里的后端地址
npm run dev   # 访问 http://localhost:8002

后端启动

git clone https://gitee.com/walii/webchat.git
cd webchat
# 导入 docs/schema.sql 到 MySQL
# 修改 application-dev.yml 中的数据库和Redis配置
mvn clean package
java -jar target/webchat-1.0.0.jar --spring.profiles.active=dev

依赖环境

• MySQL 8.0+ / Redis 6.0+ / JDK 1.8+ / Node.js 18+

更详细的部署文档（包括Docker、Nginx配置）见项目内的 README。

---

九、 项目体验

想亲自体验 WebChat 的强大功能？无需部署，点击下方链接即可在线试用！

👉 在线体验地址：http://112.124.63.30:8002

📝 体验账号

角色	账号	密码
测试用户1	zhangsan	123456a
测试用户2	lisi	123456a

你也可以注册新账号，与其他在线用户实时聊天。

✨ 功能亮点一览

• 即时通讯：文本、图片、文件、语音、视频消息，毫秒级送达
• 语音录制：长按“按住说话”，松手发送，60秒长录音
• 朋友圈：发布图文/视频动态，点赞、评论互动
• 好友管理：搜索好友、发送申请、分组管理
• 群组聊天：创建群聊、邀请成员、群公告
• 会话列表：未读角标、置顶、最后消息预览
• 响应式布局：PC / 手机自适应，微信风格界面

⚠️ 注意事项

• 演示环境仅供功能体验，数据可能会定期清理（如每周重置）
• 请勿上传敏感或违法内容，所有操作均有日志记录
• 如遇连接超时或服务异常，请稍后重试或提交 Issue

💬 反馈与建议

如果您在使用过程中发现任何 Bug，或者有好的改进想法，欢迎前往 Gitee Issues 提交（请替换为真实仓库地址）。您的反馈是我们进步的动力！

点击链接即刻尝鲜，感受即时通讯的魅力！🚀

十、源码获取

由于项目仍在持续迭代，源码暂托管在私有仓库。关注我的CSDN并私信回复“WebChat”，我会24小时内发送下载链接（包括前端+后端+数据库脚本+Postman测试集合）。

如果这篇博客对你有帮助，请务必：
👍 点赞 | 📝 评论 | 🔄 转发 | ⭐️ 收藏

---

版权声明：本文为博主原创，遵循 MIT 协议，可随意转载但请保留出处。项目中部分图标资源来自网络，仅用于学习交流。