使用 Flask 实时更新 HTML 上的动态变量

Question

我正在创建一个网站，该网站从其他网站上删除 BeautifulSoup4 文章，并向用户提供文章作为输出。

这些文章正在保存在数据库中。每篇文章都有一个 id。当前相关代码部分例如：

#scrap.py

id = 0

if 'article' == 'new': #clearly this is just for the example...
     id = id+1

我希望用户能够实时查看已收集了多少篇文章。当前相关的 HTML 代码部分例如：

<!--index.html-->

<div id="cur_id">{{  cur_id  }}</div>

我正在使用 Flask 将 id 渲染到 HTML 页面。当前相关代码部分例如：

#main.py

@app.route('/')
@app.route('/templates/index.html')
def index (name=None):
     cur_id = scrap.id
     return render_template('index.html', name=name, cur_id=cur_id)

我怎样才能使<div>HTML中的内容每次更新时都能实时id更新？

谢谢！

Answer 1

Flask 无法更改已提供的网页的内容。一旦 HTML 创建并发送到客户端，flask 就“完成”了。然后浏览器会执行一些操作，例如解释 HTML、解释 javscript（以及可能向网页添加交互）以及许多其他操作。请注意，客户端不需要执行此操作，有些客户端只需下载 HTML 即可完成（例如，curl/wget）。

因此，更改网页上的内容只能发生在客户端，这本质上是指 javascript。如果我们有新的值，我们如何更新内容？Vanillajs 相对简单：

var new_data = "3";
cur_id = document.getElementById('cur_id');
cur_id.innerHTML = new_data;

有很多库可以帮助您更新内容。Jquery 是一个经常使用的通用库。有一些完整的库只关注如何使用新内容更新 UI，例如 vue、react、ember 以及可能还有很多其他库。如果我没记错的话，react 和 ember 还提供了服务器端，所以如果你不想使用 vanillajs vue 可能值得一看。但是，如果您只想更新单个值，那么您无法真正击败两行vanillajs。

在上面的代码片段中，新值是硬编码的，这没有帮助。我们如何为客户带来新的价值？如果您确实想要实时信息，那么 Websocket 就是您的最佳选择。这些有点新，您应该检查浏览器兼容性是否适合您。

cur_id = document.getElementById('cur_id');

ws = new WebSocket("wss://echo.websocket.org")
ws.onmessage = function(event) {cur_id.innerHTML = event.data};

simulate_update = function() {ws.send(Number(cur_id.innerHTML) + 1)};
ws.onopen = function(event) {setInterval(simulate_update, 2000)};

这使用 echo websocket 服务器来模拟发送新信息的服务器，但当然它应该连接到您的 websocket 服务器。Flask 默认情况下不能使用 websockets，但是有一些插件（例如Flask-sockets）可以使这成为可能。上面使用的“协议”非常愚蠢，根据您的需要，您想要更智能的东西。

有一些库可以帮助编写 websocket 代码，通常带有集成协议。我认为最常用的是socketio，据我所知，它可以回退到不同的方法来交换数据（长轮询、ajax），并将事件/RPC/pubsub 框架放在前面。它还应该处理重新连接、心跳和其他人们一开始可能没有想到的问题。有很多不同的 websocket 库。