即时聊天系统

功能描述

该项目是一个前后端分离的即时聊天项目,前端采用vue2、后端使用springboot以mysql8.0作为数据库。 项目功能包含了单聊、群聊功能。在此基础上增加了对好友的功能操作,如备注设为通知、视频聊天语音聊天、置顶、拉入黑名单、清空聊天记录等。 在群聊基础上增加了查看群成员、退出群聊、解散群聊、清空聊天记录等,用户能够搜索并添加好友,可以创建不大于5个的多人聊天室, 在登入使用SpringSecurity来校验用户的登入情况,使用netty+websocket以推拉模式来实现高效、实时的聊天。 本项目前后端均由本人自己打造。

演示地址

即时聊天系统http://pzgnet.free.idcfengye.com/

Gitee地址:https://gitee.com/pengzhenggao/graduation-project-chat-vue

系统技术栈

Spring Boot、Spring Security、MybatisPlus、Redis、Rabbit MQ、Netty、 Vue2、Element UI、Axios、MySQL(8.0及以上)、Oss、阿里云沙箱

初始化

npm install

运行

npm run serve

打包

npm run build

主要界面

登入

src/assets/界面展示/login1.png

src/assets/界面展示/register1.png

注册

src/assets/界面展示/register2.png

src/assets/界面展示/login2.png

单聊

src/assets/界面展示/聊天页.png

src/assets/界面展示/其他功能.png

群聊

src/assets/界面展示/群聊页.png

src/assets/界面展示/群聊页2.png

创建群聊

src/assets/界面展示/创建群聊1.png

src/assets/界面展示/创建群聊2.png

好友添加

src/assets/界面展示/搜索添加好友.png

视频通话

src/assets/界面展示/视频通话发送方.png

src/assets/界面展示/视频请求接收方.png

src/assets/界面展示/视频通话.png

语音通话

src/assets/界面展示/视频通话发送方.png

src/assets/界面展示/视频请求接收方.png

src/assets/界面展示/语音通话.png

个人设置

src/assets/界面展示/个人设置页.png

相关推荐

  1. 实时聊天系统

    2024-06-16 06:54:05       33 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-16 06:54:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-16 06:54:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-16 06:54:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-16 06:54:05       18 阅读

热门阅读

  1. python命名空间详解

    2024-06-16 06:54:05       9 阅读
  2. 搭建Python虚拟环境(三):Conda

    2024-06-16 06:54:05       10 阅读
  3. vuex是什么?如何使用?使用他的功能场景?

    2024-06-16 06:54:05       9 阅读
  4. Web前端经验:探索、挑战与成长的奇幻之旅

    2024-06-16 06:54:05       11 阅读
  5. mac编译dbgen出错rand::rngs::OsRng

    2024-06-16 06:54:05       9 阅读
  6. 深入浅出Spring Boot自动装配:让开发更轻松

    2024-06-16 06:54:05       8 阅读
  7. Qt 槽函数重载时通过函数指针绑定

    2024-06-16 06:54:05       9 阅读
  8. 常用的Linux、python命令

    2024-06-16 06:54:05       5 阅读
  9. 【学习笔记】MySQL(Ⅲ)

    2024-06-16 06:54:05       7 阅读