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>

我将带有烧瓶的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被创建并发送到客户端，烧瓶就会“完成”。然后浏览器会执行诸如解释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。

在上面的代码段中，新值是硬编码的，这没有用。我们如何为客户获得新价值？如果你真的想要实时信息，那么websockets就是你的选择。这些有点新，您应该检查browser compatibility是否可以接受。

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库。

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

1 个答案: