如何有效地将实时数据更新传输到 Flask HTML 模板中？

使用 Flask 进行流式数据更新

由于服务器上呈现的模板的静态特性，将实时数据流集成到 HTML 模板中可能会带来挑战。但是，有一些方法可以实现此功能。

要在不动态修改模板的情况下传输数据，可以使用 JavaScript。通过向流端点发出请求，客户端 JavaScript 可以实时读取并显示数据。这种方法会带来复杂性，但可以更好地控制输出外观。

例如，以下代码演示了如何显示最新值和所有接收到的值的日志：

setInterval(() => {
  var latest = document.getElementById('latest');
  var output = document.getElementById('output');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '{{ url_for('stream') }}');
  xhr.send();
  var position = 0;

  function handleNewData() {
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
      latest.textContent = value;
      var item = document.createElement('li');
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;
  }

  timer = setInterval(function() {
    handleNewData();
    if (xhr.readyState === XMLHttpRequest.DONE) {
      clearInterval(timer);
      latest.textContent = 'Done';
    }
  }, 1000);
}, 1000);

或者，

<p>This is all the output:</p>
<iframe src="%7B%7B%20url_for('stream')%20%7D%7D"></iframe>

iframe {
  width: 300px;
  height: 200px;
}

@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string(
            '<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">'
        )

        for i in range(500):
            yield render_template_string(
                "<p>{{ i }}: {{ s }}</p>\n", i=i, s=sqrt(i)
            )
            sleep(1)

    return app.response_class(generate())

最终，可以选择通过 JavaScript 或

以上是如何有效地将实时数据更新传输到 Flask HTML 模板中？的详细内容。更多信息请关注PHP中文网其他相关文章！