在1MB以下实现实时体育场管理仪表盘的工程设计

Source: Dev.to

介绍

你是否曾在大型体育赛事中，观看完上半场后，整个 15 分钟的中场休息都在排队等厕所或汉堡？

这就是现场活动体验中无处不在的 “等待时间困境”。在满员时，观众自然会涌向最近的设施，却不知道相邻的同类设施根本空闲。如果我们能够实时地数学化重新分配人群，全球的等待时间将会大幅下降？

在 Promptwars 2026 中，我通过打造 Stadium Control Center——一个在极端约束下设计的超高速实时场馆同步平台，来应对这一挑战。

强加的约束：保持在 1 MB 以下

在现代 Web 开发中，发布仪表盘通常需要下载庞大的 JavaScript 包（React、Angular、Tailwind）。我们完全逆流而上：

• 零框架 – 纯原生 JS 与原始 CSS Grid。
• 零图片资源 – 完全使用内联 SVG 矢量图和数学几何绘制 UI。
• 零 HTTP 轮询开销。

架构：通过 WebSocket 同步状态

我们没有每隔几秒盲目调用 REST API，而是使用 FastAPI（Python）在后端构建了纯粹的 WebSocket 管道。它充当我们的实时状态引擎。

1. 授权用户或众包参与者输入更新的等待时间。
2. 后端立即修改状态映射。
3. JSON 更新被广播到场馆内的每个活跃屏幕，确保真正的零延迟更新。

“智能路线”引擎

仅有数据可视化还不够；我们需要让它可操作。该引擎完全在浏览器中运行：

• 如果某设施的排队时间超过 15 分钟，则触发 “红色” 阈值。
• 引擎分析周围等价的设施（例如，将北门与南门进行匹配）。
• 当找到替代方案时，计算地理距离并显示 智能助手 横幅：

“小贴士：北侧美食广场正处高峰。我们找到了通往西区的更短路径——可节省 15 分钟！”

包容性路径（ADA）

流量路由并非“一刀切”。我们集成了实体 ♿ ADA 开关。开启后，路径寻找逻辑会对实际步行时间乘以惩罚系数（1.2×），确保所有推荐路线在实际使用中都可达。

由比赛事件驱动的仿真

为了演示产品，Python 后端运行一个 5× 速度（场馆时间）的异步后台时间循环。它解析 比赛日程，当比赛临近半场时，仿真循环会将餐饮、入口和厕所流量激增 40 %，动态触发集群中的自然瓶颈行为。这让我们能够实时观察预测趋势指示器（↑/↓）的即时响应。

结论

构建高性能界面并不一定需要庞大的包体。该项目展示了只要采用合适规模的架构——用原始 WebSocket 管道和原生技术取代沉重抽象，就能在浏览器中直接交付顶级的物理世界解决方案。