Apa yang harus saya lakukan agar Raspberry Pi saya meng-host halaman web dengan tombol yang menunjukkan suhu CPU, beban CPU, dll., Dalam waktu nyata?

27

Saya baik dengan perintah dan skrip Unix, tetapi saya hampir tidak memiliki pengalaman web. Saya memiliki skrip yang mengambil metrik yang saya minati, seperti beban CPU atau sistem temp dan memperbarui file setiap 10 detik. Saya ingin mengarahkan iPad saya ke situs web lokal yang dihosting oleh Raspberry Pi saya, yang memiliki representasi grafik yang diperbarui secara real-time dari data ini.

Saya telah bekerja sebelum membuat server web Apache sederhana, dan saya dapat menulis HTML dan JavaScript. Selain itu, saya tersesat dan membutuhkan seseorang untuk mengarahkan saya ke arah yang benar.

unix apache-http-server raspberry-pi gui jake9115
sumber
2
Pertanyaan Anda agak terlalu luas. Apakah Anda menginginkan solusi cepat dan kotor, atau Anda ingin membuat kode program minimal yang sesuai dengan sistem Linux yang tertanam sekalipun?
Basile Starynkevitch
Saya awalnya mencari sesuatu yang cepat dan kotor, tetapi ketersediaan alat yang sangat bagus yang disebutkan di bawah sekarang membuat saya lebih tertarik.
jake9115
FYI ada juga Raspberry Pi Stack: raspberrypi.stackexchange.com
Todd Wilcox
github.com/firehol/netdata sangat mudah diatur. Belum mengujinya pada Pi
Der Hochstapler

Jawaban:

30

Saya menggunakan Grafana dengan InfluxDB untuk ini di Raspberry Pi 3. Keduanya relatif mudah disetel dan terhubung satu sama lain. Mereka bahkan bekerja dengan baik dalam wadah Docker di Raspberry Pi.

Saya mengalirkan semua pembaruan saya ke InfluxDB saat dibuat. Kemudian Grafana melakukan semua pekerjaan grafis untuk menampilkannya dalam format visual yang bagus. Saya merancang dasbor sederhana hanya untuk iPad lama saya dengan layar yang lebih kecil.

Memang terdengar seperti banyak menginstal dan overhead, tetapi memang terlihat cantik.

Masukkan deskripsi gambar di sini

0xACE
sumber
Sangat keren. Apakah Anda memiliki screenshot dari monitor Grafana Anda? Hanya penasaran.
jake9115
Ya. Mungkin tidak masuk akal, yang satu ini adalah mish-mash hal. Terkunci di komputer saya, jadi tidak berukuran seperti yang terlihat di iPad.
0xACE
Tampak luar biasa, tidak sabar untuk menyiapkan tambang! Saya memiliki server pi oranye 16 simpul yang akan cocok untuk ini. Terima kasih lagi.
jake9115
(diluar topik) Saya melihat pertanyaan Anda yang lain tentang bergabungnya Pi bersama menjadi sesuatu yang tampak seperti papan tunggal dengan banyak inti. Akan mengirim catatan bahwa orang HPC di kampus tempat saya bekerja telah membuat sebuah sistem tetapi kemudian ingat dia menggunakan "anak mesin" yang tidak melakukan apa yang Anda cari.
0xACE
1
@ 0xACE Mempertimbangkan pada pi adalah ide yang sangat buruk untuk melakukan spamming pada server apache dengan permintaan juga. Juga 10-an mengacu pada penanya setup saat ini sedangkan mereka menginginkan sesuatu lebih cepat.
jdwolf
9

Untuk memiliki dasbor pemantauan web yang ringan dan sangat mudah untuk mengatur (dan memperluas) halaman pemantauan pada Raspberry Anda, Anda telah memiliki RPi Monitor .

Muncul dengan beberapa default dan sebagian besar konfigurasi mengedit beberapa file teks sederhana. Saya mengkonfigurasinya dengan mudah untuk menambahkan grafik kelembaban dari DTH21.

img_link img_link2

