I have made a flask app that detects the changes made in a log file like the tail-f command in UNIX, but when I run it and make changes in the log file the output is not displayed on the webpage, I have written the code with reference to this,
Here is my flask app
import time
import os
from flask import Flask, render_template
app=Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/logs')
def logs():
def generate():
with open("log.log") as f:
while True:
# read last line of file
line = f.readline()
# sleep if file hasn't been updated
if not line:
time.sleep(0.1)
continue
yield line
return app.response_class(generate(), mimetype='text/plain')
app.run(debug=True)
Here is the log file, just for the sake of simplicity I have created a dummy log file like this
1
2
3
4
5
and here is the index.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre id="output"></pre>
<meta charset="utf-8">
<title>Logs</title>
<p>LOGS</p>
<script>
var output = document.getElementById('output');
var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('logs') }}');
xhr.send();
setInterval(function() {
output.textContent = xhr.responseText;
}, 1000);
</script>
</body>
</html>
Now when I run this Flask App nothing is diplayed on the localhost server, what am I doing wrong here, so that I can get the logs displayed without refreshing the webpage?
In my opinion you should use a reader to read the stream. This means that the end of the transmission is not waited for, but is read in piece by piece.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<pre id="output"></pre>
<script type="text/javascript">
(() => {
fetch('/logs')
.then(response => {
const elem = document.getElementById('output');
const reader = response.body.getReader();
const readStream = ({ done,value }) => {
if (done) {
return;
}
let chunk = String.fromCharCode.apply(null, value);
elem.textContent += chunk + '\n';
return reader.read().then(readStream);
};
reader.read().then(readStream);
});
})();
</script>
</body>
</html>