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

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

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

#scrap.py

id = 0

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

<!--index.html-->

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

#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)

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

#scrap.py

id = 0

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

<!--index.html-->

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

#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)

如何使HTML中的

在每次

id

更新时实时更新

---

谢谢

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不能使用WebSocket，但有一些插件使这成为可能。上面使用的“协议”非常愚蠢，根据你的需要，你需要更智能的东西

---

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

JavaScript是唯一能够解决这个特定用例的东西。如何使用JavaScript来实现这一点实际上太宽泛了，我们无法在这里讨论。您可能想使用WebSocket和一些JavaScript前端，如vue、react、ember（或者只是用vanilla js更新div内容）。@syntonym我很欣赏如何使用just js实现这一点的fiddle示例非常感谢您的评论。我花了一些时间在flask sockets和socketio的文档上，但是我不知道，你可以尝试查看不同的教程，这些教程用不同的词描述相同的主题。或者，如果您有一个特定的编程问题，请在此提出一个新问题。