[开源]一款基于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版本需要)

启动项目

安装依赖

前、后端

npm install

mysql配置（json版本跳过）

• 在mysql的版本中，找到目录store下的sql文件，运行sql文件

• 依次运行两个sql文件，并且刷新数据库表就可看到了

• 找到config.js文件

const db = mysql.createConnection({
host: '', // 主机地址 （默认：localhost）
user: '', // 用户名
password: '', // 密码
database: '' // 数据库
})

更多配置查看：nodejs-mysql

邮箱配置（json版本跳过）

找到config.js文件

emailConfig: { //邮箱配置
    host: 'smtp.qq.com',//邮箱服务器  这里我用的QQ邮箱
    port: 465,//邮箱使用端口
    secure: true,//是否使用默认的465端口
    auth: {
      user: '', // 发送方邮箱地址
      pass: '' // smtp 验证码
    }
  }

详情使用可以查看该文章：nodejs发送邮箱信息

启动项目/服务

后端

node app.js

前端

npm run dev

到此，项目可以正常运行

项目目录

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 // 页面

类文件

User

字段	类型	描述
Id	number	用户Id
Name	string	用户姓名
NickName	string	用户昵称
OnlineState	boolean	在线状态
Mobile	string	用户手机号
Avatar	string	用户头像

Conversition

字段	类型	描述
Id	number	内容Id
SendId	number	发送人Id
ReciverId	number	接受人Id
Content	string	内容
Type	number	类型
State	number	发送状态
NoCode	string	信息编号
CreateDateUtc	string	创建时间
Title	string	拓展功能字段
Description	string	拓展功能字段
Label	string	拓展功能字段
Thumbnail	string	拓展功能字段
ReadFlag	boolean	是否阅读

请求api

1.获取用户信息

参数

id：用户Id，必传

接口地址 : /api/getUserById

2.获取用户列表

参数

id：除去的用户Id，必传

接口地址 : /api/userList

3.随机获取一条用户数据

参数

无

接口地址 : /api/getRandomUser

4.登陆

参数

email：账户，必传

password：密码，必传

接口地址 : /api/login

5.注册

参数

email：邮箱，必传

name：用户名，必传

password：密码，必传

surePassword：确认密码，必传

接口地址 : /api/register

6.发送邮箱验证码

参数

email：邮箱，必传

timestamp：时间戳，自动携带

接口地址 : /api/sendVerificationCode

7.校验邮箱验证码

参数

verificationCode：验证码，必传

timestamp：时间戳，自动携带

接口地址 : /api/checkVerificationCode

socket.io的api

1.加入聊天

参数

SendId：发送者Id，必传

NoCode：时间戳，自动携带

调用方式

store.state.socket.emit('joinChat', {
  SendId: xxx,
  NoCode: xxx,
});

2.发送消息

参数

Conversition：发送内容对象（查看Conversition类），必传

ReciverId：接收者Id，必传

SendId：发送者Id，必传

调用方式

store.state.socket.emit('sendMsg', {
Conversition: xxx,
ReciverId: xxx,
SendId: xxx,
});

3.修改信息阅读状态

参数

ReciverId：接收者Id，必传

SendId：发送者Id，必传

调用方式

store.state.socket.emit('changeMsgRead', {
  ReciverId: xxx,
  SendId: xxx,
});

4.新增历史会话

参数

SendId：发送者Id，必传

Revicer：接受者对象（可查看Use类），必传

调用方式

store.state.socket.emit('insertHistorySession', {
SendId: xxx,
Revicer: xxx,
});

五、开源协议

使用Apache-2.0开源协议

六、源码地址

私信回复：极简聊天应用

或访问一飞开源：https://code./