通过flask使用实时传感器数据更新jquery_Jquery_Flask

通过flask使用实时传感器数据更新jquery

jquery flask

通过flask使用实时传感器数据更新jquery,jquery,flask,Jquery,Flask,我试图通过flask将传感器的实时数据通过jquery发送到前端。现在我的脚本使用setInterval（…，1000）通过ajax请求更新数据但是，当从flask接收到新的sensordata时，我想更新jquery请求，因为来自传感器的帧率不同，并且很难设置特定的间隔以使其实时当通过@app.route（'/data'）发送新数据时，是否可以在jquery代码中使用某种信号 Python脚本： from flask import Flask,render_template,url_for

我试图通过flask将传感器的实时数据通过jquery发送到前端。现在我的脚本使用

setInterval（…，1000）

通过ajax请求更新数据

但是，当从flask接收到新的sensordata时，我想更新jquery请求，因为来自传感器的帧率不同，并且很难设置特定的间隔以使其实时

当通过

@app.route（'/data'）

发送新数据时，是否可以在jquery代码中使用某种信号

Python脚本：

from flask import Flask,render_template,url_for,request,redirect, make_response, session
import json
from bluepy import btle
from bluepy.btle import Scanner, DefaultDelegate

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def main():

    return render_template('index.html')

@app.route('/data', methods=["GET", "POST"])
def data():

    # Connect to sensor and get current data value (Bluepy stuff)
    bluetooth_addresses = "d4:ca:3d:32:52"
    periph = btle.Peripheral(bluetooth_addresses)
    periph.writeCharacteristic(44, b"\x01\x00", withResponse=True)
    data = periph.getData() # data is a single value (e.g 0.23)
   
    # Keep receiving data from sensor when ready
    # while True:
    #     if periph.waitForNotifications(1.0):
    #         data = periph.getData() # data is a single value (e.g 0.23)

    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

if __name__ == "__main__":
    app.run(debug=True)

html:


烧瓶应用程序
开始
var start_按钮=函数（）{
$.get（“/start”，
函数（）{
函数日志_数据（）{
$.ajax({
键入：“获取”，
url:“/data”，
数据类型：“json”，
成功：功能（结果）{
控制台日志（结果）；
}
});
}
定时器=设置间隔（日志数据，1000/15）；
}
)
}

对于实时数据，请使用“文本/事件流”MIME类型

返回响应（生成随机数据（），mimetype='text/event stream'）

或者（我在下面的代码片段中使用了这种类型）

以下是我使用的前端代码片段的一部分：

constsource=neweventsource（“/data”）；
source.onmessage=函数（事件）{
const data=JSON.parse（event.data）；
//data.value是实时值
}

<!DOCTYPE html>
<html  lang="en" dir="ltr">
<head>
    <meta charset="utf-8">

    <title>Flask App </title>

    <!-- Bootstraps Java Scipts Links -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap4.4.1.min.css') }}">
    <script src="{{ url_for('static', filename='js/jquery3.4.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper1.16.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap4.4.1.min.js') }}"></script>
</head>

<body>
    <button type="button" class="btn btn-primary" onclick="start_button()" id="start_button">Start</button>

    <script>
        var start_button = function(){
            $.get('/start',
                function(){
                    function log_data() {
                        $.ajax({
                          type: "GET",
                          url:'/data',
                          dataType: 'json',
                          success: function (result) {
                              console.log(result);
                          }
                        });
                    }
                    timer = setInterval(log_data, 1000/15);
                }
            )
        }
    </script>
</body>
</html>