Here now
Everyone on the site at this moment, each a cloud of their own, floating over the name of the page they're reading. You're one of them.
Only you: this copy of the site isn't connected to anyone else.
// Every tab says where it is; Supabase holds it only while the tab is open.
const channel = client.channel("here", {
config: { presence: { key, enabled: listening } }, // only Here now listens
});
channel.subscribe((status) => {
if (status === "SUBSCRIBED") channel.track({ path, look: encode(myCloud), since });
});
// A tab in the background isn't really here.
document.addEventListener("visibilitychange", () =>
document.hidden ? channel.untrack() : channel.track(me),
);
// What arrives comes from other browsers: nothing is shown as it came.
const visitors = Object.entries(channel.presenceState()).map(([key, metas]) => {
const said = metas.at(-1);
return {
key,
path: isSitePath(said.path) ? said.path : "", // else "somewhere on the site"
look: decode(said.look) ?? HOME, // else the homepage's cloud
};
});
// Each takes the spot, of a few drawn from its key, furthest from the others:
// whoever arrives never moves anyone already here.
for (const visitor of visitors) {
const spot = candidates(visitor.key).reduce((best, spot) =>
room(spot, placed) > room(best, placed) ? spot : best);
placed.push(spot);
}Said, not stored
Every tab on the site joins one Supabase Realtime channel and says, through presence, three things: a random key, the page it's on, and the six characters of a cloud from Make a cloud, picked at random for the visit. Supabase holds that only while the tab is open and forgets it when it closes. Nothing is written down, and nothing in it says who anyone is. A tab left in the background leaves, and comes back when it's looked at again.
Only this page listens
Every page tells; only this one listens. Elsewhere, a visit costs a message on arrival and one per page after it, and the connection itself waits until the page is idle, so it never slows a first visit. Here, the channel sends the whole room once and then every change, and the clouds follow.
Taken on trust: nothing
What a visitor says about themselves arrives from someone else's browser, so none of it is shown as it came. A page the site doesn't have becomes somewhere on the site, a cloud that isn't one becomes the homepage's cloud, and no text from another browser is ever drawn. Each cloud takes whichever of a few spots drawn from its key is furthest from the others, so someone arriving never moves anyone already here, and someone leaving fades where they were.