当前位置：首页 > news >正文

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

news 来源：原创 2025/4/21 7:00:36

项目演示

即时通讯软件项目演示

业务架构

技术栈

后端
- 选用编程语言 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
}