<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#container { margin-right: auto; margin-left: auto; max-width: 480px; }
#info { background: #e0f0f0; border-radius: .5em; padding: 2em; }
#static, #live { background: #f0f0f0; border-radius: .5em; padding: 0.5em; max-height: 10em; overflow: auto; height: 100%; }
#wrapper { display: flex; justify-content: flex-evenly; margin-top: 1em; }
</style>
</head>
<body>
<div id="container">
<div id="info">
A div below shows file log.txt, which is produced by the server.
The server appends a new log message to that file every second,
and a div below also shows that, implementing a "live log" feature.
JS code on this page first fetches /api/log/static that returns
log.txt contents, then fetches /api/log/live that does not return,
but feeds chunks of data as they arrive (live log).
<br/><br/>
You can also use <code>curl</code> command-line utility to see
live logs:
<br/><code>curl localhost:8000/api/log/live</code>
</div>
<div id="wrapper">
<div style="width: 50%"><b>Static</b><pre id="static"></pre></div>
<div style="width: 1em;"></div>
<div style="width: 50%"><b>Live</b><pre id="live"></pre></div>
</div>
</div>
</body>
<script>
var f = function(r) {
return r.read().then(function(result) {
var data = String.fromCharCode.apply(null, result.value);
document.getElementById('live').innerText += data; // Append live log
if (!result.done) f(r); // Read next chunk
});
};
window.onload = ev => fetch('/api/log/static')
.then(r => r.text())
.then(r => { document.getElementById('static').innerText = r; })
.then(r => fetch('/api/log/live'))
.then(r => r.body.getReader())
.then(f);
</script>
</html>