Cells : compteur partagé

Un même compteur pour tous les visiteurs. Ajoutez un point ici : les autres onglets le reçoivent en direct, et la valeur reste disponible après une reconnexion.

Essayez à deux onglets

Compteur partagé

—

Connexion…

Ouvrir un autre onglet

Gardez les deux onglets visibles, puis cliquez dans l’un d’eux. Le compteur de l’autre se met à jour sans recharger la page.

Note

Pilote public : ce compteur contient uniquement des données de démonstration. Tous les visiteurs partagent la même valeur. Les ajouts sont espacés d’au moins 250 ms ; huit connexions simultanées sont disponibles.

Ce qui s’exécute

Chaque ajout s’exécute dans une transaction SQLite. La diffusion WebSocket part après la validation de la transaction. Le client relit la valeur lorsqu’il détecte des événements manqués.

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 };