feature/websocket history

[Yuwen-ctw]

Why need this change? / Root cause:

• Imporve development efficiency
  

Changes made:

• commit 1
  • Add <WsHistoryItem> component and its svgs
  • Modify <ApiHistoryList> component to apply <WsHistoryItem>
  • Add new addWsHistory function in ApiHistoryPorvider
  • Apply addWsHistory in ChatRoomProvider
• commit 2
  • Rename files and variables

Test Scope / Change impact:

Issue

• Feat: API History 也能接 websocket response - 5 #242

補充

此 PR 分兩個提交：
第一個提交是依照現行 Socket.IO 版本實作出可以紀錄連線、發送與接收訊息的功能。
第二個提交則僅修改原本前綴為 ApiHistory 的檔案名稱與變數名稱，調整為較通用的 Hitory，並刪除原本的 ws 套件。

Review 時，可優先審閱第一個提交，方便釐清為開發本功能而修改的部分。
以上說明，謝謝！

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
game-lobby-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 11:50am

[ttpss930141011]

Hello @Yuwen-ctw ,

在這次 PR 中你在原有的 ApiHistoryProvider 改寫為 HistoryProvider 並在其中擴充了 WS 事件，並將現有有 emit 的地方封裝成 Function 利於做 addWsHistory，其實我也覺得封裝起來比較好，未來 emit 事件多了之後也可以明確定義回來的 datatype 長怎樣，例如：

type EventDataTypes = {
    join_room: joinRoomDatatype
    broadcast: broadcastDatatype;
    private_message: private_messageDatatype;
};
...
emit: <T extends keyof EventDataTypes>(event: T, data: EventDataTypes [T]) => void;
...

功能上實測是沒有問題的！對於在補充提到的，

接收 socket 訊息時，如果要加到 wsHistory 紀錄裡，必須於監聽該事件名稱的地方主動呼叫 addWsHistory 函式進行記錄 (例如現行的 ChatroomProvider.tsx 第 30 行)

這邊或許可以在 SockeyProvider 中使用 socket.onAny(callback)，如此一來就能在 Provider 進行 addWsHistory，看起來比較乾淨。
以下是 SocketProvider 增加 onAny 後的 code:

// containers\provider\SocketProvider.tsx
const connect = useCallback(() => {
     ...
   const newSocket = io(internalEndpoint, config);

   newSocket
     .on(SOCKET_EVENT.CONNECT, () => {
       setSocket(newSocket);
       addWsHistory({
         type: WebSocketHistoryType.CONNECTION,
         event: "CONNECT",
         message: "",
       });
     })
     .on(SOCKET_EVENT.DISCONNECT, () => {
       addWsHistory({
         type: WebSocketHistoryType.CONNECTION,
         event: "DISCONNECT",
         message: "",
       });
       setSocket(null);
     })
     .onAny((event: keyof typeof SOCKET_EVENT, data) => {
       addWsHistory({
         type: WebSocketHistoryType.RECEIVE,
         event,
         message: data,
       });
     });
 }, [socket, addWsHistory]);

最後，我想要考慮與預防的點有以下兩點：

1. onAny 是否會接到我們自定義以外的 Event，新增我們不在意的 Event 到 addWsHistory
2. onAny 是否要對於 connect 與 disconnect 的事件做排除，以免重複 addWsHistory

這邊我就沒有多加測試了，謝謝！

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[GaaSBot]

✅ Knip Scan Result for 0fd29ed

Unused files (10)

Unused files (10)
.bundlewatch.config.js
components/shared/Chat/ChatContent.tsx
components/shared/Chat/ChatMessage.tsx
components/shared/Chat/index.tsx
components/shared/Icon/group/news.tsx
configs/i18nConfigs.ts
lighthouserc.js
reset.d.ts
scripts/knipScanReporter.js
scripts/lhciScanReporter.js

Unused dependencies (2)

Unused dependencies (2)
@svgr/webpack package.json
sharp package.json

Unused devDependencies (5)

Unused devDependencies (5)
@actions/github package.json
@octokit/core package.json
@storybook/blocks package.json
@storybook/testing-library package.json
@total-typescript/ts-reset package.json

Configuration issues (1)

Configuration issues (1)
Unused item in ignoreDependencies: @next/bundle-analyzer

[GaaSBot]

🤖 Lighthouse Scan Result for 0fd29ed

/rooms

Metric	Value
Performance	66
Seo	80
Accessibility	79
HTML Report for LHCI Scan	Report Link

/rooms/abc

Metric	Value
Performance	75
Seo	80
Accessibility	69
HTML Report for LHCI Scan	Report Link

/login

Metric	Value
Performance	50
Seo	80
Accessibility	97
HTML Report for LHCI Scan	Report Link

[Yuwen-ctw]

Hello @ttpss930141011 ，
感謝提供解方，這次的異動改直接使用 socket.onAny 及 socket.onAnyOutgoing 兩監聽器來自動新增接收與發送的 wsHistory 紀錄，因此也沒有再將 emit 封裝出去了，未來針對收發的 datatype 依然可以實作於上述監聽器中。

而有關於兩點提到的疑慮，針對第一點個人的想法是，API 與 WebSocket 的歷史紀錄功能目前都僅用於開發模式，因此監聽所有事件也有利於觀察開發時是否有意料之外的狀況；另一個觀點是，我們應該可以相信後端不會發送前端不在意的事件過來，如果有發生此狀況也有利於即早發現並探究原因。而針對第二點，目前觀察下來 connect 與 disconnect 是不會被 socket.onAny 監聽到的。

以上說明，可以再討論，感謝！