# chatroom

**Repository Path**: nuistxiao/chatroom

## Basic Information

- **Project Name**: chatroom
- **Description**: 基于websocket+springboot的在线聊天室（点对点+群聊），可以发送文字和图片信息。前端使用vue+elementUI。目前已经五个版本，不同版本之间变化很大，但都可以单独使用。入门建议从1.0版本开始，了解springboot和websocket的结合原理。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-12-19
- **Last Updated**: 2022-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


> 本项目两个md文件，其中note.md是开发过程中做的笔记（每次更新也会记录在这里），README.md是项目的介绍和部署

# 一、项目简介
基于websocket+springboot的在线聊天室（点对点+群聊），可以发送文字和图片信息。前端使用vue+elementUI。目前已经五个版本，不同版本之间变化很大，但都可以单独使用（不同版本的区别等详见note.md）。入门建议从1.0版本开始，了解springboot和websocket的结合原理。

参考项目：
https://github.com/Tellsea/springboot-learn/-/tree/master/springboot-websocket
# 二、部署方法
1. 项目地址
   https://gitee.com/jiyuzz/chatroom
   clone后导入到IDEA
2. sql文件放在根目录了，记得先导入数据库（项目5.0版本之前导入chatroom.sql,5.0之后chatroom5.sql）
3. 使用了虚拟地址映射，实际地址为D:\test\chatroom，
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/70bfcb111eca41fabbe6588ff6c67914.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaml5dXp6eg==,size_20,color_FFFFFF,t_70,g_se,x_16)
   可以自己修改或者直接在这个位置建立一个文件夹，里面放几张图片（登录注册的背景图以及用户头像），名字和前后端对应即可（前端对应的是背景图，后端对应的是数据库中avatar字段），也可以直接使用我的图片，放在了recources/static下面了。
4. 1.0版本和2.0版本都是在浏览器上输入：localhost:8888/{username}进行登录，随便起个名字就行
5. 3.x版本，登录暂时不连接数据库。4.0版本之前用户固定为四个（Jack，Rose，Tom，David），对应的账号分别123456，234567，345678，456789，密码都是123456；在浏览器上输入：localhost:8888  进入到登录页，5.0版本开始实现注册功能，随便几个用户都可以,数据库也进行了改动，对应sql文件为chatroom5.sql
6. 可多开窗口，每个窗口登录一个用户，即可在线聊天；点击“所有人”，实现群发功能
   7.运行： 点击这两个图标之中的任意一个都可以运行项目
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/6228cb1ee776492ba71c4eac5c8e7c14.png)

# 三、V5.0使用说明
## 登录
项目根路径：http://localhost:8888/
默认就会访问登录页，点击右上角“去注册”，会跳转带注册页，注册成功会跳转到登录页。登录成功会跳转到聊天页
![在这里插入图片描述](https://img-blog.csdnimg.cn/e625425f63b047f9835c9b936e1ad3d4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaml5dXp6eg==,size_20,color_FFFFFF,t_70,g_se,x_16)
## 注册
点击头像可以实现上传头像，之后所有头像会统一保存在D:\test\chatroom这个文件夹下，并且都会以用户的账号进行重命名。注册注册成功会跳转到登录页。
![在这里插入图片描述](https://img-blog.csdnimg.cn/c434f32ddc084da1978aff3497157608.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaml5dXp6eg==,size_20,color_FFFFFF,t_70,g_se,x_16)
## 聊天
在输入框输入想要发送的文字信息，点击右下角的发送按钮即可发送。
点击按钮旁的向下箭头即可选择发送图片。
左侧列表代表所有在线用户，点击就会跳转到对应的聊天窗口。
选择“所有人”，就会群发消息。
![在这里插入图片描述](https://img-blog.csdnimg.cn/e6e141d0f49e4e6e819e1598e3f22c1f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaml5dXp6eg==,size_20,color_FFFFFF,t_70,g_se,x_16)
## 个人信息
点击导航栏的接收者昵称或者发送者昵称，都可以看到个人信息（从数据库获取）
![在这里插入图片描述](https://img-blog.csdnimg.cn/0bd72418438748c8a4083118219a5e16.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaml5dXp6eg==,size_20,color_FFFFFF,t_70,g_se,x_16)