即时聊天系统

功能描述

该项目是一个前后端分离的即时聊天项目,前端采用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

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
CS即时聊天系统的类图如下所示: 图中展示了该系统的主要类和它们之间的关系。其中包括以下几个类: 1. Client:客户端类,负责与用户交互,发送和接收消息。 2. Server:服务器类,负责接收来自客户端的消息,并将其转发给其他客户端。 3. TextMessage:文字消息类,表示一个文本消息。 4. ChatRoom:聊天室类,用于保存聊天记录和管理用户。 5. User:用户类,表示一个聊天系统的用户。 6. Database:数据库类,用于存储用户信息和聊天记录。 在该类图中,Client通过网络连接与Server进行通信,Server负责处理来自Client的请求并将消息转发给其他Client。TextMessage类用于表示发送的文本消息,而ChatRoom类用于管理用户和保存聊天记录。User类表示一个聊天系统的用户,Database类用于存储用户信息和聊天记录。 通过这个类图,可以清楚地看到CS即时聊天系统的组成部分以及它们之间的关系,有助于理解该系统的设计和实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [C#毕业设计——基于C#+asp.net+cs的即时通信系统设计与实现(毕业论文+程序源码)——即时通信系统](https://blog.csdn.net/m0_66238867/article/details/125655174)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [项目实战——高拓展的实时聊天系统](https://blog.csdn.net/m0_50945504/article/details/126959451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱生活,更爱技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值