// 01 > CONTEXT
SkinBattle.gg 是一个《反恐精英》皮肤交易平台与在线博彩站。团队从零构建了它的游戏 —— Plinko、Mines、Cases、Battles、Crash 等 —— 通过 WebSockets 实现实时多人对战，承载最高 5k 并发用户。我负责前端，构建实时游戏界面与客户端状态。
// 02 > THE_PROBLEM
博彩平台必须让快速、带动画的游戏界面与实时服务器状态对成千上万的玩家保持完美同步，而每一局都关乎金钱。
像 Crash 和 Battles 这样的游戏每秒更新多次并实时结算。前端必须流畅地渲染这些更新、与服务器的结果保持一致，并在 5k 并发用户下不卡顿、不失步。
之前
从零构建的博彩游戏 · 实时结果 · 5k 并发玩家
// 03 > APPROACH
我围绕一个由 WebSocket 驱动的状态层构建游戏前端，在 Next.js 上使用 Redux Toolkit 和 Material UI，让每个游戏都保持流畅并与服务器的实时结果同步。
实时游戏界面
Plinko、Mines、Cases、Battles 和 Crash 由服务器事件驱动实时渲染，动画与结果之间不失步。
在规模下稳住的状态
单一的 Redux Toolkit store 干净地反映实时局面状态，在 5k 并发用户下保持响应。
Next.jsMaterial UIRedux ToolkitWebSockets
// 04 > THE_RESULT
一整套从零构建的博彩游戏，对最高 5k 并发玩家实时且同步。保密合作。
之前
- 从零构建的博彩游戏
- 实时、押注其上的结果
- 5k 并发玩家
之后
- Plinko、Mines、Cases、Battles、Crash，实时
- 流畅、同步的游戏界面
- 在 5k 并发下稳住
“博彩界面毫不容情：动画与服务器结果必须每一局都一致，对成千上万的玩家同时如此。那种同步就是全部活计。”