开源一款基于Vue3+Socket.IO的极简聊天应用，比较完整，略好看

一、开源项目简介

自做的客服聊天以来，让做一套聊天应用的呼声越来越多，加上那套客服聊天由于没有组件化、UI设计等问题，一直心有遗憾做的不够完美，于是利用空余时间做了一套相对完整的聊天应用。HasChat 是一套使用全新技术完成的一套通讯聊天网页。

二、界面展示

三、功能概述

作者开源目的旨在给刚学习该领域的新人一些引路，不管你是前端还是后端，都能对你在通讯聊天这个领域有一点点的启发。

功能一览

• 登陆、随机获取用户登陆
• 发送邮箱验证码注册
• 发送表情+文字组合的富文本内容
• 发送图片内容，查看大图
• enter发送信息，enter+ctrl换行输入内容
• 消息提醒
• 未读消息标记
• 记录历史会话
• 记录历史聊天内容

四、技术选型

• 前端：Vue3 + Vite + TypeScript + Naive UI + Socket.io
• 后端：Express.js

版本说明

• 前端：暂无版本区别
• 后端：分为mysql版本（分支main）和json版本（分支master）；json版本主要是为了不懂mysql的新手学习；

环境部署

Node.Js >= 12.0.0
Mysql >= 5.7.0 (仅mysql版本需要)

项目目录

haschat     
├── src            
│       └── api                    		  // 接口文件
│       └── assets						  // 资源文件
│			└── css					 	  // css样式
│			└── emo					 	  // 表情包
│			└── icon					  // 字体图标
│			└── img					 	  // 图片资源
│			└── mp3					 	  // 消息提示音频
│       └── class                      	  // 类文件
│       └── components                    // 组件
│			└── ChatContent.vue			  // 聊天窗口
│			└── ChatDomain.vue			  // 功能组件
│			└── ChatEditor.vue			  // 聊天输入框
│			└── ChatFoot.vue			  // 聊天框底部
│			└── ChatHead.vue			  // 聊天头部
│			└── ChatNav.vue				  // 菜单栏
│			└── HasChat.vue				  // 聊天入口
│       └── enums                         // 通用枚举
│       └── json                          // JSON数据处理
│       └── router                        // 路由
│       └── store                         // 数据仓库
│       └── utils                         // 工具
│       └── views                         // 页面

五、开源协议

使用Apache-2.0开源协议