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": "$2a$10$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": "$2a$10$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": "$2a$10$GwEKhLeiZWhGJs8xdWaVnex28cxuVIHkHpQLa6/yVXCZbGUaSh12C",             "userName": "测试用户注册",             "avatar": "https://picsum.photos/69",             "createTime": "2025-04-20T16:18:02",             "updateTime": "2025-04-20T17:35:21"         },         {             "id": 1055,             "phone": "13689663339",             "password": "$2a$10$rFPIQuKW1c7ndozOQM5EkO9JIGd4DJrlQtdZpi9cNv7DGg2..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": "$2a$10$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贡献