Rui F Ribeiro
sumber
2
Saya menghargai kontribusinya; ini tampaknya sangat ringan dan mungkin pilihan grafik yang bagus sementara saya belajar mengatur beberapa solusi yang lebih terlibat di sini. Terima kasih!
jake9115
Sama sama. Saya sudah menggunakannya selama hampir 3 tahun di rumah. lihat pertanyaan terkait electronics.stackexchange.com/questions/236530/...
Rui F Ribeiro
6

Untuk aplikasi waktu nyata di web alat terbaik adalah WebSocket . Biasanya ini diimplementasikan di server aplikasi, bukan server web, tetapi Apache menyediakan cara untuk proxy websockets. Ini dapat dengan mudah menyediakan pembaruan per detik atau subsecond.

Pustaka mana yang Anda gunakan pada server aplikasi tergantung pada platform web apa yang ingin Anda gunakan, tetapi misalnya yang populer untuk Node.js adalah Socket.IO.

Di sisi klien Anda dapat mengatur koneksi seperti ini:

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

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

Di sisi server dengan Node.js menggunakan pustaka WebSocket dasar:

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);
  });
});
jwwolf
sumber
1
Terima kasih untuk idenya. Ini sangat berguna, tetapi terlihat seperti banyak dasar, yang bisa dimengerti.
jake9115
2
@ jake9115 Heh baik pertanyaan Anda tampaknya menyarankan Anda tertarik untuk membuat aplikasi ini sendiri.
jdwolf
2
Sejujurnya aku benar-benar bertujuan untuk kode itu sendiri, tetapi grafana itu tampak sangat licin sehingga aku tidak ingin menemukan kembali roda yang satu ini. Terimakasih Meskipun!
jake9115
4

Anda juga bisa melihat Node-RED https://nodered.org Muncul di Raspbian

Inilah dashboard yang saya buat masukkan deskripsi gambar di sini

jwygralak67
sumber
Saya akan memeriksanya, terima kasih atas kontribusinya.
jake9115
1
Saya menggunakan Node-Red dengan pengaturan saya, tetapi data historis hanya valid selama instance Anda berjalan. Artinya, jika Anda memindahkan (atau kehilangan daya) tidak ada pengukuran historis yang disimpan, bagan Anda semua dimulai dari nol. Fitur itulah yang mendorong saya untuk mulai masuk ke InfluxDB.
0xACE
Ah, senang tahu. Data historis penting bagi saya. Saya sangat suka bagaimana grafik Anda bahkan memasukkan info berbasis web lainnya, seperti harga bitcoin. Itu di luar ruang lingkup awal saya, tetapi tidak lagi.
jake9115
Ya, contoh itu saya bahkan memasukkan data dari aplikasi yang saya miliki di iOS App Store (untuk Boy Scouts melakukan belokan baik) yang menyimpan datanya ke dalam google fire base. Itu peta di bagian bawah. Saya menggunakan simpul merah untuk menarik data dari basis api dan mendorongnya ke arus masuk, jadi itu tidak semua masuknya dan grafana.
0xACE
2

Saya menggunakan phpSysInfo untuk memonitor semua server / komputer Linux saya, dan saya sangat suka betapa sederhananya. Pengaturannya juga sangat mudah dimengerti, dan Anda dapat mengatur kecepatan refresh Anda sendiri.

McMuffin
sumber
1

Jika Anda ingin kode dalam C atau C ++, Anda mungkin menggunakan beberapa perpustakaan server HTTP seperti libonion atau Wt untuk mengkode server HTTP khusus Anda (mungkin menggunakan sqlite untuk basis data). Anda kemudian harus memahami dengan baik protokol HTTP (termasuk cookie HTTP dan header HTTP ) dan HTML5 .

Anda mungkin ingin menggunakan teknik Ajax dan WebSocket (WebSockets didukung oleh libonion & Wt, Ajax memberikan permintaan HTTP biasa yang dimulai oleh kode JavaScript yang dijalankan di browser klien). Anda dapat menggunakan kanvas HTML5 dan / atau SVG untuk grafik. Anda mungkin menemukan beberapa kerangka kerja web HTML5 berguna; kebanyakan dari mereka menggunakan Javascript, DOM, HTML5, ....

Basile Starynkevitch
sumber