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或者打�?下(〃'â–½'〃)







