SEITEN

RasPi Zero Hub – Webinterface & Konfiguration per WebSocket

Veröffenticht am 17.03.2026 von Raab Wolfgang in der Kategorie Projekt: RasPi Zero Hub, Raspberry Pi bisher keine Reaktionen

LINKS NOCH BEARBEITEN!!!!

Im vorherigen Beitrag habe ich die Sensorik sowie die Messwert-Aufbereitung des RasPi Zero Hub beschrieben.

Dieser Artikel widmet sich einem zentralen Merkmal des Projekts: der Laufzeit-Konfiguration ohne Neustart.

Der RasPi Zero Hub ist kein statisches Messgerät. Viele Parameter sollen im Betrieb angepasst werden können – ohne:

Neustart des Raspberry Pi
erneutes Einlesen von Konfigurationsdateien
Unterbrechung der Messungen

Genau hier kommt der WebSocket-Ansatz zum Einsatz.

1. Warum WebSocket statt klassischer Konfigurationsdatei?

Eine klassische Konfigurationsdatei hat zwei strukturelle Nachteile:

Änderungen erfordern Neustart oder Reload
Der aktuelle Zustand ist nicht live sichtbar

Der RasPi Zero Hub nutzt deshalb WebSockets, um:

Konfigurationswerte live zu ändern
Statusinformationen zurückzugeben
eine direkte Verbindung zwischen Browser und Python-Logik herzustellen

Der WebSocket läuft ausschließlich lokal auf dem Raspberry Pi und ist kein Remote-Steuerungssystem.

2. Rolle des Webinterfaces

Das Webinterface ist eine reine Steuer- und Konfigurationsoberfläche.

Über das Webinterface können u. a. angepasst werden:

Schwellenwerte
Anzeigezeiten
Aktivierung externer Dienste
Speicherintervalle
LED-Steuerungszeiten

Alle Änderungen wirken sofort.

3. Architektur: Wer spricht mit wem?

Die Kommunikation erfolgt in drei Schritten:

Browser verbindet sich per WebSocket
Python-Server empfängt JSON-Nachrichten
Python aktualisiert interne Variablen

Der WebSocket greift niemals direkt auf Sensoren zu und schreibt keine Datenbank.

4. Browser-Seite: Aufbau der WebSocket-Verbindung

Im Webinterface wird die Verbindung aktiv aufgebaut.

&lt;script&gt;
var ws = new WebSocket("ws://"+document.location.host+":9090/websocket");

ws.onopen = function() {
    document.getElementById('connection_status').textContent = "Verbunden";
    requestData();
};

ws.onmessage = function(event) {
    var data = JSON.parse(event.data);

    if (data.aktuelle_seite !== undefined) {
        document.getElementById('new_value').value = data.aktuelle_seite;
    }

    if (data.mittelwert_temp !== undefined) {
        document.getElementById('mittelwert_temp').textContent = data.mittelwert_temp;
    }
};
&lt;/script&gt;

var ws = new WebSocket("ws://"+document.location.host+":9090/websocket");

ws.onopen = function() {

document.getElementById('connection_status').textContent = "Verbunden";

requestData();

};

ws.onmessage = function(event) {

var data = JSON.parse(event.data);

if (data.aktuelle_seite !== undefined) {

document.getElementById('new_value').value = data.aktuelle_seite;

}

if (data.mittelwert_temp !== undefined) {

document.getElementById('mittelwert_temp').textContent = data.mittelwert_temp;

}

};

</script>

Das Webinterface übernimmt ausschließlich Anzeige und Transport.

Es enthält keine Entscheidungslogik.

5. Senden von Konfigurationsdaten

Änderungen werden als strukturierte JSON-Pakete übertragen.

&lt;script&gt;
function setData() {
    var newSchwellenwert = document.getElementById('new_LUFTFEUCHTIGKEIT_SCHWELLENWERT').value;

    var message = { command: "set_data" };

    if (newSchwellenwert) {
        message.LUFTFEUCHTIGKEIT_SCHWELLENWERT = parseInt(newSchwellenwert);
    }

    ws.send(JSON.stringify(message));
}
&lt;/script&gt;

