Возможные способы отображения данных датчика в реальном времени на веб-странице с использованием Python - PullRequest
0 голосов
/ 17 февраля 2019

Я пытаюсь создать веб-приложение, которое измеряет температуру и (обороты двигателя) от датчиков, проходящих через мой компьютер, которые последовательно подключаются к механической машине, и отображает их на веб-странице.

Я использую Python Flask сAJAX.Что я пробовал до сих пор, так это взял jsonify данные из серверной части и отображен на html-странице.Но я не получаю и не вижу никаких изменений в реальном времени на веб-странице без перезагрузки страницы.Мне нужно каждый раз перезагружать страницу, чтобы увидеть, как меняются данные.

Как можно и как можно отобразить эти данные на веб-странице.

Это мой скрипт на python для флягиприложение:

from flask import Flask, render_template, request, jsonify
import random
import time
import serial


app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/ret_num', methods = ['POST', 'GET'])
def ret_num():
    s = serial.Serial('COM7')
    res = s.read()
    time.sleep(1)
    return jsonify(res) 

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

и HTML-код:

<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<script>
$(function(){
    $.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
});
</script>
<h1>Output</h1>
<h1 id="num"></h1>
</body>
</head>
</html>

1 Ответ

0 голосов
/ 17 февраля 2019

Есть два хороших способа сделать это:

  1. Опрос По сути, вам придется вызывать свой API в цикле с небольшим интервалом, скажем, 30 секунд.Это может быть достигнуто с помощью чего-то вроде (код может не работать как есть, но принцип остается прежним):

    setInterval($.ajax({
        url: '/ret_num',
        type: 'POST',
        success: function(response) {
            console.log(response);
            $("#num").html(response);
        },
        error: function(error) {
            console.log(error);
        }
    }), 30000);

Использование WebSockets вместо простых вызовов AJAX.Прочитайте документы здесь .

(Бонус). Вы можете перезагружать страницу с интервалом.Например, для перезагрузки каждые 30 секунд:

    setInterval( location.reload(), 30000);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...