Server-sent events
The server pushes HTML: padSse sends a rendered row every second, and htmx's sse extension swaps each one into the page as it arrives.
padSse
hx-ext="sse"sse-swapsse-close
Live
A row a second, rendered on the server and pushed down the open connection - thirty, then the stream ends. Start again
Requests htmx made
Nothing yet - use the example above, and every request it makes shows here with the part PAD answered.
How it is built
PAD, on the server htmx, in the browser
<div hx-ext="sse" sse-connect="?examples/live&stream" sse-close="done">
<p class="muted">A row a second, rendered on the server and pushed down the open connection - thirty, then the stream ends.
<a href="?examples/live">Start again</a></p>
<ol class="ticks" sse-swap="tick" hx-swap="afterbegin"></ol>
</div><?php
// ?examples/live&stream is the stream: padSse sends a row of HTML every second, thirty in
// all, as 'tick' events that htmx's sse extension swaps into the list (sse-swap="tick"),
// then a 'done' event that closes the connection (sse-close="done"). The page itself -
// asked without stream - is the list they come into.
if ( padRequestHas ( 'stream' ) )
padSse ( function ( $send ) {
for ( $n = 1; $n <= 30; $n++ ) {
$load = function_exists ( 'sys_getloadavg' ) ? number_format ( sys_getloadavg () [0], 2 ) : '-';
$row = '<li class="tick rise"><span class="badge is-accent">#' . $n . '</span> '
. '<code>' . date ( 'H:i:s' ) . '</code> load ' . htmlspecialchars ( $load )
. ', ' . round ( memory_get_usage () / 1024 ) . ' kB in use</li>';
if ( ! $send ( 'tick', $row ) )
return;
sleep ( 1 );
}
$send ( 'done', 'done' );
}, [ 'retry' => 5000 ] );
?>