Feat(infra): websocket - 8

[Parkerhiphop]

DoD

1. 從 ws 改用 Socket.io
2. 解耦 websocket 與 chatroom
3. /api Mock socket server

[ttpss930141011]

@arealclimber @JohnsonMao 兩位好，我前陣子對於 Socket.io 很感興趣，所以用了一段時間自行實作，也踩了不少在 Next.js 13.4 版的 Socket.io 的小坑，舉例如下：

• Socket.IO Not working anymore from Next.js 13.2.5
• Next.js appDir can't compile @web3-react/core and @ethersproject/providers dependencies

因此，我已經建立了一個小 chat demo 以方便閱讀，希望能幫助這個 ticket 加快進度且減輕難度。
比較抱歉的是由於我今日已經沒有多餘時間完善文檔，請原諒我並無對 repo 內的程式碼多做解釋，近日有時間會逐漸加入。

這個 demo 注意事項如下：

• 此 repo 內實作了一個十分簡易的 socket server 作為 backend server，以涵蓋開發與生產場景
• 若啟用方式為 npm run dev 則會將 socket 請求打至 nextjs mock server， npm run prod 則是 backend server
• 此 demo 由使用 app router，但 mock api 依然是在 pages folder 內實作
• 此 demo 使用了一個十分輕量簡單的 state management tool Zustand 去管理 socket (我覺得蠻好用的，也可以自由讓開發者設定哪個 component 需監聽哪個 event，詳情請見：frontend\src\app\home\page.tsx line: 46
• nextjs mock server 在接取 socket request 的方法與一般 backend 不同，可以在 repo內的 frontend\src\pages\api\socket\ 了解更多資訊
• 原因同上，client emit 時方法也會不同，詳情請見 frontend\src\store\socket.ts

以上，如果兩位有其他想法的話歡迎提出討論！感激不盡！

[arealclimber]

感謝 @ttpss930141011 提供 demo，受益良多。

發現 demo 無法統一從 socket 拿到訊息並渲染，想提個建議

在./src/app/home/page.tsx，將 34 行 setMessages([...messages, message]); 註解起來，在 46 行 socket?.on
裡面 setMessages([...messages, data]);

這樣就能顯示別人傳的訊息，會更直覺一點；但原本 demo 已經很完整了，感謝幫忙加速進度。