Wir sind das unabhängige Entwickler-Team hinter Wobbly Bottle.
In Part 1 haben wir das Konzept vorgestellt: Bei WG-Partys und Feiern hängen oft 10 Leute über einem einzigen 6-Zoll-Display. Mit Wobbly Bottle treten bis zu 15 Personen über einen 6-stelligen PIN-Code einem Raum bei – und die Flasche dreht sich synchron auf jedem einzelnen Handy.
Ein Leser auf Dev.to hat uns nach der Server-Autorität und Reconnect-Logik gefragt. Hier ist die detaillierte Architektur:
1. Warum "Jeden Frame streamen" fehlschlug
Unser erster Impuls: Wenn sich der Flaschenwinkel 60 Mal pro Sekunde ändert, senden wir den Winkel einfach per WebSocket an alle 14 anderen Handys.
Das Problem:
- Bandbreiten-Verschwendung: 60 Updates pro Sekunde an 14 Clients erzeugen massiven Traffic.
- Netzwerk-Jitter: Schwankende WLAN- oder 4G-Pings führen zu Rucklern und asynchronen Stopps.
- Akku & Hitze: Ältere Android-Geräte überhitzen bei hoher JSON-Dekodierungsrate.
2. Die Lösung: Event synchronisieren, lokal rendern
Statt Bildpunkte zu übertragen, sendet der Host beim Drehen eine einzige kompakte Nachricht:
{
"type": "spin_started",
"roundId": "round-42",
"initialAngle": 1.2,
"impulse": { "angularVelocity": 18.7 },
"startAt": 1730000000000
}
Jedes verbundene Gerät führt die identische physikalische Dämpfung in einem 60 FPS CustomPainter lokal aus:
const fixedStep = 1 / 60;
const damping = 0.985;
void onTick() {
angularVelocity *= damping;
angle += angularVelocity * fixedStep;
}
Da alle Handys mit demselben Startimpuls und derselben Reibungsformel rechnen, stoppt die Flasche auf jedem Display im Raum auf das exakt selbe Grad.
3. Reconnects: Snapshot statt Replay
Verliert ein Spieler kurz das Netz, spielen wir nicht mühsam alte Animationen nach. Der Client holt sich sofort einen State-Snapshot des Raums (wer ist dran, welche Karte liegt offen) und schaltet sich nahtlos wieder ein.
Top comments (0)