What do I need to do to have my Raspberry Pi host a webpage with dials indicating CPU temperature, CPU load, etc., in real time?

I use Grafana with InfluxDB for this on my Raspberry Pi 3. They are both relatively easy to setup and connect to each other. They even work well in Docker containers on the Raspberry Pi.

I stream all my updates into InfluxDB as they are generated. Then Grafana does all the graphical work of displaying them in a nice visual format. I designed a simple dashboard just for my old iPad with its smaller screen.

It does sound like a lot of installing and overhead, but it sure does look pretty.

Enter image description here


For having a lightweight and very easy web monitoring dashboard to setup (and extend) monitoring page on your Raspberry you have got RPi Monitor.

It comes with some defaults and the configuration is mostly editing a couple of simple text files. I configured it easily to add humidity graphs from a DTH21.

img_link img_link2


For realtime applications on the web the best tool is WebSocket. Usually these are implemented in the application server, not the web server, but Apache provides a way to proxy websockets. This could easily provide per second or subsecond updates.

Which library you use on the application server depends on what web platform you want to use, but for example a popular one for Node.js is Socket.IO.

On the client side you can set up a connection like this:

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

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

On the server side with Node.js using the basic WebSocket library:

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