Live regions let us keep server-rendered HTML fresh by polling the current page URL in the background.

example/05-live-clock.php shows the pattern with a clock that is rendered on the server and refreshed every second.

¶The simplest live region

<time data-flux="live">12:00:00</time>

data-flux="live" is shorthand for data-flux="live-outer", so the whole <time> element is replaced each time the poll runs.

¶Replace only the contents

If we want to keep the container and refresh only its children, we can use live-inner:

<div data-flux="live-inner">
	<strong>Waiting for the next refresh...</strong>
</div>

¶Control the polling rate

Each live element can define its own interval in seconds:

<time data-flux="live" data-flux-rate="5">12:00:00</time>

If we omit data-flux-rate, Flux uses one second.

¶How polling behaves

Flux maintains a single polling scheduler even if there are several live targets on the page. It works out which targets are due, fetches the current document once, then applies updates only to those live targets.

That keeps the behaviour simple:

• one current page URL
• one background fetch per due poll
• multiple live targets refreshed from the same returned document

¶Live targets survive page updates

If a larger Flux update replaces a container that contains a live region, Flux reinitialises the new live element and keeps polling.

¶What about WebSockets, or Server-Sent Events?

The functionality of data-flux="live" is currently poll-only, by design.

The purpose of Flux is to introduce fluid user experience without changing server-side code.

When responses are zipped from the server (any modern web server will automatically zip responses), there is little benefit to streaming individual elements’ HTML changes via WebSockets or Server-Sent Events, because for the few bytes that are saved, there has to be one individual socket connection left open per visitor, which requires more effort to scale well.

If there’s a demand for any other type of live update, please open an issue on GitHub or cast your vote on an already open issue.

---

The remaining directives are smaller but still useful. Next we will cover autosave, submit, and attribute-only refreshes in autosave and background submits.