連結: Campus project

專案概要

此專案為校園社群網站，為學生提供一個平台分享生活的點滴、交流意見和建立好友關係。

專案功能

• 貼文功能 ⇒ 上傳、分享、檢舉、留言、按讚、推播
• 1對1、1對多聊天、IM系統
• 會員即時動態
• 交友與探索陌生使用者

使用技術與工具

• 前端框架：vue3、nuxt3
• 其他相關技術：docker, pinia, socket.io, sass/scss

專案貢獻

• 紀錄學習相關log
• IM前台開發、後台優化與維運
• 貼文相關功能開發
• 使用者資料編輯、照片上傳管理

學習和困難

• 製作會員即時動態功能時，有遇到大量 socket event 進入時，造成網頁cpu滿載畫面卡頓的問題。 解決方式 : 原先協作的前端製作類似 queue 的佇列function，但問題在於event數量過大無法消耗，因此方法不可行。 後續由用後端使用 queue 的方式去減輕給前端的事件發送量，並在前端做閒置處理將無用的socket connection 關閉。
• 首頁動態原先使用的 lottie 動畫檔案過大以及DOM節點過多造成渲染速度過慢畫面卡幀與載入速度緩慢。 解決方式 : 使用動畫的部分使用 webp 檔，前端用svg圖層來做綁定與操控等等。