web-dev-qa-db-fra.com

Que dois-je faire pour que mon hôte Raspberry Pi héberge une page Web avec des molettes indiquant la température, la charge, etc. du processeur, en temps réel?

Je suis bon avec les commandes Unix et les scripts, mais je n’ai presque aucune expérience Web. J'ai un script qui capture les mesures qui m'intéressent, comme la charge du processeur ou la température du système, et met à jour un fichier toutes les 10 secondes. Je voudrais pointer mon iPad vers un site Web local hébergé par mon Raspberry Pi, qui dispose d'une représentation graphique de mise à jour en temps réel de ces données.

J’ai travaillé avant de configurer un serveur Web Apache simple et je peux écrire du HTML et du JavaScript. En plus de cela, je suis perdu et j'ai besoin de quelqu'un pour me diriger dans la bonne direction.

unixapache-http-serverraspberry-pigui
28
jake9115

J'utilise Grafana avec InfluxDB pour cela sur mon Raspberry Pi 3. Ils sont à la fois relativement faciles à installer et à connecter les uns aux autres. Ils fonctionnent même bien dans des conteneurs Docker sur le Raspberry Pi.

Je diffuse toutes mes mises à jour dans InfluxDB à mesure qu’elles sont générées. Ensuite, Grafana effectue tout le travail graphique consistant à les afficher dans un format visuel agréable. J'ai conçu un tableau de bord simple juste pour mon ancien iPad avec son écran plus petit.

Cela ressemble à beaucoup d’installation et de frais généraux, mais ça a l'air joli.

Enter image description here

31
0xACE

Pour avoir un tableau de bord de surveillance Web léger et très facile à configurer (et étendre) la page de surveillance sur votre Raspberry, vous avez le moniteur RPi .

Il est livré avec quelques valeurs par défaut et la configuration consiste principalement à éditer quelques simples fichiers texte. Je l'ai configuré facilement pour ajouter des graphiques d'humidité à partir d'un DTH21.

img_linkimg_link2

10
Rui F Ribeiro

Pour les applications Web en temps réel, le meilleur outil est WebSocket . Celles-ci sont généralement implémentées dans le serveur d'applications, pas le serveur Web, mais Apache fournit un moyen de proxy Websockets. Cela pourrait facilement fournir des mises à jour par seconde ou sous-seconde.

La bibliothèque que vous utilisez sur le serveur d'applications dépend de la plate-forme Web que vous souhaitez utiliser, mais par exemple, Socket.IO est l'une des plus populaires pour Node.js.

Du côté client, vous pouvez configurer une connexion comme ceci:

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

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

Sur le serveur avec Node.js à l’aide de la bibliothèque WebSocket de base:

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);
  });
});
7
jdwolf

Vous pouvez également regarder Node-RED https://nodered.org Il est livré en stock sur Raspbian

Voici un tableau de bord que j'ai construit enter image description here

5
jwygralak67

J'utilise phpSysInfo pour surveiller tous mes serveurs/ordinateurs Linux, et j'aime vraiment sa simplicité. Les paramètres sont également très faciles à comprendre et vous pouvez définir votre propre taux de rafraîchissement.

2
McMuffin

Si vous souhaitez coder en C ou C++, vous pouvez utiliser une bibliothèque de serveur HTTP telle que libonion ou Wt pour coder votre serveur HTTP spécialisé (peut-être en utilisant sqlite pour la base de données). Vous devez alors bien comprendre le protocole HTTP (y compris les cookies HTTP et en-têtes HTTP ) et HTML5 .

Vous voudrez peut-être utiliser les techniques Ajax et WebSocket (les WebSockets sont supportés par libonion & Wt, Ajax donne les requêtes HTTP ordinaires lancées par le code JavaScript exécuté dans le navigateur client). Vous pouvez utiliser les canevas HTML5 et/ou SVG pour les graphiques. Vous pouvez trouver des frameworks Web HTML5 utiles; la plupart utilisent Javascript, DOM, HTML5, ....

2
Basile Starynkevitch