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

即时聊天系统

news 来源：原创 2024/7/3 7:06:59

功能描述

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

相关文章：

  • TCP三次握手的过程
  • Github 2024-06-14 开源项目日报Top10
  • C语言之#define #if 预处理器指令
  • HTML前端
  • 基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[0]-模型、工具、分词器等支持列表
  • VSCode插件开发之初始化项目
  • GPRS与4G网络：技术差异与应用选择
  • PHP入门教程1：PHP的基础概念和基本语法
  • 17个有用的CLI命令
  • 跨文化美学实践：以‘Shockman登峰侠‘为例探析翻译艺术与文化意蕴
  • 回答网友的一个Delphi问题
  • React@16.x（29）useRef
  • 用python把docx批量转为pdf
  • [Rust] 求Vec中的最值、统计特定值的数量和统计数组总和
  • 软设之需求分析的工具
  • “大数据应用场景”之隔壁老王（连载四）
  • 【跃迁之路】【463天】刻意练习系列222（2018.05.14）
  • isset在php5.6-和php7.0+的一些差异
  • js
  • JS实现简单的MVC模式开发小游戏
  • JS正则表达式精简教程（JavaScript RegExp 对象）
  • js中forEach回调同异步问题
  • Linux gpio口使用方法
  • python 装饰器（一）
  • Vue2.x学习三：事件处理生命周期钩子
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹？
  • 检测对象或数组
  • 类orAPI - 收藏集 - 掘金
  • 前端技术周刊 2019-01-14：客户端存储
  • 系统认识JavaScript正则表达式
  • elasticsearch-head插件安装
  • 如何用纯 CSS 创作一个货车 loader
  • 完善智慧办公建设，小熊U租获京东数千万元A+轮融资 ...
  • ​什么是bug？bug的源头在哪里？
  • $.proxy和$.extend
  • (Java数据结构)ArrayList
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (vue)el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
  • （安卓）跳转应用市场APP详情页的方式
  • （二）linux使用docker容器运行mysql
  • （四）linux文件内容查看
  • (转)拼包函数及网络封包的异常处理(含代码)
  • .gitignore文件_Git：.gitignore
  • .NET 表达式计算：Expression Evaluator
  • .net 调用海康SDK以及常见的坑解释
  • .NET 指南：抽象化实现的基类
  • .NET6 命令行启动及发布单个Exe文件
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • /deep/和 ＞＞＞以及 ::v-deep 三者的区别
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室（基于注解）
  • @selector(..)警告提示
  • @SpringBootApplication 包含的三个注解及其含义
  • [ vulhub漏洞复现篇 ] Django SQL注入漏洞复现 CVE-2021-35042
  • [].slice.call()将类数组转化为真正的数组
  • [120_移动开发Android]008_android开发之Pull操作xml文件