动态更新 Flask 应用程序中的文本以获取温度读数

Posted

技术标签:

【中文标题】动态更新 Flask 应用程序中的文本以获取温度读数【英文标题】:Dynamically updating the text in a Flask App for Temperature Readings 【发布时间】:2019-08-17 16:11:32 【问题描述】:

我正在构建一个简单的应用程序。基本上,它会在网站中显示 Raspberry Pi 的温度。最终,我计划为其添加更多功能。所以基本上在尝试使用 WebSockets 并没有成功之后,我四处搜索但没有找到任何答案。我想每 2 或 5 秒更新一次温度。

我尝试了一些关于 WebSockets 的教程,但它没有更新网页中的值。

from flask import Flask,render_template,request
from subprocess import PIPE, Popen
from flask_socketio import SocketIO
import threading
import time
import os
temp = 0
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

def get_temp():
    while(1):
        process = Popen(['vcgencmd', 'measure_temp'], stdout=PIPE)
        output, _error = process.communicate()
        socketio.emit('temp','temp',output)
        temp=output
        time.sleep(2000)
        print("DID")

x = threading.Thread(target=get_temp)
x.start()
print("START")
@app.route('/')
def hello_world():
    return render_template('st.html',raspi_model='3',raspi_temp=9)

st.html文件:


<html>
<body>
<h1>Raspberry Pi Control Page</h1>
<hr>
<p>Raspberry Pi Model : raspi_model</p>

<p id="asd">Current Tempreature : raspi_temp</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
    var socket = io();
    document.getElementById(id).innerHTML = socket.data

</script>
</body>
</html>

有一条错误消息,但我不知道它是什么意思:

WARNING in __init__: Flask-SocketIO is Running under Werkzeug, WebSocket is not available.

【问题讨论】:

嗨,你找到解决办法了吗? 【参考方案1】:

以下是我如何解决此问题的示例:

我可能会将这些脚本拆分为.js 文件,但是很好。 getTemp() 向服务器请求新的温度,writeTemp() 使用新值更新 HTML,addTimer() 每 5 秒运行一次 writeTemp()

<html>
    <head>
        <script type="text/javascript">
            function getTemp() 
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open( "GET", "http://localhost/info/temp", false );
                xmlHttp.send( null );
                return xmlHttp.responseText;
            
            function writeTemp() 
                var temperature = getTemp();
                document.getElementById("temperatureLabel").innerText = temperature + "C";
            
            function addTimer() 
                setInterval(writeTemp, 5000)
            
        </script>
    </head>
    <body onload="addTimer();">
        Temperature: <span id="temperatureLabel"></span>
    </body>
</html>

好的,所以客户端每 5 秒向服务器发送一个 XMLHttpRequest(基本上与 curl 请求相同),看起来像 localhost/info/temp

我们通过直接从我们的网络服务器中读取具有适当值的文件来提供这些数据。

@app.route("/info/<key>")
def info(key):
    if key == "temp":
        with open("/info/cpu_temp.dat", "r") as f:
            temp = f.read()
        return temp
    else:
        return "" # empty results if not valid

当然,这个文件现在可能是空的,所以我们将使用后台计时器生成它:

while true; do vcgencmd measure_temp > info/temp; sleep 5; done;`

您可以将此脚本移动到measureTemp.sh,然后根据需要从您的python 初始化设置中将其子线程化,或者在您拥有chmod +x measureTemp.sh'd 后将其添加为启动时的服务。

或者,如果您有阅读权限,您也可以直接测量 /sys/class/thermal/thermal_zone0/temp

【讨论】:

以上是关于动态更新 Flask 应用程序中的文本以获取温度读数的主要内容,如果未能解决你的问题,请参考以下文章

使用WebSocket扩展Flask REST API

动态更新扩展按钮 - 需要灵感

获取对象中的单个索引以与 api 调用连接

从 php/mysql 动态创建的选择框更新文本框

从Flask中的textarea检索文本[重复]

如何动态调整vue组件中的文本大小