一款开源、高颜值的极简聊天应用

简介

HasChat 是一套使用全新技术完成的通讯聊天网页。

• PC 网页版前端： Vue3 + Vite + TypeScript + Pinia + Naive UI + Socket.io
• 移动版前端： uni-app + Socket.io
• 后端： Express.js

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

功能一览

部署

下载项目

前端

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 install

mysql 配置（json 版本跳过）

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

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

• 找到 config.js 文件

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

邮箱配置（json 版本跳过）

• 找到 config.js 文件

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

启动项目/服务

• 后端

node app.js

• 前端

npm run dev

到此，项目可以正常运行

界面预览

开源地址

https://gitee.com/howcode/has-chat

看看