寫個即時聊天應用(React相關、PWA、Socket.io、Node(Koa2, TS)、MySQL)

前文： 以前寫的我的項目，分享一下，但願對有須要的人有幫助😄

ghChat(react版)

除了各類聊天功能，還支持github受權登陸，和展現github用戶公開的信息，而後能夠方便地在ghChat中爲本身的github項目建個項目交流羣，貼羣連接到readme中，方便本身在使用github時即時交流。以後有時間的話會多作一些跟github的集成。

地址

github項目地址。以爲還不錯的能夠慷慨地star下😄

應用線上地址(也是項目的羣連接)，支持直接github受權登陸

技術棧

前端React全家桶，後端node.js(koa2)和寫了點TS, 數據庫MySQL, 雙向通訊SocKet.io, jwt鑑權等等。具體看package.json。有疑問的能夠加ghChat羣交流哦，我天天都在線，也能夠私聊我，點擊加我

項目展現：

以前某個時間的大部分功能的截圖，其餘功能和新功能直接線上體驗。

建議開啓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] 發圖
  • [x] 發表情
  • [x] 發文件
  • [x] 下載文件
  • [x] Enter快捷鍵發送信息,發送按鈕灰亮
  • [x] @某人
  • [x] 圖片放大查看
  • [x] 發送copy的圖片(如截圖後粘貼可直接發圖)
  • [x] 分享羣|聯繫人給其餘的人|羣（應用內|外都支持）
  • [ ] 提供在線表情庫
  • [ ] 支持Markdown
  • [ ] 支持Quote

• 新消息提示

  • [x] 瀏覽器桌面通知（生產環境下，使用chrome的桌面通知須要你的網站是HTTPS的）
  • [x] 列表未讀消息數目提示
  • [x] 刷新/重開/(不一樣帳號)重登頁面，列表未讀消息的數目將仍然且準確顯示

• 不斷的重構和性能優化

  • [x] gzip 壓縮
  • [x] 聊天內容懶加載，每次獲取20條數據
  • [x] 路由按需加載
  • [x] 接口請求頻率限制
  • [ ] css文件單獨打包
  • [ ] sql優化

• 其餘

  • [x] 機器人智能聊天回覆
  • [x] 部署SSL證書
  • [x] 支持PWA
  • [x] 後端用TS重寫
  • [ ] 後端封裝成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.config.js //生產相關的webpack配置
└── webpack.dev.config.js //開發相關的webpack配置

本地開發

1. 項目拉到本地

git clone https://github.com/aermin/ghChat.git

1. 下載前端的npm包

cd ghChat

npm i

1. 下載後端的npm包

cd ghChat/server

npm i

1. 初始化數據庫

//須要先在本地建一個名爲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)填充相應的配置了，不然默認沒法使用

1. 跑起前端和後端的代碼

npm run start

cd ..      // 返回到ghChat/目錄

npm run start

生產環境使用

前提：建立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: ''
  }
};

1.build前端代碼

cd src
npm run build:prod

2.build後端代碼

cd sever
npm run build:prod

1. 把步驟1，2產生的文件夾(build, dist)放到你的服務器上, 把dist/index.js文件跑起來

(能夠把ghChat/package.json，ghChat/server/ecosystem.config.js 兩個文件一併拷到到你的服務器上，而後執行npm run start:prod)

文檔

這邊開坑了一篇ghChat開發歷程 ，將不斷地更新總結作這個全棧項目時會遇到的問題，知識點，和坑。

License

MIT