function setData() {

var newSchwellenwert = document.getElementById('new_LUFTFEUCHTIGKEIT_SCHWELLENWERT').value;

var message = { command: "set_data" };

if (newSchwellenwert) {

message.LUFTFEUCHTIGKEIT_SCHWELLENWERT = parseInt(newSchwellenwert);

}

ws.send(JSON.stringify(message));

}

</script>

Der Browser sendet nur explizit gesetzte Werte.

Es erfolgt kein pauschales Überschreiben aller Konfigurationsparameter.

6. WebSocket-Server in Python

Der WebSocket-Server läuft parallel zur Sensorlogik.

async def websocket_handler(websocket, path):
    async for message in websocket:
        daten = json.loads(message)
        await verarbeite_konfiguration(daten)

async def websocket_handler(websocket, path):

async for message in websocket:

daten = json.loads(message)

await verarbeite_konfiguration(daten)

Jede Nachricht ist ein JSON-Objekt.

Es gibt keine Einzelbefehle, sondern strukturierte Zustände.

7. Übernahme der Konfigurationswerte

Die empfangenen Daten werden geprüft und in interne Variablen übernommen.

if "LUFTFEUCHTIGKEIT_SCHWELLENWERT" in daten:
    LUFTFEUCHTIGKEIT_SCHWELLENWERT = daten["LUFTFEUCHTIGKEIT_SCHWELLENWERT"]

if "display_anzeige_dauer" in daten:
    display_anzeige_dauer = daten["display_anzeige_dauer"]

if "extern_datenbank_aktiv" in daten:
    extern_datenbank_aktiv = daten["extern_datenbank_aktiv"]

if "LUFTFEUCHTIGKEIT_SCHWELLENWERT" in daten:

LUFTFEUCHTIGKEIT_SCHWELLENWERT = daten["LUFTFEUCHTIGKEIT_SCHWELLENWERT"]

if "display_anzeige_dauer" in daten:

display_anzeige_dauer = daten["display_anzeige_dauer"]

if "extern_datenbank_aktiv" in daten:

extern_datenbank_aktiv = daten["extern_datenbank_aktiv"]

Die Änderungen wirken unmittelbar.

Zusätzlich erfolgt eine persistente Speicherung:

konfiguration_speichern(
    sensor_name,
    sensor_standort,
    terminalausgabe,
    LUFTFEUCHTIGKEIT_SCHWELLENWERT,
    display_anzeige_dauer,
    OWM_API_Activ,
    OWM_API_KEY,
    OWM_Lat,
    OWM_Lon,
    extern_datenbank_aktiv,
    extern_datenbank_api_key,
    extern_datenbank_speicherintervall,
    beginn_led_steuerung,
    ende_led_steuerung,
    daten_speicherintervall
)

konfiguration_speichern(

sensor_name,

sensor_standort,

terminalausgabe,

LUFTFEUCHTIGKEIT_SCHWELLENWERT,

display_anzeige_dauer,

OWM_API_Activ,

OWM_API_KEY,

OWM_Lat,

OWM_Lon,

extern_datenbank_aktiv,

extern_datenbank_api_key,

extern_datenbank_speicherintervall,

beginn_led_steuerung,

ende_led_steuerung,

daten_speicherintervall

)

Damit bleiben Änderungen auch nach einem Neustart erhalten.

8. Rückmeldung an den Browser

Der WebSocket dient auch der Statusübertragung.

status = {
    "mittelwert_temp": temp_innen,
    "mittelwert_luftfeuchtigkeit": luftfeuchte_innen,
    "bme_luftdruck": bme_luftdruck,
    "extern_datenbank_aktiv": extern_datenbank_aktiv
}

await websocket.send(json.dumps(status))

status = {

"mittelwert_temp": temp_innen,

"mittelwert_luftfeuchtigkeit": luftfeuchte_innen,

"bme_luftdruck": bme_luftdruck,

"extern_datenbank_aktiv": extern_datenbank_aktiv

}

await websocket.send(json.dumps(status))

Der Browser sieht jederzeit:

aktuelle Messwerte
aktive Konfiguration
Systemzustand

9. Touchsensor als Interaktionsebene

Neben dem Webinterface existiert eine physische Eingabe: der Touchsensor.

