springboot+vue3+mysql+websocket实现的即时通讯软件

项目演示

即时通讯软件项目演示

业务架构

技术栈

• 后端
  • 选用编程语言 Java
  • web框架SpringBoot
  • db MySQL 持久存储
  • nosql 缓存 Redis
  • 全双工通信框架 WebSocket
• 前端
  • 前端框架Vue3
  • Typescript
  • UI样式 Css、ElementPlus
  • 网页路由 vue-router
  • 全双工通信框架Websocket

功能完成情况

已实现功能

• 用户登录
• 用户注册
• 加好友
• 删除好友
• 拉黑好友
• 好友搜索与列表
• 发起群聊
• 消息单聊
• 群聊
• 群成员列表模块
• 用户信息查看

未实现功能

• 聊天消息模块
  • 消息提醒
  • 群公告
  • 群成员权限管理
  • 视频/图片/文件消息发送
  • 语音通话
  • 视频通话
• 好友与通讯录模块
  • 星标联系人
  • 群邀请与分享
• 全局搜索模块
• 智能机器人模块
• 直播模块
• 额外功能

功能概述与演示

注册

接口介绍

|--------------------|------|---------------------------------------------------------------|----------------------------------|
| 接口 | 请求类型 | 入参 | 出参 |
| /api/register/user | POST | { "phone": "13333331333", "password": "3", "userName": "用户" } | { "success": true, "code": 200 } |

功能演示

用户注册功能演示

密码登录

接口介绍

|-----------------|------|---------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 接口 | 请求类型 | 入参 | 出参（注意这里的密码和用户id尽量不返回也可以加密处理） |
| /api/user/login | POST | { "phone": "13333331333", "password": "3" } | { "success": true, "data": { "user": { "id": 1067, "phone": "13333331333", "password": "2a10$23XaLqWQcdGHduNBMoA2iuHyLO4VPgjYpZgFE5aQ8YMhPLgYVN2S6", "userName": "用户", "avatar": "https://picsum.photos/60", "createTime": "2025-04-20T20:13:01", "updateTime": "2025-04-20T20:13:01" }, "token": "641ca53c42604b3dbbb7792c6484a767" }, "code": 200 } |

功能演示

用户密码登录

发送验证码

接口介绍

|----------------------------------|------|-------------------|---------------------------------------------------------------------------|
| 接口 | 请求类型 | 入参（Query Param） | 出参（注意这里的密码和用户id尽量不返回也可以加密处理） |
| /api/user/code?phone=13333331333 | POST | phone=13333331333 | { "success": true, "data": { "code": "346413"//验证码有效期5分钟 }, "code": 200 } |

验证码登录

接口介绍

|----------------------|------|---------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 接口 | 请求类型 | 入参 | 出参（注意这里的密码和用户id尽量不返回也可以加密处理） |
| /api/user/login/code | POST | { "phone": "13333331333", "password": "3" } | { "success": true, "data": { "user": { "id": 1067, "phone": "13333331333", "password": "2a10$23XaLqWQcdGHduNBMoA2iuHyLO4VPgjYpZgFE5aQ8YMhPLgYVN2S6", "userName": "用户", "avatar": "https://picsum.photos/60", "createTime": "2025-04-20T20:13:01", "updateTime": "2025-04-20T20:13:01" }, "token": "641ca53c42604b3dbbb7792c6484a767" }, "code": 200 } |

功能演示

用户验证码登录

加好友

接口介绍

|---------------------------|------|------------------------------------------|----------------------------------|
| 接口 | 请求类型 | 入参 | 出参 |
| /api/friends/friend-apply | POST | { "applyUserId": 1055, "reason": "加好友" } | { "success": true, "code": 200 } |

功能演示

加好友请求

单聊

接口介绍

|----------------|------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------|
| 接口 | 请求类型 | 入参 | 出参 |
| /api/chat/send | POST | { "id": "", "sendUser": 1055, "receiveUser": 1065, "message": "😊", "notRead": "0", "chatType": "private", "groupId": "4a6b8ef8-0dd0-4089-81b4-07e30c6dff3d", "createTime": "", "updateTime": "", "content": "😊" } | { "success": true, "code": 200 } |

功能演示

单聊

群聊

接口介绍

|----------------|------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------|
| 接口 | 请求类型 | 入参 | 出参 |
| /api/chat/send | POST | { "id": "", "sendUser": 1055, "receiveUser": 1065, "message": "😊", "notRead": "0", "chatType": "group", "groupId": "4a6b8ef8-0dd0-4089-81b4-07e30c6dff3d", "createTime": "", "updateTime": "", "content": "😊" } | { "success": true, "code": 200 } |

功能演示

群聊

群设置

接口介绍

|------------------------------------------------------------------------|------|----------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 接口 | 请求类型 | 入参（Query Param） | 出参 |
| /api/group/getGroupMember?groupId=4a6b8ef8-0dd0-4089-81b4-07e30c6dff3d | GET | groupId=4a6b8ef8-0dd0-4089-81b4-07e30c6dff3d | { "success": true, "data": [ { "id": 1065, "phone": "13313090333", "password": "2a10GwEKhLeiZWhGJs8xdWaVnex28cxuVIHkHpQLa6/yVXCZbGUaSh12C", "userName": "测试用户注册", "avatar": "https://picsum.photos/69", "createTime": "2025-04-20T16:18:02", "updateTime": "2025-04-20T17:35:21" }, { "id": 1055, "phone": "13689663339", "password": "2a10rFPIQuKW1c7ndozOQM5EkO9JIGd4DJrlQtdZpi9cNv7DGg2..EDGK", "userName": "测试用户t", "avatar": "https://picsum.photos/61", "createTime": "2025-02-04T16:07:03", "updateTime": "2025-04-14T13:52:19" }, { "id": 1063, "phone": "13389663331", "password": "2a10$2FHzcu9DCVh.Zvx9cRR4WuKJm/xNC6uyR9BCivcT0bxmwv4ye/4VW", "userName": "测试用户e", "avatar": "https://picsum.photos/66", "createTime": "2025-04-20T15:37:22", "updateTime": "2025-04-20T17:35:21" } ], "code": 200 } |

功能演示

群设置

单聊好友设置

接口介绍

|------------------------------------|------|-----------------|------------------------------------------------|
| 接口 | 请求类型 | 入参（Query Param） | 出参 |
| /api/group/getGroupMember?groupId= | GET | groupId= | { "success": true, "data": [], "code": 200 } |

功能演示

单聊好友设置

后续功能开发

后续会持续完成未完成的功能

会考虑如下3个方向持续完善

• 功能持续强化和优化，如消息已未读状态、智能机器人消息、视频通话、文件消息、语音消息、全局搜索、直播、群邀请与分享
• 微服务拆分，当前的架构为单体服务架构，后续会拆分成微服务，springcloud实现
• 当前的项目为Java开发完成的，会考虑用go语言再实现一次

项目地址与部署 kChat_web

项目前端地址： https://github.com/enjoykanyu/kChat_web/

项目后端地址：https://github.com/enjoykanyu/chat_serve/

项目后端部署：项目部署所需资源和配置请参考application.yml文件，启动springboot

项目前端资源下载与部署：

• 下载依赖资源 npm -i
• 部署 npm run dev

贡献与提问

本人开发能力有限，项目中可能会有部分bug，若对于本项目有任何问题和bug，可以随时在githup上提issue

最后 - 觉得项目不错的话，欢迎star支持下，感谢🫰

对于项目有任何问题欢迎提问和提issue

同时欢迎对本项目push贡献