Raspberry Pi 호스트에 CPU 온도, CPU로드 등을 나타내는 다이얼이있는 웹 페이지를 실시간으로 제공하려면 어떻게해야합니까?

유닉스 명령과 스크립팅에 능숙하지만 웹 경험이 거의 없습니다. CPU로드 또는 시스템 온도와 같은 관심있는 메트릭을 잡고 10 초마다 파일을 업데이트하는 스크립트가 있습니다. 이 데이터의 실시간 업데이트 그래픽 표현이있는 Raspberry Pi에서 호스팅하는 로컬 웹 사이트를 iPad로 지정하고 싶습니다.

간단한 Apache 웹 서버를 설정하기 전에 작업했으며 HTML 및 JavaScript를 작성할 수 있습니다. 게다가, 나는 길을 잃었고 올바른 방향으로 나를 가리킬 누군가가 필요합니다.

내 Raspberry Pi 3에서 이를 위해 Grafana 와 InfluxDB 를 함께 사용 합니다. 상대적으로 설치 및 연결이 비교적 쉽습니다. 그들은 심지어 Raspberry Pi의 Docker 컨테이너 에서도 잘 작동합니다 .

모든 업데이트가 생성 될 때 InfluxDB로 스트리밍합니다. 그런 다음 Grafana는 멋진 그래픽 형식으로 표시하는 모든 그래픽 작업을 수행합니다. 화면이 작은 기존 iPad 전용의 간단한 대시 보드를 설계했습니다.

설치 및 오버 헤드가 많은 것처럼 들리지만 확실히 예쁘게 보입니다.

Raspberry에서 모니터링 페이지를 설정 (및 확장) 할 수있는 가볍고 매우 쉬운 웹 모니터링 대시 보드를 갖기 위해 RPi 모니터 를 가지고 있습니다 .

일부 기본값이 제공되며 구성은 대부분 간단한 텍스트 파일을 편집합니다. DTH21에서 습도 그래프를 쉽게 추가하도록 구성했습니다.

웹상의 실시간 응용 프로그램의 경우 가장 좋은 도구는 WebSocket 입니다. 일반적으로 이들은 웹 서버가 아닌 응용 프로그램 서버에서 구현되지만 Apache는 웹 소켓을 프록시하는 방법을 제공합니다. 이는 초당 또는 1 초 미만의 업데이트를 쉽게 제공 할 수 있습니다.

응용 프로그램 서버에서 사용하는 라이브러리는 사용하려는 웹 플랫폼에 따라 다르지만 예를 들어 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 쿠키 및 HTTP 헤더 포함 )과 HTML5를 잘 이해해야합니다 .

Ajax 및 WebSocket 기술 을 사용할 수 있습니다 (WebSocket은 libonion & Wt에서 지원되며 Ajax는 클라이언트 브라우저에서 실행되는 JavaScript 코드로 시작된 일반 HTTP 요청을 제공함). 그래픽에 HTML5 캔버스 및 / 또는 SVG 를 사용할 수 있습니다 . 일부 HTML5 웹 프레임 워크가 유용 할 수 있습니다 . 대부분 자바 스크립트, DOM, HTML5 등을 사용하고 있습니다.