Java精选面试题 (微信小程序): 5000+ 道面试题和选择题, 真实面经 , 简历模版 ,包含Java基础、并发、JVM、线程、MQ系列、Redis、Spring系列、Elasticsearch、Docker、K8s、Flink、Spark、架构设计、大厂真题等,在线随时刷题!
01 介绍

自我做的客服聊天以来,让我做一套聊天应用的呼声越来越多,加上那套客服聊天由于没有组件化、UI 设计等问题,也让我一直心有遗憾做的不够完美,于是利用空余时间做了一套相对完整的聊天应用。HasChat 是一套使用全新技术完成的通讯聊天网页。

  • PC 网页版前端:Vue3+Vite+TypeScript+Pinia+Naive UI+Socket.io

  • 移动版前端: uni-app+Socket.io

  • 后端:Express.js

作者开源目的旨在给刚学习该领域的新人一些引路,不管你是前端还是后端,都能对你在通讯聊天这个领域有一点点的启发。
02 功能说明
  • 登陆、随机获取用户登陆

  • 发送邮箱验证码注册

  • 发送表情+文字组合的富文本内容

  • 发送图片内容,查看大图

  • enter 发送信息,enter+ctrl 换行输入内容

  • 消息提醒

  • 未读消息标记

  • 记录历史会话

  • 记录历史聊天内容

  • 切换主题

  • 发送视频

  • 发送语音(仅移动端具备)

03 环境部署

Node.Js >= 15.0.0

Mysql >= 5.7.0 (仅mysql版本需要,但执行mysql文件需要8.0以上版本)

1. 下载项目

  • 前端

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

2. 启动项目

1)安装依赖

前、后端:npm install

2)mysql配置(json版本跳过)

打开网易新闻 查看更多图片

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

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

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

打开网易新闻 查看更多图片

  • 找到 config.js 文件

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

3)邮箱配置(json版本跳过)

  • 找到 config.js 文件

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

启动项目/服务

  • 后端

node app.js
  • 前端

npm run dev

到此,项目可以正常运行

05 界面截图

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

开源地址: https://gitee.com/howcode/has-chat

公众号“Java精选”所发表内容注明来源的,版权归原出无法查证版权的或者未注明出处的均来自网络,系转载,转载的目的在于传递更多信息,版权属于原作者。如有侵权,请联系,笔者会第一时间删除处理!

最近有很多人问,有没有技术或摸鱼交流群!加入方式很简单,公众号Java精选,回复“加群”,即可入群!在线摸鱼:https://www.yoodb.com/

Java精选面试题(微信小程序):3000+道面试题,包含Java基础、并发、JVM、线程、MQ系列、Redis、Spring系列、Elasticsearch、Docker、K8s、Flink、Spark、架构设计等,在线随时刷题!

特别推荐:专注分享最前沿的技术与资讯,为弯道超车做好准备及各种开源项目与高效率软件的公众号,「大咖笔记」,专注挖掘好东西,非常值得大家关注。点击下方公众号卡片关注

文章有帮助的话,点在看,转发吧!