如何使用 Flask 和 Javascript 在网页上的日志文件中显示更改？

Question

我制作了一个flask应用程序来检测日志文件中所做的更改，例如UNIX中的tail-f命令，但是当我运行它并在日志文件中进行更改时，网页上没有显示输出，我已经编写了代码参考这个，

这是我的烧瓶应用程序

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)

这是日志文件，为了简单起见，我创建了一个像这样的虚拟日志文件

这是index.html文件

<!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>

现在，当我运行这个 Flask 应用程序时，本地服务器上没有显示任何内容，我在这里做错了什么，以便我可以在不刷新网页的情况下显示日志？

Answer 1

在我看来，您应该使用阅读器来阅读流。 这意味着不等待传输结束，而是逐条读取。

<!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>

如何使用 Flask 和 Javascript 在网页上的日志文件中显示更改？

问题描述

1 个解决方案

解决方案1
0 2021-11-16 22:11:45

如何使用 Flask 和 Javascript 在网页上的日志文件中显示更改？

问题描述

1 个解决方案

解决方案1 0 2021-11-16 22:11:45

解决方案1
0 2021-11-16 22:11:45