我需要做什么才能让我的 Raspberry Pi 托管一个网页，该网页带有实时指示 CPU 温度、CPU 负载等的刻度盘？

Question

我擅长 Unix 命令和脚本，但我几乎没有网络经验。我有一个脚本可以获取我感兴趣的指标，例如 CPU 负载或系统温度，并每 10 秒更新一次文件。我想将我的 iPad 指向由我的 Raspberry Pi 托管的本地网站，该网站具有此数据的实时更新图形表示。

我在设置简单的 Apache Web 服务器之前工作过，并且我可以编写 HTML 和 JavaScript。除此之外，我迷路了，需要有人为我指明正确的方向。

Answer 1

为此，我在 Raspberry Pi 3 上使用了Grafana和InfluxDB。它们都相对容易设置和相互连接。它们甚至在 Raspberry Pi 上的Docker容器中运行良好。

我将所有更新在生成时流式传输到 InfluxDB。然后 Grafana 完成所有图形工作，以漂亮的视觉格式显示它们。我为屏幕较小的旧 iPad 设计了一个简单的仪表板。

听起来确实需要大量安装和开销，但确实看起来很漂亮。

Answer 2

为了拥有一个轻量级且非常简单的 Web 监控仪表板来在您的 Raspberry 上设置（和扩展）监控页面，您已经获得了RPi Monitor。

它带有一些默认值，配置主要是编辑几个简单的文本文件。我很容易地将它配置为从 DTH21 添加湿度图。

Answer 3

对于网络上的实时应用程序，最好的工具是WebSocket。通常这些是在应用程序服务器中实现的，而不是在 web 服务器中，但 Apache 提供了一种代理 websockets 的方法。这可以轻松提供每秒或亚秒更新。

您在应用服务器上使用哪个库取决于您想要使用的 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);
  });
});