比较完整好看的基于Vue3+Socket.IO的极简聊天应用

源码资源网

比较完整好看的基于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.0Mysql >= 5.7.0 (仅mysql版本需要)启动项目安装依赖

前、后端

npm installmysql配置（json版本跳过）

• 在mysql的版本中，找到目录store下的sql文件，运行sql文件
• 依次运行两个sql文件，并且刷新数据库表就可看到了
• 找到config.js文件
  

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

更多配置查看：nodejs-mysql

邮箱配置（json版本跳过）

• 找到config.js文件
  

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

详情使用可以查看该文章：nodejs发送邮箱信息

启动项目/服务

• 后端
  

node app.js

• 前端
  

npm run dev

到此，项目可以正常运行

比较完整好看的基于Vue3+Socket.IO的极简聊天应用

链接：https://pan.baidu.com/s/1Aa9_DknqiSablyYIVSTG9A
附件下载：

文件名称:提取码下载.txt 
下载次数:1  文件大小:17 Bytes  售价:39金钱 [记录]
下载权限: 不限 [购买VIP]   [充值]   [在线充值]   【VIP会员5折；永久VIP免费】

安全检测，请放心下载