Live changes and large folders

As it happens

The page watches GET /events, a stream of server-sent events, read with fetch so it carries your headers. Each change is told to each one watching only as far as they may see it: the folders where it was that they may list, and the entries that they may read. Names are not sent; the page asks for what it shows, as always.

<FileDrive>, mountDrive and every hook under a DriveProvider ask again a quarter of a second after a change, once for changes that come together. A cut is followed by a new connection, a little later each time. live={false} turns it off.

const stop = client.watch((event) => {
  // { by: 'bea', at: '…', folders: ['<id>'], entries: ['<id>'] }
  if (event.folders.includes(current)) reload();
});

More than one process

A change made by this process is told at once. One made by another process on the same store is seen by its revision, which SQLite and Postgres keep, looked at every two seconds while someone watches (live: { poll }). A store without a revision tells only this process’s changes.

Behind a proxy

• A line of nothing goes every 25 seconds, so a proxy does not close the stream for being quiet. Let a request last longer than that: proxy_read_timeout 1h in nginx.
• The answer says x-accel-buffering: no and cache-control: no-transform, so nginx and compression do not hold it back.
• On a platform that ends a request after some seconds (serverless functions), the page connects again when it is cut, and changes in between are seen at the next one. Or turn it off with live: false.

Large folders

From 200 entries, the list and the grid put in the page only what is in sight and a few rows around it, with the room of the rest kept above and below, so the scroll bar is as long as all of it. The rows are measured as they are shown, and the grid’s columns follow its width.

The keyboard goes through all of them as before: an arrow, Home or End brings the one it goes to into sight first, as a screen reader is told of the one current. Each says where it is among all (aria-posinset, aria-setsize). Ctrl+A picks all of them, not only those in the page, and the addresses of pictures are asked only for those shown.