之所以叫ghChat，是想著以后做一些GitHub的集成饿肺，希望讓這個即時通訊工具成為chat tool for github蒋困。目前只支持github授權登錄，和展示github用戶公開的信息敬辣，然后可以方便地在ghChat中為自己的github項目建個項目群雪标，然后貼群鏈接到readme中，方便項目即時交流溉跃。
地址
github項目地址村刨。富應用型的開發(fā)很耗時間精力，覺得還不錯的麻煩給個star鼓勵下???
應用線上地址(也是項目的群鏈接)撰茎，支持直接github授權登錄
技術棧
前端React全家桶嵌牺，后端node.js(koa2), 數據庫MySQL, 雙向通信SocKet.io, jwt鑒權等等。具體看package.json。有疑問的可以加ghChat群交流哦逆粹，我每天都在線募疮，也可以私聊我，點擊加我
項目展示：
之前某個時間的大部分功能的截圖僻弹，其他功能和新功能直接線上體驗阿浓。
image.png
image.png
image
建議開啟PWA: 如何在chrome瀏覽器中開啟對PWA的支持
目前進度
-
賬戶
- [x] 登錄
- [x] 注冊
- [x] 退出登錄
- [x] 多設備同時登錄
-
對github的集成
- [x] 支持github授權登錄
- [x] 展示github用戶公開的信息
-
UI
- [x] 彈窗，提示等基礎組件
- [x] 響應式布局, 適配桌面端和移動端蹋绽。
-
私聊
- [x] 私聊
- [x] 添加聯系人
- [x] 好友資料展示
- [x] 刪除聯系人
-
群聊
- [x] 群聊
- [x] 建群
- [x] 加群
- [x] 群資料展示
- [x] 退群
- [x] 編輯群資料
- [x] 有人加入群時會有提示
-
查詢
- [x] 用戶搜索&&群搜索： 支持前端模糊搜索和后端模糊搜索
-
豐富聊天方式
- [x] 聊天頁表：實時按時間降序展示聯系過的人和加入的群
- [x] 發(fā)圖
- [x] 發(fā)表情
- [x] 發(fā)文件
- [x] 下載文件
- [x] Enter快捷鍵發(fā)送信息,發(fā)送按鈕灰亮
- [x] @某人
- [x] 圖片放大查看
- [x] 發(fā)送copy的圖片(如截圖后粘貼可直接發(fā)圖)
- [x] 分享群|聯系人給其他的人|群（應用內|外都支持）
- [ ] 提供在線表情庫
- [ ] 支持Markdown
- [ ] 支持Quote
-
新消息提示
- [x] 瀏覽器桌面通知（生產環(huán)境下芭毙，使用chrome的桌面通知需要你的網站是HTTPS的）
- [x] 列表未讀消息數目提示
- [x] 刷新/重開/(不同賬號)重登頁面，列表未讀消息的數目將仍然且準確顯示
-
不斷的重構和性能優(yōu)化
- [x] gzip 壓縮
- [x] 聊天內容懶加載卸耘，每次獲取20條數據
- [x] 路由按需加載
- [x] 接口請求頻率限制
- [ ] css文件單獨打包
- [ ] sql優(yōu)化
-
其他
- [x] 機器人智能聊天回復
- [x] 部署SSL證書
- [x] 支持PWA
- [ ] 國際化
- [ ] 后端用TS重寫退敦，封裝成sdk
- [ ] CI/CD
項目結構圖
├── LICENSE
├── README-zh_CN.md
├── README.md
├── build
├── package-lock.json
├── package.json
├── postcss.config.js
├── secret.js // 放一些非公開的secret
├── server // 后端代碼
│ ├── config.js
│ ├── controllers
│ ├── ecosystem.config.js // pm2加生產環(huán)境變量的配置文件
│ ├── gulpfile.js
│ ├── index.js
│ ├── init // 初始化mysql
│ ├── middlewares
│ ├── models
│ ├── package-lock.json
│ ├── package.json
│ ├── routes // 后端路由，跟登錄注冊模塊有關
│ ├── socket // 除了登錄注冊蚣抗，其他都用socket 來通信
│ ├── utils
│ └── yarn.lock
├── 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.config.js //生產相關的webpack配置
├── webpack.dev.config.js //開發(fā)相關的webpack配置
本地開發(fā)
- 項目拉到本地
git clone https://github.com/aermin/react-chat.git
- 在react-chat文件夾下創(chuàng)建一個secret.js的空白文件侈百。
如果要使用github授權登錄，使用七牛云cdn忠聚，生產環(huán)境數據庫和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: 本地發(fā)圖片和發(fā)文件和github登錄無法使用两蟀，需要自己去github和七牛云申請一些東西
文檔
這邊開坑了一篇ghChat開發(fā)歷程 网梢，將不斷地更新總結做這個全棧項目時會遇到的問題，知識點赂毯，和坑战虏。
