1 Star 0 Fork 67

WangHost / HasChatApp

forked from howcode / HasChatApp 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 7.80 KB
一键复制 编辑 原始数据 按行查看 历史
howcode 提交于 2023-01-09 15:37 . update:文档说明

HasChat

基于uni-app+socket.io的聊天应用

star  fork  

无偿开源!你们的Star是我的动力!

介绍

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

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

预览图

PC端

PC端

移动端

在线预览

haschat-PC端

haschat-移动端

功能一览

  • 登陆、随机获取用户登陆
  • 发送邮箱验证码注册
  • 发送表情+文字组合的富文本内容
  • 发送图片内容,查看大图
  • enter发送信息,enter+ctrl换行输入内容
  • 消息提醒
  • 未读消息标记
  • 记录历史会话
  • 记录历史聊天内容
  • 切换主题
  • 发送视频
  • 发送语音(仅移动端具备)
  • 社区发帖、点赞、评论、回复

版本说明

  • 前端:暂无版本区别
  • 后端:分为mysql版本(分支main)和json版本(分支master);json版本主要是为了不懂mysql的新手学习;

环境部署

Node.Js >= 15.0.0
Mysql >= 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 install

mysql配置(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

到此,项目可以正常运行

教程

本地构建 HasChat 项目

宝塔部署 HasChat 项目

项目目录

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                         // 页面

重大升级日志

  • 2022.12.14 原先的历史会话使用user表的HistorySessionList字段记录,但随着用户量的提升,这种方式的弊端越来越明显,严重影响了查询性能,故新建history_session表来记录用户的历史会话记录,如果需要将会话历史会话记录迁移到新表,使用/api/changeHistorySession接口来迁移数据
  • 2022.12.14 原先的会话列表内容在 socket 的joinSuccess方法返回,但这种方式随着数据量的增多,导致进程严重阻塞,故单独改成/api/getContentBySendId接口分页调用

免责声明

一、本项目宗旨在于为广大的正在学习通讯方面的新手提供学习、思路

二、本项目资源全部免费分享,包括前端源码、后端转源码等。本项目不会利用任何资源进行任何的销售盈利活动。

三、任何情况下,因使用本项目进行违法犯罪的行为,本人不承担任何法律责任。

未来计划

  • 发送视频功能(已完成)
  • 发送语音功能(已完成)
  • uni-app 开发混合 app/h5/小程序版本(已完成)
  • 将历史会话接口改成分页查询提高查询速度(已完成)
  • 将会话消息改成单独接口调用(已完成)
  • 群聊功能

😊 捐助作者

👍👍👍👍👍👍 您的捐助和赞赏,将会是作者howcode更好的维护动力!
JavaScript
1
https://gitee.com/wanghost/has-chat-app.git
git@gitee.com:wanghost/has-chat-app.git
wanghost
has-chat-app
HasChatApp
master

搜索帮助