客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：HasChat开源软件地址：https://gitee.com/howcode/has-chat开源软件介绍：HasChat基于vue3+socket.io的聊天应用
无偿开源！你们的Star是我的动力！介绍自我做的客服聊天以来，让我做一套聊天应用的呼声越来越多，加上那套客服聊天由于没有组件化、UI设计等问题，也让我一直心有遗憾做的不够完美，于是利用空余时间做了一套相对完整的聊天应用。HasChat 是一套使用全新技术完成的通讯聊天网页。
作者开源目的旨在给刚学习该领域的新人一些引路，不管你是前端还是后端，都能对你在通讯聊天这个领域有一点点的启发。 预览图
在线预览功能一览
版本说明
环境部署Node.Js >= 12.0.0Mysql >= 5.7.0 (仅mysql版本需要，但执行mysql文件需要8.0以上版本)下载项目前端 https://gitee.com/howcode/has-chat.git后端 mysql版本 git clone -b main https://gitee.com/howcode/has-chat-service.git后端 json版本 git clone -b master https://gitee.com/howcode/has-chat-service.git启动项目安装依赖前、后端 npm installmysql配置（json版本跳过）
const db = mysql.createConnection({ host: "", // 主机地址 （默认：localhost） user: "", // 用户名 password: "", // 密码 database: "" // 数据库})更多配置查看：nodejs-mysql 邮箱配置（json版本跳过）
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
Conversition
请求api1.获取用户信息参数
接口地址 : /api/getUserById 2.获取用户列表参数
接口地址 : /api/userList 3.随机获取一条用户数据参数 无 接口地址 : /api/getRandomUser 4.登陆参数
接口地址 : /api/login 5.注册参数
接口地址 : /api/register 6.发送邮箱验证码参数
接口地址 : /api/sendVerificationCode 7.校验邮箱验证码参数
接口地址 : /api/checkVerificationCode socket.io的api1.加入聊天参数
调用方式 store.state.socket.emit("joinChat", { SendId: xxx, NoCode: xxx,});2.发送消息参数
调用方式 store.state.socket.emit("sendMsg", { Conversition: xxx, ReciverId: xxx, SendId: xxx,});3.修改信息阅读状态参数
调用方式 store.state.socket.emit("changeMsgRead", { ReciverId: xxx, SendId: xxx,});4.新增历史会话参数
调用方式 store.state.socket.emit("insertHistorySession", { SendId: xxx, Revicer: xxx,});免责声明一、本项目宗旨在于为广大的正在学习通讯方面的新手提供学习、思路 二、本项目资源全部免费分享，包括前端源码、后端转源码等。本项目不会利用任何资源进行任何的销售盈利活动。 三、任何情况下，因使用本项目进行违法犯罪的行为，本人不承担任何法律责任。 未来计划
 |
请发表评论