GitAds
English | ç®€ä½“ä¸æ–‡
ghChat(react版)
之所以å?«ghChat,是想ç?€ä»¥å?Žå?šä¸€äº›GitHub的集æˆ?,希望让这个å?³æ—¶é€šè®¯å·¥å…·æˆ?为chat tool for github。目å‰?å?ªæ”¯æŒ?github授æ?ƒç™»å½•,和展示github用户公开的信æ?¯ï¼Œç„¶å?Žå?¯ä»¥æ–¹ä¾¿åœ°åœ¨ghChatä¸ä¸ºè‡ªå·±çš„github项目建个项目群,然å?Žè´´ç¾¤é“¾æŽ¥åˆ°readmeä¸ï¼Œæ–¹ä¾¿é¡¹ç›®å?³æ—¶äº¤æµ?。
应用线上地�(也是项目的群链接),支�直接github授�登录
倘若github登录失败
æŠ€æœ¯æ ˆ
å‰?端React全家桶,PWA,å?Žç«¯node.js(koa2),å?Žç«¯æ”¯æŒ?并写了点TS(大多类型还没补 T^T) , æ•°æ?®åº“MySQL, SocKetIO, JWTç‰ç‰ï¼Œå…·ä½“看package.json。å?¦å¤–生产环境用了Nginx, SSL, Pm2ç‰ã€‚æ¬¢è¿ŽåŠ ghChat群交æµ?哦,我æ¯?天都在线,也å?¯ä»¥ç‚¹å‡»ç§?è?Šæˆ‘
详细的项目展示图
目�进度
点开查看
- 账户
登录/ 注册/ 退出登录/ 多设备�时登录
- 对github的集�
支�github授�登录/ 展示github用户公开的信�
- UI
�应�布局, 适�桌�端和移动端/ 大部分UI组件自己写
- ç§?è?Š
ç§?è?Š/ æ·»åŠ è?”系人/好å?‹èµ„料展示/ åˆ é™¤è?”系人
- 群�
群è?Š/ 建群/ åŠ ç¾¤/ 群资料展示/ 退群/ 编辑群资料/ 新人进群通知
- 查询
用户�索&&群�索: 支��端模糊�索和�端模糊�索
- 丰富�天方�
å?‘图/ å?‘表情/ å?‘文件/ 下载文件/ Enterå¿«æ?·é”®å?‘é€?ä¿¡æ?¯/ @æŸ?人/ 图片查看/ å?‘é€?copy的图片(如截图å?Žç²˜è´´å?¯ç›´æŽ¥å?‘图)/ æ ¹æ?®æ—¶é—´é™?åº?展示è?Šå¤©é¡µè¡¨/ 分享群|è?”系人给其他的人|群(应用内|外都支æŒ?)
- 新消æ?¯æ??示
æµ?览器桌é?¢é€šçŸ¥/ 消æ?¯æ˜¯å?¦æ??示的开关设置/ 列表未读消æ?¯æ•°ç›®æ??示/ 刷新|é‡?å¼€|(ä¸?å?Œè´¦å?·)é‡?登页é?¢ï¼Œåˆ—表未读消æ?¯çš„æ•°ç›®å°†ä»?然且准确显示
- ä¸?æ–çš„é‡?构和优化
gzip 压缩/ 分包build文件/ è?Šå¤©å†…å®¹æ‡’åŠ è½½/ è·¯ç”±æŒ‰éœ€åŠ è½½/ 接å?£è¯·æ±‚频率é™?制/ WebSocket管ç?†æœºåˆ¶
- å…¶ä»–
机器人智能�天回�/ 部署SSL�书/ 支�PWA/ �端支�TS
- TODO
支�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
- 下载�端的npm包
cd ghChat
npm i
- 下载�端的npm包
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
- 把æ¥éª¤1,2产生的文件夹(build, dist)æ”¾åˆ°ä½ çš„æœ?务器上, 把dist/index.js文件跑起æ?¥
(å?¯ä»¥æŠŠghChat/server/package.json ä¸€å¹¶æ‹·åˆ°åˆ°ä½ çš„æœ?务器上,然å?Žæ‰§è¡Œ
npm run start:prod)
这边开å?‘了一篇ghChatå¼€å?‘历程 ,将ä¸?æ–地更新总结å?šè¿™ä¸ªå…¨æ ˆé¡¹ç›®æ—¶ä¼šé?‡åˆ°çš„问题,知识点,和å?‘。
License
ç ?代ç ?ä¸?易,引用借鉴请注明出处
Contributors
最�
å¯¹ä½ æœ‰å¸®åŠ©æˆ–è€…è§‰å¾—è¿˜ä¸?é”™å?¯ä»¥star或者打èµ?下(〃'â–½'〃)







