Python-сообщество

Alex_2057 · Март 10, 2020 16:17:38

Здравствуйте!
Есть серверная часть (web-сервер на микрофреймворке Flask).
Собирает данные от датчиков.
В примере эти запросов от датчиков заменены на вывод переменных изменяющихся во времени.

 #!/usr/bin/env python
import RPi.GPIO as GPIO
import random
import datetime
import time
from time import sleep
from flask import jsonify, render_template
from flask import *
app = Flask(__name__)
@app.route('/<name>', methods= ['GET'])
def main(name=None):  # 
# получение данных от датчиков:
#   sensor_1 = get_data_1()
#   sensor_2 = get_data_2()
#   sensor_3 = get_data_3()
# для примера, вместо датчиков - периодически изменяющиеся переменные:
   sensor_1 = round(random.random(),5)
   sensor_2 = random.randint(1,1000)
   sensor_3 = datetime.datetime.now().time()
   print ("Sensor 1:", sensor_1)
   print ("Sensor 2:", sensor_2)   
   print ("Sensor 3:", sensor_3)   
   
   sensor_1 = {'sensor_1': sensor_1}
   sensor_2 = {'sensor_2': sensor_2}
   sensor_3 = {'sensor_3': sensor_3}
   return render_template("index.html", sensor_1=sensor_1, sensor_2=sensor_2, sensor_3=sensor_3)
   
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=88, debug=True)

Из браузера к серверу идет запрос. Вывод данных без обновления страницы.

 <html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
<script type="text/javascript">	
setInterval(function()
   {
 // запрос со страницы сайта к серверу: 
	$('#data_sensor_1').load(document.URL +  ' #data_sensor_1');
// если откомментарить эту строку, то будет еще один запрос к серверу	
//	$('#data_sensor_3').load(document.URL +  ' #data_sensor_3');
   }, 2000) // период запроса
// не работает (?) - нет запроса к серверу:
//setInterval(update_values, 2000);
 
function update_values() {
        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
        $.getJSON($SCRIPT_ROOT+"/<name>",
            function(data) {
				$("#sensor_1").text(data.sensor_1+" %")
				$("#sensor_2").text(data.sensor_2+" %")
				$("#sensor_3").text(data.sensor_3+" %")
            });
    }
    </script>
 
 </head>
 
 <body>
 	<h3>Тест датчиков автоматики (port: 88)</h3>
	
	<div id='data_sensor_1'>Sensor 1: {{ sensor_1.sensor_1}}<BR>
	<id='data_sensor_2'>Sensor 2: {{ sensor_2.sensor_2}}
	</div>
	Sensor OK!<BR>
	
    <div id='data_sensor_3'>Sensor 3: {{ sensor_3.sensor_3}}<BR>
	</div>
	<BR>
	<div>Sensor N:</div>
</body>
</html>

Проблема в том, что если вывод данных происходит в одном блоке <div></div>, как для Sensor 1 и Sensor 2, то данные периодически обновляются. Но если в разных блоках (Sensor 3), - то обновления не происходит.
Можно посылать отдельные запросы к каждому датчику, тогда все нормально. Но это не удобно, т.к. датчиков много.
Подскажите пожалуйста, как правильно.
И второй вопрос.
Функция update_values() выполняется при первой загрузке страницы, выводятся данные всех датчиков.
Но если откомментарить строку:
//setInterval(update_values, 2000);
Все равно не будет периодического запуска функции.
Заранее благодарен за конструктивный ответ!

Отредактировано Alex_2057 (Март 10, 2020 16:25:48)

Romissevd · Март 10, 2020 21:50:42

А если запихнуть под общий div?

 <html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
setInterval(function()
   {
 // запрос со страницы сайта к серверу:
	$('#data').load(document.URL +  ' #data');
// если откомментарить эту строку, то будет еще один запрос к серверу
//	$('#data_sensor_3').load(document.URL +  ' #data_sensor_3');
   }, 2000) // период запроса
// не работает (?) - нет запроса к серверу:
//setInterval(update_values, 2000);
function update_values() {
        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
        $.getJSON($SCRIPT_ROOT+"/<name>",
            function(data) {
				$("#sensor_1").text(data.sensor_1+" %")
				$("#sensor_2").text(data.sensor_2+" %")
				$("#sensor_3").text(data.sensor_3+" %")
            });
    }
    </script>
 </head>
 <body>
 	<h3>Тест датчиков автоматики (port: 88)</h3>
    <div id='data'>
	<div id='data_sensor_1'>Sensor 1: {{ sensor_1.sensor_1}}<BR>
	<id='data_sensor_2'>Sensor 2: {{ sensor_2.sensor_2}}
	</div>
	Sensor OK!<BR>
    <div id='data_sensor_3'>Sensor 3: {{ sensor_3.sensor_3}}<BR>
	</div>
	<BR>
	<div>Sensor N:</div>
    </div>
</body>
</html>

И кстати код работает. Каждые 2 секунды данные в браузере обновляются…

Alex_2057 · Март 10, 2020 23:37:21

Проверил. Спасибо, работает под общим <div>

Что касается обновления через 2 секунды.
Сейчас этот запрос формирует:
setInterval(function()
{
// запрос со страницы сайта к серверу:
$('#data').load(document.URL + ‘ #data’);
}, 2000) // период запроса
И обновление работает.

Но во втором вопросе, если оставить:
setInterval(update_values, 2000);
function update_values() {
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
$.getJSON($SCRIPT_ROOT+“/<name>”,
function(data) {
$(“#sensor_1”).text(data.sensor_1+“ %”)
$(“#sensor_2”).text(data.sensor_2+“ %”)
$(“#sensor_3”).text(data.sensor_3+“ %”)
});
}
Функция выполнится только один раз при первой загрузке (обновлении) страницы.
Данные выведутся один раз, затем запросы к серверу пойдут,
но данные уже обновляться не будут.

Отредактировано Alex_2057 (Март 10, 2020 23:41:34)

Python-сообщество

Уведомления

#1 Март 10, 2020 16:17:38

Вывод данных в формате JSON получаемых от сервера Flask

#2 Март 10, 2020 21:50:42

Вывод данных в формате JSON получаемых от сервера Flask

#3 Март 10, 2020 23:37:21

Вывод данных в формате JSON получаемых от сервера Flask

Board footer