Что мне нужно сделать, чтобы мой Raspberry Pi размещал веб-страницу с циферблатами, показывающими температуру процессора, загрузку процессора и т. Д. В режиме реального времени?

27

Я хорошо разбираюсь в командах и скриптах Unix, но у меня почти нет опыта работы в Интернете. У меня есть скрипт, который получает интересующие меня метрики, такие как загрузка процессора или системная температура, и обновляет файл каждые 10 секунд. Я хотел бы указать свой iPad на локальный веб-сайт, размещенный на моем Raspberry Pi, который в реальном времени обновляет графическое представление этих данных.

Я работал до настройки простого веб-сервера Apache, и я могу писать HTML и JavaScript. Кроме того, я потерялся, и мне нужен кто-то, чтобы указать мне правильное направление.

jake9115
источник
2
Ваш вопрос слишком широкий. Вы хотите быстрое и грязное решение или хотите написать минимальную программу, которая подходит даже для небольших встроенных систем Linux?
Старынкевич,
Первоначально я искал что-то быстрое и грязное, но наличие очень хороших инструментов, упомянутых ниже, теперь заинтересовало меня.
jake9115
К вашему сведению, есть также Raspberry Pi Stack: raspberrypi.stackexchange.com
Тодд Уилкокс,
github.com/firehol/netdata очень прост в настройке. Хотя я не проверял его на Pi
Der Hochstapler

Ответы:

30

Я использую Grafana с InfluxDB для этого на моем Raspberry Pi 3. Они относительно просты в настройке и подключаются друг к другу. Они даже хорошо работают в контейнерах Docker на Raspberry Pi.

Я передаю все свои обновления в InfluxDB по мере их создания. Затем Графана выполняет всю графическую работу, отображая их в хорошем визуальном формате. Я разработал простую приборную панель только для моего старого iPad с меньшим экраном.

Это звучит как много установки и накладных расходов, но это действительно выглядит красиво.

Введите описание изображения здесь

0xACE
источник
Очень круто. У вас есть скриншоты ваших мониторов Grafana? Просто любопытно.
jake9115
Ага. Может не иметь особого смысла, это мешанина вещей. Защелкнулся на моем компьютере, поэтому не размером, как это выглядит на iPad.
0xACE
Выглядит потрясающе, не могу дождаться, чтобы настроить мой! У меня есть 16-ти узловый сервер оранжевого пи, для которого это будет идеально. Еще раз спасибо.
jake9115
(не по теме) Я видел ваш другой вопрос о том, как соединить Pi в нечто, похожее на единую плату с несколькими ядрами. Собирался отправить записку о том, что парень из HPC в колледже, в котором я работаю, настроил систему, но потом вспомнил, что он использовал «сына сетевого грида», который не делает то, что вы искали.
0xACE
1
@ 0xACE Учитывая, что это пи, очень плохая идея спамить сервер apache запросами. Также 10s относится к текущей настройке аскеров, тогда как они хотят чего-то более быстрого.
jdwolf
9

Для того, чтобы иметь легкую и очень простую панель мониторинга сети для настройки (и расширения) страницы мониторинга на Raspberry, у вас есть RPi Monitor .

Он поставляется с некоторыми значениями по умолчанию, и конфигурация в основном редактирует пару простых текстовых файлов. Я легко настроил добавление графиков влажности от DTH21.

img_link img_link2

Руи Ф Рибейро
источник
2
Я ценю вклад; это кажется действительно легким и, возможно, хорошим выбором для построения графиков, в то время как я учусь настраивать некоторые из наиболее сложных решений здесь. Благодарность!
jake9115
Добро пожаловать. Я использовал это в течение почти 3 лет дома. см. связанный вопрос electronics.stackexchange.com/questions/236530/…
Руи Ф. Рибейро,
6

Для приложений реального времени в Интернете лучшим инструментом является WebSocket . Обычно они реализуются на сервере приложений, а не на веб-сервере, но Apache предоставляет способ прокси-веб-сокетов. Это может легко обеспечить обновления в секунду или в секунду.

Какая библиотека вы используете на сервере приложений, зависит от того, какую веб-платформу вы хотите использовать, но, например, популярной для Node.js является Socket.IO.

На стороне клиента вы можете настроить соединение следующим образом:

socket = new WebSocket("ws://website.net:8282");

socket.addEventListener('message', function (event) {
    var message = event.data;
    // Code to update site
});

На стороне сервера с Node.js, использующим базовую библиотеку WebSocket:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8282 });
wss.on('connection', function connection(ws) {
  dataOnUpdateEvent(function(event) {
    var data = event.getdata();
    var message = parseData(data);
    ws.send(message);
  });
});
jdwolf
источник
1
Спасибо за идею. Это очень полезно, но похоже на множество наработок, что понятно.
jake9115
2
@ jake9115 Хех хорошо, похоже, ваш вопрос подсказывает, что вы заинтересованы в создании этого приложения самостоятельно.
jdwolf
2
Вообще-то, честно говоря, я действительно стремился кодировать его сам, но эта графана выглядит так ловко, что я не хотел бы изобретать велосипед на этом. Спасибо хоть!
jake9115
4

Вы также можете взглянуть на Node-RED https://nodered.org. Он выходит на Raspbian.

Вот приборная панель, которую я построил введите описание изображения здесь

jwygralak67
источник
Я посмотрю на это, спасибо за вклад.
jake9115
1
Я использую Node-Red с моей настройкой, но исторические данные действительны только до тех пор, пока работает ваш экземпляр. То есть, если вы передислоцируете (или потеряете власть), ни одно из исторических измерений не будет сохранено, все ваши диаграммы начинаются заново с нуля. Именно это побудило меня начать входить в InfluxDB.
0xACE
Ах, приятно знать. Исторические данные важны для меня. Мне очень нравится, как ваши графики даже включают в себя другую информацию, такую ​​как цены на биткойны. Это было за пределами моей первоначальной сферы, но не больше.
jake9115
Да, в этом примере я даже включаю данные из приложения, которое у меня есть в iOS App Store (для бойскаутов, делающих хорошие ходы), которое хранит эти данные в базе данных Google. Это карта внизу. Я использую красный узел, чтобы вытащить данные из базы огня и подтолкнуть их к притоку, так что это не весь приток и графана.
0xACE
2

Я использую phpSysInfo для мониторинга всех моих серверов / компьютеров с Linux, и мне очень нравится, насколько это просто. Настройки также очень просты для понимания, и вы можете установить собственную частоту обновления.

McMuffin
источник
1

Если вы хотите кодировать на C или C ++, вы можете использовать некоторую библиотеку HTTP-сервера, такую ​​как libonion или Wt , для кодирования вашего специализированного HTTP-сервера (возможно, с использованием sqlite для базы данных). Затем вы должны хорошо понимать HTTP протокола (включая HTTP печенье и HTTP заголовки ) и HTML5 .

Возможно, вы захотите использовать методы Ajax и WebSocket (WebSockets поддерживаются libonion & Wt, Ajax выдает обычные HTTP-запросы, инициированные кодом JavaScript, выполняющимся в клиентском браузере). Вы можете использовать HTML5 canvas и / или SVG для графики. Вы можете найти некоторые веб-фреймворки HTML5 полезными; большинство из них используют Javascript, DOM, HTML5, ....

Василий Старынкевич
источник