用 Durable Objects 管理強一致狀態

// The Durable Object: one instance holds and mutates the count
export class Counter {
  constructor(state, env) {
    this.state = state; // gives access to this object's private storage
    this.env = env;
  }

  async fetch(req) {
    // Read the current value from THIS object's own storage (0 if unset)
    let v = (await this.state.storage.get('v')) || 0;
    v++;
    // Persist before responding; the next request will read this value
    await this.state.storage.put('v', v);
    return new Response(v.toString(), {
      headers: { 'content-type': 'text/plain' }
    });
  }
}

// The Worker (front door): forward every request to the ONE instance
export default {
  async fetch(request, env) {
    // Same name -> same single instance, anywhere on Earth
    const id = env.COUNTER.idFromName('global');
    const stub = env.COUNTER.get(id);
    // Cloudflare routes this call to the real Counter object
    return stub.fetch(request);
  }
};

name = "counter-app"
main = "src/index.js"
compatibility_date = "2025-06-01"

# Bind the COUNTER namespace in env to the Counter class
[[durable_objects.bindings]]
name = "COUNTER"
class_name = "Counter"

# Register Counter as a new SQLite-backed Durable Object class
[[migrations]]
tag = "v1"
new_sqlite_classes = ["Counter"]

<button id="go">+1</button>
<span id="count">0</span>

<script>
  document.querySelector('#go').addEventListener('click', async () => {
    // Every click hits the ONE shared Counter behind the Worker
    const res = await fetch('https://counter-app.example.workers.dev/', {
      method: 'POST'
    });
    document.querySelector('#count').textContent = await res.text();
  });
</script>