Skip to main content
A full-stack reactive todo app over a single browser-to-engine WebSocket. Function calls and live change notifications flow over the same connection. The app follows the stored records pattern from Recipe 2: stored records with live updates: the todo worker owns the data, serves queries, and announces each change by calling todos::on-changed, a function that each browser observes.

​
Engine configuration

The workers needed to support a browser-driven reactive app: state for storage and an RBAC listener (rbac-proxy or iii-worker-manager) for browser connections. No streaming worker is required.

​
Backend

The worker, auth, storage, change notifications, and CRUD functions that power the app server-side.

​
Worker setup

Connect a worker and register the functions the app needs.

​
Auth function (RBAC)

An auth function runs on each new browser WebSocket connection, issues a session ID, and namespaces the session’s registered functions to prevent collisions. The listener exposes todos::on-changed to the session so the browser can observe it.

​
Storage

Todos live in the state worker under one scope, one key per todo, each with a revision number that every write increments.

​
Change notifications

The todo worker registers todos::on-changed as a private function whose handler returns the change { id, revision, op }, and calls it after every committed write. When it runs, the target of each browser’s observer runs. Its onObserverAdded hook caps the number of browsers that observe it, rejecting the observer past the cap.

​
Functions

The CRUD functions the browser calls (create, toggle, delete) write to storage and then call todos::on-changed. todos::get and a paginated todos::list serve reads.

​
Frontend

The browser-side WebSocket connection and reactive hook that render live updates.

​
Connection

Connect the browser to the engine over a single WebSocket using iii-browser-sdk.

​
Real-time hook

A hook that observes todos::on-changed with a browser function as the target, then loads the list with todos::list. Each notification re-reads one todo unless the hook already has that revision, and the hook reloads the list after a reconnect.

​
Key concepts

The reactive primitives this app relies on: single-WebSocket transport, per-session RBAC namespacing, an observable function for change notifications, and a query for the initial state and recovery.