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

Je suis bon avec les commandes et les scripts Unix, mais je n'ai pratiquement aucune expérience Web. J'ai un script qui saisit 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 a une représentation graphique de mise à jour en temps réel de ces données.

J'ai travaillé avant de configurer un simple serveur Web Apache 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.

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

Je diffuse toutes mes mises à jour dans InfluxDB au fur et à mesure qu'elles sont générées. Grafana fait alors tout le travail graphique de les afficher dans un joli format visuel. J'ai conçu un tableau de bord simple pour mon ancien iPad avec son écran plus petit.

Cela ressemble à beaucoup d'installation et de surcharge, mais cela a l'air joli.

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 disposez de RPi Monitor .

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

Pour les applications en temps réel sur le Web, le meilleur outil est WebSocket . Habituellement, ceux-ci sont implémentés 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 une populaire pour Node.js est Socket.IO.

Côté client, vous pouvez configurer une connexion comme celle-ci:

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

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

Côté 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);
  });
});

Vous pouvez également consulter Node-RED https://nodered.org Il est disponible sur Raspbian

Voici un tableau de bord que j'ai construit

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.

Si vous souhaitez coder en C ou C ++, vous pouvez utiliser une bibliothèque de serveur HTTP comme 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 les en-têtes HTTP ) et HTML5 .

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