带有烧瓶的Ajax，用于在网页上实时更新传感器数据

问题描述 投票：0回答：1

我一直在尝试让该烧瓶服务器使用用户通过网页上的按钮调用时在.py脚本上运行的循环所生成的数据来更新自身。我一直在研究推荐的解决方案，并看到websockets（sockets.io），ajax，nodejs出现了。我知道我需要在我的项目中实现某种形式的js，而ajax看起来是最简单的（所以我认为）。我只有大约3周的Python编程经验。主要是我在寻找接近我想要的示例，然后尝试对其进行修改以适合我的需求，但是还没有找到我正在寻找的示例。即便如此，我对编程的普遍了解也意味着我“坚持”更多的示例，就越有可能降低我已经完成的工作的总体结构。

目标

目标是在不重新加载的情况下更新页面上显示的值，而是让js每秒更新一次该值。该值是从我的.py文件中的x = x + 1计数器生成的。稍后将由我的Rpi收集的传感器输入代替。

实际结果

当我运行当前代码时，

  1. 我的html元素被双重发布，所以尽管第二个按钮元素实际上并不响应单击，但我看到我已经两次放入index.html文件，

  2. 我也在终端窗口中看到无尽的帖子。

  3. 单击按钮元素不再在.py文件中执行我的循环，而是显示“不允许使用方法”

我尝试过的事情

我已经尝试在我的html文件中实现setTmeout，作为一种回调python应用并每秒获取更新值（x = x + 1）的方式。我已经阅读了有关使用setTimeout作为使用setInterval处理问题的方法的文章。由于我见过各种使用ajax调用的方式，并且学习资源主要构造为表单，数据库和聊天应用程序，因此，我的大部分搜索都没有带来任何新的东西可供我学习。我目前正在做ajax教程，希望能遇到我可以使用的东西，任何帮助将不胜感激。

ajaxTest.py我的python烧瓶文件

import threading
import time
from flask import Flask, render_template, jsonify, request
import RPi.GPIO as GPIO
import datetime
from datetime import datetime
from datetime import timedelta
app = Flask(__name__)

bioR_on = False
ledGrnSts = 0
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
air = 21
light = 20
waste = 16
feed = 12
water = 26
pinList = [21,20,16,12,26] 

def pump(pin):
        GPIO.output(pin, GPIO.LOW)
        print(pin,'on')
        time.sleep(1)
        GPIO.output(pin, GPIO.HIGH)
        print(pin, 'off')
        time.sleep(1)

def on(pin):
    GPIO.output(pin, GPIO.LOW)

@app.route("/")
def index(): 
    templateData = {
              'title' : 'Bioreactor output Status!',
              'ledGrn'  : ledGrnSts,
        }
    return render_template('index.html', **templateData)

@app.route('/<deviceName>/<action>', methods = ["POST"])
def start(deviceName, action):
    # script for Pi Relays
    def run():
        if action == "on":
            alarm = datetime.now() + timedelta(seconds =10)
            global bioR_on
            bioR_on = True

            while bioR_on:

                tday = datetime.now()
                time.sleep(1)
                #feed(tday, alarm)
                x=x+1
                return jsonify(x)
                GPIO.setmode(GPIO.BCM)

                for i in pinList:
                    GPIO.setup (i, GPIO.OUT)
                    GPIO.output(i, GPIO.HIGH)
                on(air)
                on(light)
                print(tday)
                if tday >= alarm:
                    print('alarm activated')
              #  run = False
                    pump(waste)
                    print('waste activated')
                    pump(feed)
                    print('feed on')
                    GPIO.cleanup()
                    alarm = datetime.now() + timedelta(seconds =10)
                    print('next feeding time ', alarm)
                    time.sleep(1)
        if action == 'off':
            bioR_on = False
            #return "off"
            GPIO.cleanup()

    thread = threading.Thread(target=run)
    thread.start()

    templateData = {
            'ledGrn'  : ledGrnSts,
    }
    return render_template('index.html', **templateData)


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80, debug=True, threaded=True)

我的index.html文件

<!DOCTYPE html>
   <head>
      <title>BioReactor Control</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href='../static/style.css'/>
   </head>
   <body>
        <h1>Actuators</h1>
        <h2> Status </h2>
        <h3> GRN LED ==>  {{ ledGrn  }}</h3>
        <br>
        <h2> Commands </h2>
        <h3> 
            Activate Bioreactor Ctrl ==> 
            <a href="/bioR/on" class="button">TURN ON</a>  
            <a href="/bioR/off"class="button">TURN OFF</a>
        </h3>
        <h3>
            Current Count 
        </h3>
        <p id="demo"></p>
        <script>
                    setTimeout($.ajax({
                        url: '/<deviceName>/<action>',
                        type: 'POST',
                        success: function(response) {
                            console.log(response);
                            $("#num").html(response);
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    }), 1000);


        </script>
        <h1>Output</h1>
        <h1 id="num"></h1>
   </body>
</html>

Picture of results

python ajax flask settimeout
1个回答
0
投票

我创建了最少的代码，该代码使用AJAX每1秒获取新值。

我使用setInterval每1秒钟重复一次。我还使用function(){ $.ajax ... }创建不会立即执行的函数，但setInterval将每1秒调用一次。如果没有function(){...}代码，则$.ajax会在启动时执行，其结果将用作每1秒执行一次的函数-但它不会返回任何内容-因此，最终它仅更新了一次值（在启动时），后来setInterval却什么也不运行。 >

我添加了当前时间以查看它是否仍在运行。

[buttons运行函数'/<device>/<action>'，用于启动和停止线程，但AJAX使用/update获取当前值。

我使用render_template_string将所有代码保存在一个文件中，以便其他人可以轻松地复制和测试它。

我将HTML减少到最小。为了确保将<h1>放在需要这些标签的脚本之前。

我没有使用global=True进行测试，它可能会在新线程中运行它，这可能会引起问题。 

from flask import Flask, request, render_template_string, jsonify
import datetime
import time
import threading

app = Flask(__name__)

running = False # to control loop in thread
value = 0       

def rpi_function():
    global value

    print('start of thread')
    while running: # global variable to stop loop  
        value += 1
        time.sleep(1)
    print('stop of thread')


@app.route('/')
@app.route('/<device>/<action>')
def index(device=None, action=None):
    global running
    global value

    if device:
        if action == 'on':
            if not running:
                print('start')
                running = True
                threading.Thread(target=rpi_function).start()
            else:
                print('already running')
        elif action == 'off':
            if running:
                print('stop')
                running = False  # it should stop thread
            else:
                print('not running')

    return render_template_string('''<!DOCTYPE html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
        <a href="/bioR/on">TURN ON</a>  
        <a href="/bioR/off">TURN OFF</a>
        <h1 id="num"></h1>
        <h1 id="time"></h1>
        <script>
            setInterval(function(){$.ajax({
                url: '/update',
                type: 'POST',
                success: function(response) {
                    console.log(response);
                    $("#num").html(response["value"]);
                    $("#time").html(response["time"]);
                },
                error: function(error) {
                    console.log(error);
                }
            })}, 1000);
        </script>
   </body>
</html>
''')

@app.route('/update', methods=['POST'])
def update():
    return jsonify({
        'value': value,
        'time': datetime.datetime.now().strftime("%H:%M:%S"),
    })

app.run() #debug=True
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.