Cells: shared counter

One counter for every visitor. Add a point here: other tabs receive it live, and the value remains available after reconnecting.

Try it in two tabs

Shared count

—

Connecting…

Open another tab

Keep both tabs visible, then click in either one. The other counter updates without reloading the page.

Note

Public pilot: this counter contains only demonstration data. All visitors share the same value. Adds are spaced at least 250 ms apart; eight simultaneous connections are available.

What runs

Each addition runs in a SQLite transaction. The WebSocket broadcast is released after the transaction commits. The client reads the count again when it detects missed events.

cells/client.ts + cells.tsTypeScript

import { cellClient } from "@bext-stack/framework/cells/client";

const counter = cellClient("Pilot", "pilot", {
  url: `wss://${location.host}/cells-pilot`, // Demo edge mount
  onMessage: render, // Initial snapshot on each connection
  onGap: () => refreshCount(),
});
counter.on("changed", render);
await counter.action("increment");

// Inside the cell's increment action:
// (The public demo also checks the fixed key and write cooldown.)
c.sql.exec("UPDATE counter SET n = n + 1 WHERE id = 1");
const { n } = c.sql.one("SELECT n FROM counter WHERE id = 1");
c.broadcast("changed", { n }); // Delivered after commit
return { n };