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

Theo Blake — Wed, 28 Oct 2026 00:43:09 +0000

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:

The initial search radius restricts opponents within $\pm 50$ ELO points.
Every 2.5 seconds, the tolerance window monotonically expands by 25 points.
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

How We Built WikiMasters: A Real-Time Wikipedia Trading Card Game with TanStack Start & Cloudflare Workers

Theo Blake — Tue, 27 Oct 2026 13:31:58 +0000

Trading card games (TCGs) traditionally rely on static card catalogs manually designed and balanced by game developers. What if instead of pre-rendered static decks, your cards were generated dynamically from the collective human knowledge on Wikipedia?

That was the core idea behind WikiMasters (wikimasters.org). In this deep dive, we explore how we built the game architecture, our edge rendering pipeline, and why we chose TanStack Start, TanStack Router, and Cloudflare Workers.

1. Ingesting Wikipedia as a Real-Time Game Engine

Every card in WikiMasters represents a real Wikipedia article spanning History, Science, Geography, Technology, and Culture. To ensure high speed and fairness, we designed an algorithmic stat generator:

Popularity & Attack Power: Ingested from the Wikimedia Analytics REST API (30-day pageview velocity).
Defense & Historical Resilience: Derived from revision counts, editor diversity, and talk page consensus.
Card Synergy: Calculated from Wikipedia internal link density and category hierarchy.

// Edge Normalization Example
export function computeCardBattleRating(pageviews: number, internalLinks: number, wordCount: number) {
  const attack = Math.min(999, Math.round(Math.log10(pageviews + 10) * 120));
  const defense = Math.min(999, Math.round(Math.log10(internalLinks + 5) * 110));
  const hp = Math.min(1500, Math.round(Math.sqrt(wordCount) * 8));
  return { attack, defense, hp };
}

2. Full-Stack Edge Architecture with TanStack Start

We chose TanStack Start coupled with Cloudflare Workers for three key reasons:

Sub-30ms Edge Rendering: Card lookups and OpenGraph preview cards render directly at the Cloudflare edge close to the player.
Type-Safe Routing: Game lobbies, deck builder filters, and battle rooms are completely type-safe from server loaders to client components.
Low Latency Dynamic Metadata: Social share cards dynamically pull Wikipedia thumbnail assets and render responsive card previews in real time.

3. Open Source & Getting Involved

The source code and developer documentation for WikiMasters are open source:

🌐 Live Web Game: https://wikimasters.org
📦 GitHub Repository: https://github.com/tik568/wikimasters-game
📖 Architecture Spec: WikiMasters Gist Specification

We welcome any feedback from the developer community on edge state synchronization, deck building algorithms, and game balancing!

DEV Community: Theo Blake