[开源]一款基于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文件

  email Config: { //邮箱配置
    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

请求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开源协议

六、源码地址

私信回复：极简聊天应用

或访问一飞开源：