GitAds

English | 簡體中文
之所以叫ghChat,是想著以後做一些GitHub的集成,希望讓這個即時通訊工具成為chat tool for github。目前只支持github授權登錄,和展示github用戶公開的信息,然後可以方便地在ghChat中為自己的github項目建個項目群,然後貼群鏈接到readme中,方便項目即時交流。
應用線上地址(也是項目的群鏈接),支持直接github授權登錄
倘若github登錄失敗
很可能是你的github沒有設置public的email

建議開啟PWA
前端React全家桶,PWA,後端node.js(koa2),後端支持並寫了點TS(大多類型還沒補T^T) , 數據庫MySQL, SocKetIO, JWT等等,具體看package.json。另外生產環境用了Nginx, SSL, Pm2等。歡迎加ghChat群交流哦,我每天都在線,也可以點擊私聊我





登錄/ 註冊/ 退出登錄/ 多設備同時登錄
支持github授權登錄/ 展示github用戶公開的信息
響應式佈局, 適配桌面端和移動端/ 大部分UI組件自己寫
私聊/ 添加聯繫人/好友資料展示/ 刪除聯繫人
群聊/ 建群/ 加群/ 群資料展示/ 退群/ 編輯群資料/ 新人進群通知
用戶搜索&&群搜索: 支持前端模糊搜索和後端模糊搜索
發圖/ 發表情/ 發文件/ 下載文件/ Enter快捷鍵發送信息/ @某人/ 圖片查看/ 發送copy的圖片(如截圖後粘貼可直接發圖)/ 根據時間降序展示聊天頁表/ 分享群|聯繫人給其他的人|群(應用內|外都支持)
瀏覽器桌面通知/ 消息是否提示的開關設置/ 列表未讀消息數目提示/ 刷新|重開|(不同賬號)重登頁面,列表未讀消息的數目將仍然且準確顯示
gzip 壓縮/ 分包build文件/ 聊天內容懶加載/ 路由按需加載/ 接口請求頻率限制/ WebSocket管理機制
機器人智能聊天回复/ 部署SSL證書/ 支持PWA/ 後端支持TS
支持Markdown/ 支持引用聊天內容/ 後端封裝成sdk/ 國際化/ CI CD
├── LICENSE
├── README-zh_CN.md
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── server // 后端代码
│ ├── ecosystem.config.js
│ ├── init // 初始化mysql数据库的脚本
│ ├── nodemon.json
│ ├── package-lock.json
│ ├── package.json
│ ├── secrets.ts // 放一些非公开的secret
│ ├── src
│ ├── app
│ ├── context
| ├── controllers
| ├── index.ts
| ├── middlewares
| ├── routes // 后端路由,跟登录注册模块有关
| ├── server.ts
| ├── services
| ├── socket // 除了登录注册,其他都用socket 来通信
| └── utils
| ├── configs
| ├── configs.common.ts // 后端通用配置
| ├── configs.dev.ts // 后端开发配置
| └── configs.prod.ts // 后端生产配置
└── main.ts
│ ├── tsconfig.json
│ ├── tslint.json
│ └── webpack.config.js
├── src // 前端代码
│ ├── App.js
│ ├── app.scss
│ ├── assets
│ ├── components
│ ├── containers
│ ├── index.html
│ ├── index.js
│ ├── manifest.json // PWA需要
│ ├── modules
│ ├── redux
│ ├── router
│ ├── service-worker.js // PWA需要
│ └── utils
├── webpack.common.config.js // 通用webpack设置
├── webpack.prod.config.js //生产相关的webpack配置
└── webpack.dev.config.js //开发相关的webpack配置
git clone https://github.com/aermin/ghChat.git
cd ghChat
npm i
cd ghChat/server
npm i
//需要先在本地建一个名为ghchat的mysql数据库
数据库配置参考如下(ghChat/server/src/configs/configs.dev.ts) 的dbConnection
npm run init_sql //然后查看下数据库是否init成功
ps: 如果要使用github授權登錄,發圖片和發文件(使用七牛雲cdn),就要在文件(ghChat/server/src/configs/configs.dev.ts)填充相應的配置了,否則默認無法使用
npm run start
cd .. // 返回到ghChat/目录
npm run start
前提:在ghChat/server/ 文件夾下創建secrets.ts文件
export default {
port: '3000', // server 端口
dbConnection: {
host: '', // 数据库IP
port: 3306, // 数据库端口
database: 'ghchat', // 数据库名称
user: '', // 数据库用户名
password: '', // 数据库密码
},
client_secret: '', // github的client_secret
jwt_secret: '', // jwt的secret
qiniu: { // 七牛云cdn配置
accessKey: '',
secretKey: '',
bucket: ''
},
robot_key: '', // 机器人聊天用到的key => 请自己申请 http://www.tuling123.com/
};
1.build前端代碼
cd src
npm run build:prod
2.build後端代碼
cd sever
npm run build:prod
npm run start:prod )這邊開坑了一篇ghChat開發歷程,將不斷地更新總結做這個全棧項目時會遇到的問題,知識點,和坑。
MIT
碼代碼不易,引用借鑒請註明出處
對你有幫助或者覺得還不錯可以star或者打賞下(〃'▽'〃)