How to display changes made in a log file on a webpage using Flask and Javascript?

Question

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

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?

score 0 · Answer 1 · answered Nov 16 '21 at 22:11

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>

How to display changes made in a log file on a webpage using Flask and Javascript?

1 Answers1