Architecting a High-Performance Real-Time Multiplayer Card Game on Cloudflare Workers & Durable Objects

Real-time browser multiplayer games have historically demanded complex Kubernetes statefulsets, dedicated WebSocket gateways, and costly Redis caching tiers. When engineering WikiMasters (wikimasters.org) — an open-source real-time trading card game built on Wikipedia articles — our core objective was achieving sub-50ms global action latency without managing a single persistent server container.

In this deep dive, we break down our edge architecture, Durable Objects room mesh, binary state delta compression, and client state reconciliation.

1. Global Edge Architecture Overview

WikiMasters is built on a serverless edge-native foundation:

• Application Framework: TanStack Start with React 19 Server Functions.
• Edge Runtime: Cloudflare Workers running across 300+ global edge POPs.
• Stateful Multiplayer Synchronization: Cloudflare Durable Objects managing game rooms and authoritative combat resolutions.
• Persistent Data Store: Cloudflare D1 distributed SQLite read replicas paired with write-leader consensus routing.
• Asset Transcoding: Dynamic Wikimedia Commons WebP/AVIF edge transformations with immutable cache headers.

Explore the live multiplayer game at WikiMasters (wikimasters.org).

2. Low-Latency WebSocket Room Mesh via Durable Objects

Rather than centralizing all multiplayer game rooms in a single AWS region, each WikiMasters game room is instantiated as an independent Durable Object in the data center closest to the room creator:

export class GameRoomDurableObject implements DurableObject {
  private state: DurableObjectState;
  private sessions: Map<WebSocket, PlayerSession> = new Map();
  private gameState: AuthoritativeGameState;

  constructor(state: DurableObjectState) {
    this.state = state;
    this.gameState = new AuthoritativeGameState();
  }

  async fetch(request: Request): Promise<Response> {
    const webSocketPair = new WebSocketPair();
    const [client, server] = Object.values(webSocketPair);

    this.state.acceptWebSocket(server);
    this.sessions.set(server, { playerId: crypto.randomUUID() });

    return new Response(null, { status: 101, webSocket: client });
  }

  async webSocketMessage(ws: WebSocket, message: ArrayBuffer | string) {
    const action = parseClientAction(message);
    const delta = this.gameState.applyAction(action);

    // Broadcast binary delta to all connected players
    for (const [socket] of this.sessions) {
      socket.send(delta);
    }
  }
}

3. High-Density Binary Delta Compression (CBOR)

Standard JSON state objects sent 60 times per second over mobile WebSockets waste bandwidth and trigger severe JavaScript Garbage Collection (GC) pauses. WikiMasters encodes turn diffs into compact binary frames:

• Header: 8-byte fixed-size binary preamble containing sequence counters, active player index, and remaining turn clock.
• Slot Bitmask: Single-byte bitwise mask flagging only the modified board slots.
• Payload Compression: 68% size reduction compared to minified JSON.

4. Fair Matchmaking with Monotonic ELO Radius Expansion

Finding balanced matches across global timezones requires dynamic matchmaking. When a player queues:

1. The initial search radius restricts opponents within $\pm 50$ ELO points.
2. Every 2.5 seconds, the tolerance window monotonically expands by 25 points.
3. Edge ticket locks prevent split-brain matches across concurrent match workers.

Conclusion & Playable Demo

By shifting server state into localized Durable Objects and streaming binary deltas over WebSockets, WikiMasters delivers a console-grade 60fps multiplayer card game entirely on the edge.

• 🎮 Play Online: WikiMasters Live (wikimasters.org)
• 💻 Open Source Repository: tik568/wikimasters-game
• 📑 Technical Specifications: WikiMasters Edge Architecture Gists