自做的客服聊天以来,让做一套聊天应用的呼声越来越多,加上那套客服聊天由于没有组件化、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的版本中,找到目录store下的sql文件,运行sql文件
依次运行两个sql文件,并且刷新数据库表就可看到了
找到config.js文件
const db = mysql.createConnection({
host: '', // 主机地址 (默认:localhost)
user: '', // 用户名
password: '', // 密码
database: '' // 数据库
})
更多配置查看:nodejs-mysql
找到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 // 页面
字段 | 类型 | 描述 |
Id | number | 用户Id |
Name | string | 用户姓名 |
NickName | string | 用户昵称 |
OnlineState | boolean | 在线状态 |
Mobile | string | 用户手机号 |
Avatar | string | 用户头像 |
字段 | 类型 | 描述 |
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 | 是否阅读 |
参数
id:用户Id,必传
接口地址 : /api/getUserById
参数
id:除去的用户Id,必传
接口地址 : /api/userList
参数
无
接口地址 : /api/getRandomUser
参数
email:账户,必传
password:密码,必传
接口地址 : /api/login
参数
email:邮箱,必传
name:用户名,必传
password:密码,必传
surePassword:确认密码,必传
接口地址 : /api/register
参数
email:邮箱,必传
timestamp:时间戳,自动携带
接口地址 : /api/sendVerificationCode
参数
verificationCode:验证码,必传
timestamp:时间戳,自动携带
接口地址 : /api/checkVerificationCode
参数
SendId:发送者Id,必传
NoCode:时间戳,自动携带
调用方式
store.state.socket.emit('joinChat', {
SendId: xxx,
NoCode: xxx,
});
参数
Conversition:发送内容对象(查看Conversition类),必传
ReciverId:接收者Id,必传
SendId:发送者Id,必传
调用方式
store.state.socket.emit('sendMsg', {
Conversition: xxx,
ReciverId: xxx,
SendId: xxx,
});
参数
ReciverId:接收者Id,必传
SendId:发送者Id,必传
调用方式
store.state.socket.emit('changeMsgRead', {
ReciverId: xxx,
SendId: xxx,
});
参数
SendId:发送者Id,必传
Revicer:接受者对象(可查看Use类),必传
调用方式
store.state.socket.emit('insertHistorySession', {
SendId: xxx,
Revicer: xxx,
});
使用Apache-2.0开源协议
私信回复:极简聊天应用
或访问一飞开源:https://code.exmay.com/
联系客服