之所以叫ghChat,是想着以后做一些GitHub的集成,希望让这个即时通讯工具成为chat tool for github.
目前只支持github授权登录,和展示github用户公开的信息。
github对gif图有限制,我就直接截图了,具体详情建议直接线上体验。给个star呀~
github项目地址。慷慨地给个star呀~
欢迎加入 "ghChat项目交流群" 这个群交流呀,可搜索群名(不用全打)加入,也可点击机器人的邀请加入(如下图)
前端React全家桶,后端node.js(koa2), 数据库MySQL, 双向通信SocKet.io, jwt鉴权等等。具体看package.json哦。
- 项目拉到本地
git clone https://github.com/aermin/react-chat.git
- 在react-chat文件夹下创建一个secret.js的空白文件。
如果要使用github授权登录,使用七牛云cdn,生产环境数据库和jwt的secret的单独配置,就要填充相应的配置了。
module.exports = {
client_secret: '', // github授权登录需要的 github-> settings -> Developer settings 那边生成获取
db: {
host: '', // 数据库IP
port: , // 数据库端口
database: '', // 数据库名称
user: '', // 数据库用户名
password: '', // 数据库密码
},
secretValue: '', // json web token 的 secret
qiniu: { // 七牛云配置
accessKey: '',
secretKey: '',
bucket: ''
}
};
- 下载前端的npm包
cd react-chat
npm i
- 下载后端的npm包
cd cd react-chat/server
npm i
- 初始化数据库
//需要先在本地建一个名为ghchat的mysql数据库
配置如下看react-chat/server/config.js
npm run init_sql //然后查看下数据库是否init成功
- 跑起前端后后端的代码
npm run start
cd .. // 返回到react-chat/目录
npm run start
ps: 本地发表情和发文件和github登录无法使用,需要自己去github和七牛云申请一些东西
如果有新同学想通过此项目学习的,可以看下我写的ghChat开发历程 哦,将不断地更新总结做这个全栈项目时会遇到的问题,知识点,和坑。
-
账户
- 登录
- 注册
- 支持github授权登录
- 退出登录
-
UI
- 弹窗,提示等基础组件
- 响应式布局。以前的实现只是移动端的布局。
-
私聊
- 私聊(外加重要的重构):始化时请求聊天列表所有聊天对象的聊天记录(后期将请求聊天记录的限制为20条聊天内容,避免初始化时间过长),接着根据点击列表导致chatId(取自url params)的改变,重新渲染新的聊天内容。以前vue-chat的实现方式是点击进入每个聊天页面都会发1至多次请求然后渲染页面,性能较差
- 添加联系人: 搜索到该用户并发送信息后即记录为好友(关系存DB),会展示在双方的聊天列表
- 好友资料展示
- 删除联系人
-
群聊
- 群聊 && 重构: 本来是根据消息列表上的群和好友去遍历发HTTP请求拿数据,现在直接在后端整合好一次性用websocket发过来,减少请求次数且websocket在此情况性能更优一些; 完成群聊功能
- 建群
- 加群:搜索到该群并点击,会看到当前时间前的聊天记录,点加入按钮后即成功加入群(关系存DB),开始受到群消息的广播,并且群会展示在聊天列表
- 群资料展示
- 退群:退群后聊天列表不再展示该群(DB中删除该关系)
- 编辑群资料
-
查询
- 用户搜索&&群搜索: 支持前端模糊搜索和后端模糊搜索
- 支持聊天记录查询
-
丰富聊天方式
- 聊天页表: 实时按时间降序展示联系过的人和加入的群
- 发图
- 发表情
- 发文件
- 下载文件
- 支持Markdown
- 支持Quote
-
新消息提示
- 浏览器桌面通知(生产环境下,使用chrome的桌面通知需要你的网站是HTTPS的)
- 列表未读数字提示
-
不断的重构和性能优化
- 聊天内容懒加载,每次先获取20条数据
- 组件粒度更细
- sql优化
-
其他
- 机器人智能聊天回复
- 部署SSL证书
- 支持PWA
- 后端用TS重写,封装成sdk
- CI/CD