Realtime Sync

Walkthrough

1. 1

   Bump a version on every save

   A single page_versions row per slug; SELECT version, increment, UPSERT back. The version is the only "delta" the change feed needs — no per-event log, no Redis, no queue.

   PHP Copy

   $pdo->beginTransaction();
   $stmt = $pdo->prepare('SELECT version FROM page_versions WHERE slug = ?');
   $stmt->execute([$slug]);
   $next = ((int) $stmt->fetchColumn()) + 1;
   
   $pdo->prepare('INSERT INTO page_versions … ON CONFLICT(slug) DO UPDATE SET …')
       ->execute([$slug, $html, $data, $next]);
   $pdo->commit();

2. 2

   Poll the change feed

   Clients track the last-seen version in memory. Every ~2 s they GET changes.php?slug=…&since=N; if version > N, the response carries the fresh state. No state on the server, no per-client subscription, no fan-out logic.

   JavaScript Copy

   let lastVersion = 0;
   async function pollOnce() {
     const res = await fetch(
       '/examples/backend/4-realtime/changes.php?slug=' + slug +
       '&since=' + lastVersion);
     const json = await res.json();
     if (json.changed) {
       lastVersion = json.version;
       render(json.html);
     }
   }
   setInterval(pollOnce, 2000);

3. 3

   Try it — open this page in two tabs

   Edit text in one tab, click Save; the other tab's viewer updates within 2 s. The status badge shows the current version, last-update timestamp, and connection state. The form is pure PHP behind it — no library, no compile step.

4. 4

   Swap polling for WebSockets

   Polling is the transport you control end-to-end. For production scale, replace pollOnce() with a Pusher / Ably / centrifugo channel subscription, and have save.php publish to the channel after the DB commit. The save handler's contract — version-bumped row — is what the channel publishes; consumers stay symmetric.

   JavaScript Copy

   // Pusher example — drop-in replacement for the polling loop.
   import Pusher from 'pusher-js';
   const pusher = new Pusher(KEY, { cluster: 'us-east' });
   const channel = pusher.subscribe('page.' + slug);
   channel.bind('updated', ({ version, html }) => {
     if (version > lastVersion) {
       lastVersion = version;
       render(html);
     }
   });