def touchsensor_überwachen():
    global aktuelle_seite

    last_state = GPIO.LOW

    while True:
        current_state = GPIO.input(touchsensor)

        if current_state == GPIO.HIGH and last_state == GPIO.LOW:
            time.sleep(0.05)

            if GPIO.input(touchsensor) == GPIO.HIGH:
                if aktuelle_seite &lt; max_anzahl_displayseiten:
                    aktuelle_seite += 1
                else:
                    aktuelle_seite = 1

        last_state = current_state
        time.sleep(0.05)

def touchsensor_überwachen():

global aktuelle_seite

last_state = GPIO.LOW

while True:

current_state = GPIO.input(touchsensor)

if current_state == GPIO.HIGH and last_state == GPIO.LOW:

time.sleep(0.05)

if GPIO.input(touchsensor) == GPIO.HIGH:

if aktuelle_seite < max_anzahl_displayseiten:

aktuelle_seite += 1

else:

aktuelle_seite = 1

last_state = current_state

time.sleep(0.05)

Der Touchsensor verändert ausschließlich die Anzeige-Seite.

Er trifft keine Entscheidungen über Messwerte oder Logik.

Damit bleibt auch hier die Zuständigkeit klar getrennt.

10. Sicherheit & Abgrenzung

Der WebSocket ist bewusst:

nicht über das Internet erreichbar
nicht authentifiziert
nicht für fremde Clients gedacht

Er ist Teil des lokalen Geräts – vergleichbar mit einem Konfigurationsmenü an einem Display.

Externe Kommunikation erfolgt ausschließlich über die dedizierte API.

11. Fazit

Der WebSocket ist das Bindeglied zwischen Nutzer und laufendem System.

Er ermöglicht:

Live-Konfiguration
transparente Zustände
flexible Anpassungen ohne Neustart

Gleichzeitig bleibt die Kernlogik vollständig im Python-Code.

Der WebSocket setzt Zustände.

Die Logik entscheidet.

Wenn du diese Artikelserie bisher nicht kennst, hier sind die bisher erschienenen Einträge des Projekttagebuchs.

Der vollständige Projektcode des RasPi Zero Hub steht als Download zur Verfügung.
Alle Python-Dateien, Konfigurationen sowie die Weboberfläche sind dort gebündelt abrufbar:

👉 Zum Download des vollständigen Projektcodes

Transparenz-Hinweis:

Die auf dieser Seite verwendeten Produktlinks sind sogenannte Affiliate-Links zu einem Partnerprogramm. Für dich entstehen dadurch keine Mehrkosten, ich erhalte durch deinen Kauf über den Link eine kleine Provision.

Wolfgang Raab – Betreiber von webnist.de

Mein Name ist Wolfgang, ich beschäftige mich nun schon seit 1985 mit der EDV und im Besonderen mit der Software- und Webentwicklung.

Auf diesem Blog schreibe ich über Dinge, die mich begeistern, beschäftigen und ich der Meinung bin, es könnte für andere interessant und hilfreich sein.

Als großer Fan des Raspberry Pi finde ich es spannend, wie man den kleinen Computer in Verbindung mit dem IoT und Smart Home nutzen kann. Deshalb behandeln viele Beiträge auch genau dieses Thema.

Ich bin ein leidenschaftlicher Leser und Fotograf. Wenn ich nicht gerade in einem spannenden Roman versinke, bin ich oft unterwegs, um die Schönheit der Welt mit meiner Kamera einzufangen und zu teilen.

Weitere Infos und Fotos findest du auf einem der folgenden Plattformen.

Mehr erfahren?

Besuche die "About"-Seite meines Blogs und finde heraus, wie du mit mir in den Bereichen Web- und Mobile-Programmierung und Raspberry Pi zusammenarbeiten kannst. Hier beginnt deine digitale Reise.

Unterstützen

Dieser Beitrag hat dir gefallen und konnte dir bei deinem Projekt oder Problem behilflich sein? Dann würde ich mich sehr freuen, wenn du dich mit einer noch so kleinen Spende erkenntlich zeigen möchtest.

Schreibe einen Kommentar Antwort abbrechen

Kleiner Hinweis, alle Kommentare werden moderiert.

Dies bedeutet, der Kommentar wird vor der Veröffentlichung durchgelesen und von mir geprüft. Auch behalte ich mir vor, jeden Kommentar zu löschen, der nicht direkt auf das Thema abzielt oder nur den Zweck hat, Leser oder Autoren herabzuwürdigen.