寫個即時聊天應用(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