mirror of
https://github.com/cesanta/mongoose.git
synced 2024-12-21 13:42:15 +08:00
52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
|
<!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>
|