聊天網站

---

• 前端：ReactJS + Sass
• 後端：Node.js, ExpressJS, Socket.io, Redis, PostgreSQL
• 其它：Chakra UI (ui 套件), Framer Motion (動畫), Formik (表單驗證)

一個用 ReactJS 打造的聊天室網站，並且使用 Socket.IO 以及 Redis。

功能

• 使用者註冊／登入
• 個人檔案 (頭像、自介等)
• 加好友、創建群主
• 即時訊息、好友上線狀態
• 傳送圖片、表情符號、圖片嵌入 (image embed)
• 自訂主題顏色、黑暗糢式
• login session (維持登入狀態)

快速開始

須先安裝Docker

docker compose up --build

實作細節

帳號管理

• 用戶帳號資料存儲於 PostgreSQL，包括：
  • 用戶 ID
  • 名稱
  • 密碼 hash
  • 頭像
  • 個人簡介
• 登錄時，使用 express-session + Redis 儲存 session，使用戶可在一週內免重新登入。

訊息傳輸

• 訊息透過 socket.io 即時廣播給其他用戶。
• 高讀取率資料存入 Redis，像是訊息、登入 session 等。

群組與好友

• 群組及好友關係數據存儲於 Redis，提高存取效能。
• PostgreSQL 主要用於存儲帳號資料。

前端開發

• 使用 Chakra UI 套件。
• 使用 Framer Motion 動畫套件，例如：
  • 載入畫面的 Logo 動畫
  • 新訊息彈跳動畫

截圖區