Звучит так, как будто вы хотите создать динамическое SPA (одностраничное приложение).
Вам понадобится сервер приложений для размещения серверной части, которая будет обрабатывать маршрутизацию и обслуживать динамический контент (поток воды). оценить).
Тогда вам понадобится код внешнего интерфейса для визуализации приятного пользовательского интерфейса и отображения содержимого, предоставляемого бэкендом.
Похоже, вы хотите использовать python (в соответствии с вопросомtag).
Быстрый способ добиться этого - создать приложение Python Flask. Flask позволит вам создать сервер приложений. Кроме того, у Flask есть «шаблонизатор» Jinja2, который позволяет создавать пользовательские интерфейсы, комбинируя объекты HTML и python.
Например:
Создать папку с именами waterproject и waterproject/templates/ Затем создайте 2 файла, waterproject/app.py и waterproject/templates/index.html
# waterproject/app.py
from flask import Flask, render_template
import json
app = Flask(__name__)
def read_water_level():
with open('/file/where/data/is/stored.txt') as file:
water_level = file.read()
return water_level
@app.route('/index', methods=['GET'])
def index():
render_template('index.html', water_level=read_water_level())
@pp.route('/waterlevel', methods=['GET'])
def get_water_level():
return json.dumpss({'waterlevel': read_water_level()})
if __name__ == "__main__":
app.run(host='localhost',debug=True)
Выше мы создаем 2 маршрута. Один для обслуживания главной страницы, а другой - конечная точка API, которая будет возвращать только уровень воды. Эта конечная точка будет использоваться для того, чтобы веб-интерфейс автоматически опрашивал бэкэнд для определения уровня воды без необходимости повторного рендеринга (или обновления) всей страницы. Также предполагается, что ваш веб-скребок сохраняет уровень воды в файле по адресу /file/where/data/is/stored.txt'
Затем вы создадите файл .html (index.html). выше рендеринга маршрута.
# in /waterproject/templates/index.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.4.1.min.js"></script>
<title>Water Level of River</title>
<style>
body {
text-align: center;
}
#water {
color: blue;
}
</style>
<script>
var get_water_level = function() {
$.get( "/waterlevel", function( data ) {
$( "#water" ).html( data['waterlevel'] );
});
};
var interval = 1000 * 60 * X; // where X is your every X minutes
setInterval(get_water_level, interval);
</script>
</head>
<body>
<div id="water">
{{water_level}}
</div>
</body>
</html>
Обратите внимание, как этот html-файл имеет объект {{water_level}}, встроенный в html. Это не совсем HTML, но механизм шаблонов, который использует Flask, позволяет нам эффективно передавать объект water_level из кода Python сервера приложений в HTML-документ.
Кроме того, на странице .html есть некоторый JavaScriptэто, чтобы получить уровень воды каждые X минут, и обновить страницу. Поэтому, если пользователь заходит на вашу страницу и остается на ней в течение 10 минут, страница будет автоматически обновляться каждую минуту.
Чтобы развернуть приложение, ознакомьтесь с документацией Flask, там есть несколько хороших опций и инструкций, включая инструкциидля Героку. https://flask.palletsprojects.com/en/1.0.x/deploying/
* Примечание. Я не запускал этот код, но он должен дать вам хорошую отправную точку. Также рекомендуется организовать ваши css, javascript и html в разных файлах, но для такого небольшого приложения и для простоты все показано в одном файле.