我正在建立我的第一个基本网站的过程中使用Flask 在Python.我已经成功地创建了一个网站,在该网站上我从一个API(特别是ThingSpeak
)检索值,并将它们显示在一个表中.我目前面临的挑战是弄清楚是否有可能在不重新运行代码的情况下从API获取实时数据.
目前的情况是,每次我运行代码时,我都会从API中获取值.然而,我正在寻找一种方法来连续接收更新值,而不需要手动重新运行代码.有没有一种方法或途径可以在我的FlaskTM应用程序中实现这种实时数据更新?
我正在建立我的第一个基本网站的过程中使用Flask 在Python.我已经成功地创建了一个网站,在该网站上我从一个API(特别是ThingSpeak
)检索值,并将它们显示在一个表中.我目前面临的挑战是弄清楚是否有可能在不重新运行代码的情况下从API获取实时数据.
目前的情况是,每次我运行代码时,我都会从API中获取值.然而,我正在寻找一种方法来连续接收更新值,而不需要手动重新运行代码.有没有一种方法或途径可以在我的FlaskTM应用程序中实现这种实时数据更新?
其基本思想是在您的HTML文件中添加一个Java脚本函数(在代码中标记为1
),该函数设置一个间隔计时器(在代码中为2
),比方说,每3秒.当该间隔过go 时,调用函数(3
).在该函数中,您向FlaskApp(代码中为5
)发出一个AJAX请求(代码中为4
).您的FlASK应用程序收集最新数据并将其发送回Java脚本函数(代码中为6
),然后该函数可以将新行添加到包含最新数据(代码中为7
)的网页.
我已经将所有的Java脚本、HTML和Python放在一个文件中,并且避免了所有的CSS、JJJA模板和错误处理,这样你就可以看到它是如何实际工作的.你可以自己添加花哨的造型.
#!/usr/bin/env python3
from flask import Flask, jsonify, request, url_for, redirect, session
app = Flask(__name__)
# This is the HTML, normally you would abstract it out into a template file and have Jinja render it
HTML = """
<!DOCTYPE html>
<html>
<head>
<title>Continuous Update Demo</title>
<!-- Pull in jQuery from Google-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<h2>A continuously updated list:</h2>
<ul id="culist">
</ul>
</div>
<script type="text/javascript">
function requestUpdate() { // 3
console.log("DEBUG: requesting update");
$.getJSON('/_refresh', function(result) { // 4
console.log("DEBUG: Received " + result.data);
var HTML = "<li>" + result.data + "</li>";
$("#culist").append(HTML);
});
}
// This fires just once when the site initially loads
$(document).ready(function() { // 1
console.log("DEBUG: document ready");
// Get first element for list
requestUpdate();
// Ensure list is updated every 3s
setInterval(requestUpdate, 3000); // 2
});
</script>
</body>
</html>
"""
@app.route('/_refresh') # 5
def refresh():
# print(request.args) to see what the Javascript sent to us
print('DEBUG: Refresh requested');
# Query your Thingspeak here and then pass the new data back to Javascript below
# Build our response (a Python "dict") to send back to Javascript
response = {
'status' : 'Success',
'data': "A new line derived from Thingspeak",
}
print(f'DEBUG: Sending response {response}')
return jsonify(response) # 6 - send the result to client
@app.route('/')
def main():
print(f'DEBUG: Sending main page')
return HTML
if __name__ == '__main__':
app.run(debug=True)
在打开Web浏览器控制台的情况下运行此代码-它将在浏览器的"Developer Tools"或"Debug Tools"设置中,然后您将看到所有消息.
你可以根据自己的需要来调整它:
status: "Success"
更改为status: "Unchanged"
另一种完全不同的方法可能是打开flask和Java脚本之间的Web套接字.然后,只要ThingSpeech有更新,就可以从flask
端启动所有更新,而不是每N秒判断一次Java脚本端.这一方法在第my other answer节中有描述.
以下是它运行的一小段视频.在黑色终端中,您可以看到顶部运行的(非常无样式的)网页,下方是Java脚本控制台,下方是flask
的输出.