README.md · 周茂和/在线聊天室（Vue3+SpringBoot）

# 在线聊天室（Vue3 + SpringBoot）

## 项目描述

- 网页在线聊天室，实现了群组系统和好友系统，因此项目可以在公共群组，私有群组和私人之间进行聊天。
- 项目主要使用Websocket实时通信技术实现聊天，使用Redis和RabbitMQ提高程序的效率和消息收发稳定性。
- 前端使用indexDB实现聊天记录的本地存储和优先显示，使用用户登录信息和本地记录时间戳作为过滤条件实现消息同步。
- 项目重点编写是在后端收发逻辑，及数据的存储和同步方面。对于前端视图可能略显简陋。
- 但项目使用Vue3和Springboot等主流技术进行开发，易于进行二次开发/功能扩展。
- 项目仅实现了重点及基本功能，对于更完善的边缘功能没有特别编写，但不影响聊天室的基本功能。

## 技术栈

**前端**

- vue3，vite
- element-plus
- indexDB
- Pinia
- emoji-picker-element (表情集库)
- axios

**后端**

- springboot
- websocket
- rabbitMQ
- redis
- mybatis-plus
- javaMail
- java-jwt

**数据库管理系统**

MySQL

## 启动项目

1.数据表，执行sql，配置数据源

在【chat_room】数据库中执行**chat_room.sql**文件初始化数据表，然后将数据库信息配置到yml文件中：

```
# 修改后端yml配置数据源：
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://【数据库主机名】:3306/chat_room?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
    username: mysql账号
    password: mysql密码
    type: com.alibaba.druid.pool.DruidDataSource
```

2.启动服务**rabbitMQ** 和 **Radis**，将两个服务的连接信息配置到yml中。

例如使用Docker启动Rabbit：

```
docker run \
 -e RABBITMQ_DEFAULT_USER=maohe101 \
 -e RABBITMQ_DEFAULT_PASS=maohe101 \
 --name rabbit-mq \
 --hostname rabbit-mq \
 -p 15672:15672 \
 -p 5672:5672 \
 -d \
 rabbitmq:3.8-management
```

```
# 修改后端yml配置文件：
redis:
  host: Redis主机地址（本地填localhost）
  port: 6379

rabbitmq:
  host: 主机
  port: 5672
  username: 用户名
  password: 密码
```

3.准备邮箱授权密码

用于账号注册，邮箱发送服务。

找到你自己的邮箱官网，找到POP3/SMTP服务开启，获取授权密码。

例如网易163邮箱官网：[mail.163.com](https://mail.163.com/js6/main.jsp?sid=kMmUWsYYoqjSMsRRdbYYwDgzMuSfoMTs&df=email163#module=options.LinkModule|{"link"%3A"option_pop3"})

```
# 邮箱授权码yml配置
  mail:
    username: 你申请授权码的邮箱
    host: smtp.163.com  # 163邮箱填写，其他邮箱请适当修改
    password: 你的授权码 # 邮箱密匙
```

3.找到启动类，启动后端

4.前端npm i 下载依赖包

5.启动前端 npm run dev  
 
6.默认登录账号： **admin@chat.room**  ， 默认密码： **123456**

## 项目开发过程文档

飞书文档地址：https://scnw01ap0tqh.feishu.cn/wiki/UwVzwJPlAiCxv1k2OzJcP3Asnog

**文档包含开发的具体功能设计和开发过程思考。**

## 项目页面展示

1.登录/注册

![输入图片说明](project-show-page-picture/image-20240925212304407.png)

2.添加好友

![输入图片说明](project-show-page-picture/image-20240925212811028.png)
3.私人聊天

![输入图片说明](project-show-page-picture/image-20240925213121595.png)

4.群组列表/创建群组

![输入图片说明](project-show-page-picture/image-20240925213403302.png)

5.申请加入 和 邀请加入 群组

**邀请用户加入群组：**

![输入图片说明](project-show-page-picture/image-20240925213621860.png)

**主动搜索群组（根据群号搜索）：**

![输入图片说明](project-show-page-picture/image-20240925214214638.png)

6.群组聊天

![输入图片说明](project-show-page-picture/image-20240925214641566.png)

7.公共群组（所有用户注册既加入此群组）

![输入图片说明](project-show-page-picture/image-20240925214719585.png)

周茂和/在线聊天室（Vue3+SpringBoot）

简介

发行版

贡献者

近期动态

周茂和/在线聊天室（Vue3+SpringBoot） .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

周茂和/在线聊天室（Vue3+SpringBoot）