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

发布于:2025-04-22 ⋅ 阅读:(14) ⋅ 点赞:(0)

项目演示

即时通讯软件项目演示

业务架构

技术栈

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


网站公告

今日签到

点亮在社区的每一天
去签到