Raspberry Piで、CPU温度、CPU負荷などをリアルタイムで示すダイヤルを含むWebページをホストするには、何をする必要がありますか？

私はUnixコマンドとスクリプトには長けていますが、Webの経験はほとんどありません。CPU負荷やシステムの温度など、興味のあるメトリックを取得し、10秒ごとにファイルを更新するスクリプトがあります。Raspberry PiがホストするローカルWebサイトにiPadを向けたいと思います。RaspberryPiは、このデータをリアルタイムで更新するグラフィカルな表現を持っています。

私は単純なApache Webサーバーをセットアップする前に働いたことがあり、HTMLとJavaScriptを書くことができます。それに加えて、私は行方不明になっており、誰かが正しい方向に私を向ける必要があります。

Raspberry Pi 3でGrafanaとInfluxDBを使用します。どちらも比較的簡単にセットアップでき、相互に接続できます。Raspberry PiのDockerコンテナでもうまく機能します。

すべての更新は、生成時にInfluxDBにストリーミングします。その後、Grafanaはそれらをすてきな視覚形式で表示するグラフィカルな作業をすべて行います。古いiPadの画面が小さいため、シンプルなダッシュボードを設計しました。

それは多くのインストールとオーバーヘッドのように聞こえますが、確かにきれいに見えます。

Raspberryの監視ページをセットアップ（および拡張）するための軽量で非常に簡単なWeb監視ダッシュボードを使用するには、RPi Monitorを使用します。

いくつかのデフォルトがあり、設定はほとんどいくつかのシンプルなテキストファイルを編集しています。DTH21から湿度グラフを追加するように簡単に構成しました。

Web上のリアルタイムアプリケーションの場合、最適なツールはWebSocketです。通常、これらはWebサーバーではなくアプリケーションサーバーに実装されますが、ApacheはWebソケットをプロキシする方法を提供します。これにより、1秒あたりまたは1秒未満の更新を簡単に提供できます。

アプリケーションサーバーで使用するライブラリは、使用するWebプラットフォームによって異なりますが、たとえばNode.jsで人気のあるライブラリはSocket.IOです。

クライアント側では、次のような接続を設定できます。

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

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

基本的なWebSocketライブラリを使用するNode.jsを使用したサーバー側：

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

Node-RED https://nodered.orgもご覧ください。Raspbian に付属しています

これが私が作成したダッシュボードです

私はphpSysInfoを使用してすべてのLinuxサーバー/コンピューターを監視しますが、そのシンプルさがとても気に入っています。設定も非常にわかりやすく、独自のリフレッシュレートを設定できます。

CまたはC ++でコーディングする場合は、libonionやWtなどのHTTPサーバーライブラリを使用して、特殊なHTTPサーバーをコーディングします（データベースにsqliteを使用するなど）。その後、HTTPプロトコル（HTTP CookieおよびHTTPヘッダーを含む）およびHTML5を十分に理解する必要があります。

AjaxおよびWebSocketテクニックを使用することもできます（WebSocketはlibonion＆Wtでサポートされています。Ajaxは、クライアントブラウザーで実行されるJavaScriptコードによって開始される通常のHTTP要求を提供します）。グラフィックスにはHTML5 キャンバスやSVGを使用できます。いくつかのHTML5 Webフレームワークが 役立つことがあります。それらのほとんどはJavascript、DOM、HTML5などを使用しています。