当前位置: 首页 > backend >正文

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

项目演示

即时通讯软件项目演示

业务架构

技术栈

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

功能完成情况

已实现功能

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

未实现功能

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

功能概述与演示

注册 

接口介绍

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

功能演示

用户注册功能演示

密码登录

接口介绍

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

验证码登录

接口介绍

接口请求类型入参出参(注意这里的密码和用户id尽量不返回也可以加密处理)
/api/user/login/codePOST{
    "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-applyPOST{
    "applyUserId": 1055,
    "reason": "加好友"
}
{
    "success": true,
    "code": 200
}

功能演示

加好友请求

单聊

接口介绍

接口请求类型入参出参
/api/chat/sendPOST{
    "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/sendPOST{
    "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-07e30c6dff3dGETgroupId=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=GETgroupId=

{
    "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贡献

http://www.xdnf.cn/news/681.html

相关文章:

  • C++数组栈与链表栈
  • 软考高级系统架构设计师-第16章 数学与经济管理
  • 切换 Python 版本(配置path方式,含trae)
  • 一个最简单的 Model Context Protocol 的例子
  • Halcon应用:相机标定
  • C++入门篇(下)
  • 线性DP:最长上升子序列(可不连续,数组必须连续)
  • Matlab 复合模糊PID
  • NumPy:数值计算基础与高性能数组操作
  • 如何使用人工智能大模型,免费快速写工作总结?
  • Linux基础指令 补充(自用)
  • 【微知】服务器如何获取服务器的SN序列号信息?(dmidecode -t 1)
  • Origin将双Y轴柱状图升级为双向分组柱状图
  • 二、在springboot 中使用 AIService
  • 【JAVA EE初阶】多线程(1)
  • 代码随想录算法训练营第五十三天 | 105.有向图的完全可达性 106.岛屿的周长
  • 如何轻松实现用户充值系统的API自动化测试
  • QML、Qt Quick 、Qt Quick Controls 2
  • 如何成为Prompt工程师:学习路径、核心技能与职业发展
  • STM32时钟树
  • 微信小程序中使用h5页面预览图片、视频、pdf文件
  • PHP伪协议读取文件
  • Matlab 步进电机传递函数模糊pid
  • langchain-nextjs-template 模板安装与配置
  • 【文献阅读】EndoNet A Deep Architecture for Recognition Tasks on Laparoscopic Videos
  • 【MRAG】使用RAG技术增强AI回复的实时性和准确性
  • Android Kotlin AIDL 完整实现与优化指南
  • Leetcode 3524. Find X Value of Array I
  • 9、Hooks:现代魔法咒语集——React 19 核心Hooks
  • 山东大学软件学院项目实训-基于大模型的模拟面试系统-Token过期重定向问题