Einfache node.js App: Client–Server Kommunikation + jQuery und Bootstrap + GPIO-Steuerung auf Raspberry Pi

Um mich etwas in die Funktionsweise und das Zusammenspiel von node.js, socket.io und die Steuerung bzw. Überwachung der GPIOs per Browser einzuarbeiten habe ich mir Schritt für Schritt ein Template für solch einer Art von Apps zusammengestellt,

Ich habe bereits von meinen erste, ganz simplen Versuchen in meinem Blog berichtet. Diesmal wird das ganze in soweit ergänzt das ich css und javascript bzw. weitere Scripte und Bibliotheken wie jQuery oder Bootstap von einer zentralen Stelle oder auch Bilder einbinden kann.

Herausforderung

Die größte Herausforderung war für mich herauszufinden wie nodes.js mit den verschiedenen Verzeichnissen bzw. Routen umgeht.

Vorbereitung

Aufbau der Grundsätzlichen Verzeichnisstruktur:

Die Core Scripte liegen unter
/var/www/html/core/
Die Node.js App Struktur setzt unter auf

/var/www/node/apps/

Zur Umsetzung werden folgende Pakete (installiert per npm)

  • express –> einfache Erstellung eines http Servers
  • socket.io –> übernimmt die Kommunikation zwischen Server und den Clients
  • onoff –> Kommunikation mit den Raspberry GPIOs

Dort wird per “npm init” die Configuration der App erstellt. Das Ergebnis ist die Datei “package.json”. Ebenfalls liegt hier auch die Datei server.js – die eigentliche APP.

Als nächstes gibt es noch ein “public”  Verzeichnis indem die Client Dateien liegen (index.html, client.js, style.css)

explorer_2018-01-19_17-05-33

Umsetzung

Serversscript(e) (in /var/www/node/apps/):

“server.js”

Hier wird unter Anderem die Vorbereitung der Einbindung der Client Scripte durchgeführt.
In Zeile 4 wird z.B. der Pfad zu den Core Dateien auf „/core“ eingestellt. Damit ist es dann möglich die Skripte im Client vom root „/core“ einzubinden.

Client Scripte (in /var/www/node/apps/public):

“index.html”
client.js
style.css

Das soll nun mein Grundgerüst für weitere Entwicklungen auf dem Raspberry Pi sein. Damit sollte ich gerüstet sein um die nächsten Projekte anzugehen. Ich kann nun vom Browser die GIOs ansprechen und bekomme das Ergebnis auf alle Clients angezeigt. Auch serverseitig können die GPIO’s angesprochen und auch ohne Client verarbeitet werden.

chrome_2018-01-19_17-14-58

Als Nächstes folgt nun die Umsetzung in die Praxis. Ziel ist es eine Temperatursteuerung mit dem Pi umzusetzen.