fix: socket couldn't disconnect during leaving or refreshing page

[ttpss930141011]

Why need this change? / Root cause:

• We didn't add disconnect action when page refresh or leave. It caused server will keep unuse socket connections.
• We didn't add reconnectionDelay in socket config. It caused backend developr feel hard when debugging.
• We didn't add autoConnect in socket config. It caused some unstable connections when we manually handle connect like us.

Changes made:

• Add beforeunload EventListener to handle refreshing or leaving state.
• Add reconnectionDelay & autoConnect in socket config.

Test Scope / Change impact:

Issue

• fix: socket couldn't disconnect during leaving or refreshing page #285

Note

原本這個分支是想用來試試看將 Socket 放進 Store 持久化，結果遇到兩個困難：

1. Zustand Store definition is pure JS. 無法在連接時 addWsHistory Event，硬要使用也是套一個 HOC，那我就用維持現狀就好啦

Ref: Zustand document , pmndrs/zustand#1308

2. 如 @Yuwen-ctw 所預期，出現了循環引用的問題：

Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor 'Socket' | property 'io' -> object with constructor 'Manager' | property 'nsps' -> object with constructor 'Object' --- property '/' closes the circle at JSON.stringify (<anonymous>)

剛好在找第一個困難的解答時看到了 Redux Q&A 裡有提到 Websocket 的實踐部分，提到 Socket 並不是 serializable，所以不應成為狀態，最好的位置在 Middleware

Ref: https://redux.js.org/faq/code-structure#where-should-websockets-and-other-persistent-connections-live

裡面還有提供其他人的實踐的 Middleware：

Ref: Redux Q&A, redux-ecosystem-links

Eventually

• make persistent web socket connection across page refresh 有可能會有些安全漏洞。(Ref: Stack overflow)
• 我們應該未來會實踐持久會話ID，如 Socket.IO 官方的範例中效果一樣。(Ref: Private messaging - Part II)

[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 21, 2023 7:42pm

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[GaaSBot]

✅ Knip Scan Result for 4737b30

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 4737b30

/rooms

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

/rooms/abc

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

/login

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

[Yuwen-ctw]

LGTM。
官方範例實作起來前端的部分好親民啊，好像可以朝這個方向前進，非常感謝分享！