本项目是一个前端基于vite
、react
、ts
,后端基于express
、mysql
,并依赖websocket
、webrtc
实现的局域网实时聊天全栈项目,且持续开源和维护
。
先放在开头:
👉 项目演示视频地址:https://www.bilibili.com/video/BV1mi421C7Ym
🔨 项目说明文档掘金地址:https://juejin.cn/post/7362756601726746663
(希望各位看官给新人 up 主一键三连 + 给本菜鸡的项目点个 star⭐,不胜感激。)
先写在前面:本项目是个人学习过程中开发的项目,功能简单、界面简洁,各方面的考虑较为粗糙,适合正在练习上述技术栈的小白进行学习和巩固,代码量极少且逻辑清晰。(大佬勿喷
)
注意:本人后面计划整理出项目核心功能的开发教程,发表在本人的掘金博客上,确保对上述技术栈几乎陌生的小白,跟着教程也完全可以从 0 到 1 实现项目。因此希望各位同学点点关注。
本项目适合以下同学:
-
学习了
vite
、react
、ts
等技术栈而没有找到一个好的项目进行实践。 -
想不局限于前端,希望了解后端一些基本知识应用的同学。(如果有写
Java
、Go
等语言的后端同学需要找项目进行实践,也可对该项目的后端用Java
进行重构升级,目前的项目后端部分只是为前端提供了简单服务而已,很多东西没有考虑到。) -
想扩展自己的技术视野,了解
websocket
、webrtc
等知识的基本应用的同学。 -
想提高自己的代码能力、工程能力的同学:
-
工作量展示如下(已排除引用的第三方代码):
前端 后端 其它 总 代码行数 11482 4093 1336 16911 -
同时,本项目的开发严格进行了工程化配置,前后进行了十次代码治理,降低系统“屎山代码”发生的可能性:
-
找实习、正式的校招前端同学,正在为简历上没有好的项目而苦恼(B 站大学的很多免费项目都是些烂大街的后台管理系统、仿 XX 商城等,面试官都看腻了)。本项目是本人校招时简历上的个人项目之一,伴随着本人校招拿到了阿里、美团、华为、OPPO 等七个中大厂 offer。本人亲测,该项目的存在会让面试官与你的可聊点变多,让你在千篇一律的简历海中脱颖而出,增加面试通过率。
- 使用
ESLint
+Prettier
+Husky
+Commitlint
+Lint-staged
等工具统一代码和Git
提交规范,较为完备的前端工程化配置。 - 项目目录结构合理、清晰,组件和方法抽象程度高,代码耦合度低,且配备较为完善的文档说明。
- 依赖
React Router
和高阶组件实现了前端路由系统,包含路由配置、路由守卫、路由重定向等功能,且结合JWT
实现鉴权。 - 借助
MySQL
、Express
完成了7
张表、25
个接口的设计与开发,锻炼全栈能力。 - 基于
WebSocket
协议、WebRTC
协议实现了局域网通信和音视频通话功能,且支持群聊和群音视频。 - 实现了本地文件系统,针对大文件传输场景,作出分片上传处理。
先说回答:不是。上面提到本项目的功能点众多,工作量不少,如果从 0 到 1实现一次本项目固然收获不少,但对于部分基础好的同学来说太耗时了,也没有必要这样做。本人认为,了解本项目的架构以及核心功能的实现逻辑即可,然后对项目进行二次开发,即完成下面所提到的待完成功能会收获更大。
- 前端路由系统(
React Router
的实践) - 登录鉴权(
jwt
鉴权的实践) - 建立聊天(
websocket
的实践) - 音视频通话(借助
websocket
完成webrtc
连接建立需要的一些信令交互) - 文件上传(本地文件系统的实现)
- 增加其它功能模块或者为现有的功能模块增加其它
CRUD
操作,如删除好友、删除分组、退出群聊、群成员管理、好友分组管理等。 - 完善本地文件系统,优化文件分片上传,增加断点续传、秒传、重试机制:
- 完善项目的
websocket
心跳重连机制,保证持续连接。 - 前端引入
MobX
等库进行状态管理,后端进一步利用Redis
等缓存进行性能优化。 - 借助
electron
打包成桌面应用。 - 租借云服务器,利用
docker
进行部署、实现外网通信。
-
先拉取本项目到本地:
git clone [email protected]:XC0703/better-chat.git
-
用
VScode
等编辑器打开本项目(无论是用VSCode
还是WebStorm
进行开发,请提前安装好并配置启用两个插件:ESLint
和Prettier
,用于代码检查与代码格式化。) -
下载根目录下的依赖:
pnpm install
-
启动服务端:
cd server
pnpm install
pnpm start
-
启动客户端:
cd client
pnpm install
pnpm start
-
此时浏览器会自动打开项目页面
注意:
-
项目启动前,先确定本地电脑已经配备好相关环境(
node
,mysql
,redis
,pnpm
等),推荐用navicat
作为数据库管理软件(在里面新建本项目的数据库),用redis desktop manager
作为redis
管理软件。需要先全局安装
pnpm
,安装命令为:npm install -g pnpm
其中关于为什么用
pnpm
不用npm
或者yarn
命令,参考博客:关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?数据库安装相关:
1、MySQL8.0.26 安装配置教程 (windows 64 位):https://blog.csdn.net/weixin_52270997/article/details/120066948
2、Navicat Premium v12.1.9 破解版 _x86_x64:https://blog.csdn.net/juanjuan_01/article/details/84102349
3、Navicat Premium 基本使用:https://blog.csdn.net/Yangchenju/article/details/80633055Redis 安装相关:
1、Redis 下载和安装(Windows 系统)参考链接:http://c.biancheng.net/redis/windows-installer.html (注意:在执行
redis-server.exe --service-start
前要把客户端启动关掉,否则端口会被占用)
2、windows 免费安装 redis desktop manager(上 github 找到免费版最新的是 2018 年的,可以直接下载 exe 执行程序):https://github.com/uglide/RedisDesktopManager/releases/tag/0.9.3 -
本项目的数据库配置如下:(见
server\config.json
文件,根据自己的实际情况作出更改){ "host": "127.0.0.1", "port": 3306, "user": "root", "password": "123456", "database": "better-chat" }
-
首先用下面的命令或者
Navicat Premium
等工具建好数据库: (注意:在 MySQL 中,通常使用反引号来包围数据库、表或列名,特别是当它们包含特殊字符或关键字时。)mysql -u root -p
CREATE DATABASE `better-chat`;
-
然后可以用
source
命令或者Navicat Premium
等工具运行项目下的better-chat.sql
文件,方便可以在本地数据库增加一些模拟数据,同时由于静态资源存储在本地没有上传到仓库,所以需要显示的文件会呈现兜底样式,不会报错。(注意:此步可不进行,保持数据库原始空白状态。)
-
-
作者本人的环境配置:
node:v18.20.2
npm:v10.5.0
pnpm:v8.14.3
mysql:v8.0.29
redis:v5.0.14
注意:如果项目运行过程中有任何问题,欢迎给项目提交issue
,本人尽量第一时间解决。
上面提到本项目的亮点有较为完备的前端工程化配置,项目目录结构合理、清晰,组件和方法抽象程度高、代码耦合度低、文档完善。因此大部分有一点前端基础的同学直接运行并阅读项目源码即可了解整体的架构和具体的功能逻辑,可以很快对项目进行从 0 到 1 复现或者二次开发。
前端项目入口文件为 client\src
,主要看这里面即可:
assets
文件夹主要存放一些静态资源文件,如图片、图标、表情包、全局样式等components
文件夹主要存放公共组件,如各种弹窗组件、聊天框组件等config
文件夹主要存放服务器相关配置,如服务端接口的baseURL
、websocket
的baseURL
等hooks
文件夹主要存放一些自定义hook
,如全局提示弹窗hook
pages
文件夹主要存放页面组件,如登录页面、注册页面、首页等router
文件夹主要存放路由相关配置,即用于实现路由守卫的高阶组件utils
文件夹主要存放一些全局通用的工具方法,如封装的axios
和storage
、加密解密函数、时间或文件的格式化方法等
controller
文件夹主要负责处理 API 相关,将接口路由与services
文件夹中导出的操作函数关联起来models
文件夹负责处理各个表的创建services
文件夹负责各种操作的逻辑实现,并配备了极为清晰的注释utils
文件夹主要存放一些全局通用的工具方法,如创建文件的方法、文件格式化方法等
对于大部分人来说,直接看源码和注释即可。因为上面提到,本项目的亮点之一便是做了较为完备的前端工程化设置,且项目目录结构合理、清晰,组件和方法抽象程度高,代码耦合度低,且配备了注释说明。下面附上几张源码图片进行证明:
client\src\components\VideoModal\index.tsx:(音视频通话的前端处理)
音视频通话-前端主要代码逻辑:
音视频通话-前端建立 WebSocket 连接:
音视频通话-前端建立 WebRTC 连接:
server\services\rtc\index.js:(音视频通话的服务端处理)
client\src\utils\file.ts:(前端处理文件的函数集合)
- Fork 本仓库
- 新建 feat/xxx_feature 分支
- 提交代码 (commit 规范可参照这里:https://juejin.cn/post/7264599940537532474#heading-6)
- 新建 Pull Request
本项目到目前为止都靠作者一人独立开发,但上面提到还有许多可扩展的功能点,也有很多缺陷待修复,因此希望更多的人参与进来,继续完善这个项目,实现更好的开源,开源拯救世界。
本人最近忙于学习React
源码,当学完便会将相关资料和笔记整理出来开源,类似于本人的另一个项目:VueSouceCodeStudy,欢迎各位大佬给本菜鸡的项目点个 star⭐。
🔨 本人掘金博客地址:https://juejin.cn/user/2370998127573751/posts
🎨 本人Github
主页地址:https://github.com/XC0703
🏰 本人Gitee
主页地址:https://gitee.com/XC0703
👉 项目Github
地址:https://github.com/XC0703/better-chat
✨ 项目Gitee
地址:https://gitee.com/XC0703/better-chat
上面是一些关于此项目和本人技术社区主页的地址,欢迎各位看官给小弟点个赞,与诸君共勉。同时也欢迎各位大佬扫码加入我的前端卷卷卷群,一起学习交流。