search

XC0703 / better-chat

本项目是一个前端基于vite、react、ts，后端基于express、mysql，并依赖websocket、webrtc实现的局域网实时聊天全栈项目，且持续开源和维护。
310 stars 39 forks source link

readme

better-chat

vite react typescript express mysql

websocket webrtc

1、项目介绍

1.1 项目概括

本项目是一个前端基于vite、react、ts，后端基于express、mysql，并依赖websocket、webrtc实现的局域网实时聊天全栈项目，且持续开源和维护。

先放在开头：

👉 项目演示视频地址：https://www.bilibili.com/video/BV1mi421C7Ym

🔨 项目说明文档掘金地址：https://juejin.cn/post/7370963861645017097

（希望各位看官给新人 up 主一键三连 + 给本菜鸡的项目点个 star⭐，不胜感激。）

1.2 为什么要开发这个项目？

先写在前面：本项目是个人学习过程中开发的项目，功能简单、界面简洁，各方面的考虑较为粗糙，适合正在练习上述技术栈的小白进行学习和巩固，代码量极少且逻辑清晰。(大佬勿喷)
注意：本人后面计划整理出项目核心功能的开发教程，发表在本人的掘金博客上，确保对上述技术栈几乎陌生的小白，跟着教程也完全可以从 0 到 1 实现项目。因此希望各位同学点点关注。

1.3 谁需要这个项目？

本项目适合以下同学：

1.4 项目亮点？

1.5 一定要从 0 到 1 实现一次本项目吗？

先说回答：不是。上面提到本项目的功能点众多，工作量不少，如果从 0 到 1实现一次本项目固然收获不少，但对于部分基础好的同学来说太耗时了，也没有必要这样做。本人认为，了解本项目的架构以及核心功能的实现逻辑即可，然后对项目进行二次开发，即完成下面所提到的待完成功能会收获更大。

1.5.1 本项目的核心功能

1.5.2 本项目后续待完成的功能

1.6 项目运行截图

1.6.1 用户模块

登录界面：
登录界面.png

注册界面：
注册界面.png

修改个人信息：
修改个人信息.png

修改密码：
修改密码.png

1.6.2 好友模块

好友列表展示、好友信息展示及修改：
好友列表展示、好友信息展示及修改.png

查询并添加好友：
查询并添加好友.png

1.6.3 聊天模块

群聊列表展示、群聊信息展示及修改：
群聊列表展示、群聊信息展示及修改.png

创建群聊：
创建群聊第一步.png
创建群聊第二步.png

聊天界面：
聊天界面.png

图片消息预览：
图片消息预览.png

视频消息预览：
视频消息预览.png

对好友发起语音通话：
对好友发起语音通话.png

对群友发起语音通话：
对群友发起语音通话.png

好友收到语音通话：
好友收到语音通话.png

群友收到语音通话：
群友收到语音通话.png

与好友语音通话中：
与好友语音通话中.png

与群友语音通话中：
与群友语音通话中.png

对好友发起视频通话：
对好友发起视频通话.png

对群友发起视频通话：
对群友发起视频通话.png

好友收到视频通话：
好友收到视频通话.png

群友收到视频通话：
群友收到视频通话.png

与好友视频通话中：
与好友视频通话中.png

与群友视频通话中：
与群友视频通话中1.png
与群友视频通话中2.png

2、项目开发教程

2.1 项目如何启动？

  1. 先拉取本项目到本地：

    git clone git@github.com:XC0703/better-chat.git

  2. 用VScode等编辑器打开本项目（无论是用VSCode还是WebStorm进行开发，请提前安装好并配置启用两个插件：ESLint和Prettier，用于代码检查与代码格式化。）

  3. 下载根目录下的依赖：

    pnpm install

  4. 启动服务端：

    cd server
    pnpm install
    pnpm start

  5. 启动客户端：

    cd client
    pnpm install
    pnpm start

  6. 此时浏览器会自动打开项目页面

注意：

  1. 项目启动前，先确定本地电脑已经配备好相关环境（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/80633055

    Redis 安装相关：

    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

  2. 本项目的数据库配置如下：（见server\src\model\config.json文件，根据自己的实际情况作出更改）

    {
"host": "127.0.0.1",
"port": 3306,
"user": "root",
"password": "123456",
"database": "better-chat"
}

    1. 首先用下面的命令或者Navicat Premium等工具建好数据库： （注意：在 MySQL 中，通常使用反引号来包围数据库、表或列名，特别是当它们包含特殊字符或关键字时。）

      mysql -u root -p
      CREATE DATABASE `better-chat`;

    2. 然后可以用source命令或者Navicat Premium等工具运行项目下的better-chat.sql文件，方便可以在本地数据库增加一些模拟数据，同时由于静态资源存储在本地没有上传到仓库，所以需要显示的文件会呈现兜底样式，不会报错。（注意：此步可不进行，保持数据库原始空白状态。）

  3. 作者本人的环境配置：

    node：v18.20.2

    npm：v10.5.0

    pnpm：v8.14.3

    mysql：v8.0.29

    redis：v5.0.14

注意：如果项目运行过程中有任何问题，欢迎给项目提交issue，本人尽量第一时间解决。

2.2 具体教程

上面提到本项目的亮点有较为完备的前端工程化配置，项目目录结构合理、清晰，组件和方法抽象程度高、代码耦合度低、文档完善。因此大部分有一点前端基础的同学直接运行并阅读项目源码即可了解整体的架构和具体的功能逻辑，可以很快对项目进行从 0 到 1 复现或者二次开发。

2.2.1 项目整体架构

系统的状态变化如图所示：
系统界面状态图.png

项目的前端架构如图所示：
前端架构图.png

项目的后端架构如图所示：
后端架构图.png

2.2.2 源码目录介绍

前端项目目录介绍：
client.png

前端项目主要看 client\src 这里面即可：

后端项目目录介绍：
server.png

后端项目主要看 server\src 这里面即可：

对于大部分人来说，直接看源码和注释即可。因为上面提到，本项目的亮点之一便是做了较为完备的前端工程化设置，且项目目录结构合理、清晰，组件和方法抽象程度高，代码耦合度低，且配备了注释说明。下面附上几张源码图片进行证明：

client\src\components\VideoModal\index.tsx：（音视频通话的前端处理）
音视频通话-前端主要代码逻辑：
音视频通话-前端1.png 音视频通话-前端建立 WebSocket 连接：
音视频通话-前端2.png 音视频通话-前端建立 WebRTC 连接：
音视频通话-前端3.png

server\src\service\rtc\index.js：（音视频通话的服务端处理） 音视频通话-后端.png

client\src\utils\file.ts：（前端处理文件的函数集合） 前端处理文件相关.png

2.3 如何参与本项目？

  1. Fork 本仓库
  2. 新建 feat/xxx_feature 分支
  3. 提交代码 (commit 规范可参照这里：https://juejin.cn/post/7264599940537532474#heading-6)
  4. 新建 Pull Request

3、写在最后

本项目到目前为止都靠作者一人独立开发，但上面提到还有许多可扩展的功能点，也有很多缺陷待修复，因此希望更多的人参与进来，继续完善这个项目，实现更好的开源，开源拯救世界。

本人最近忙于学习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

上面是一些关于此项目和本人技术社区主页的地址，欢迎各位看官给小弟点个赞，与诸君共勉。同时也欢迎各位大佬扫码加入我的前端卷卷卷群，一起学习交流。
前端卷卷卷.png