Website soll API Abfrage ausführen und Statusbild austauschen bei Änderung

Byolock · 06.02.2019

Hallo zusammen,
ich baue aktuell für ein iFrame in MagicMirror ein "Mini Webinterface".

Kurz zu der Funktionsweise / aktueller Stand:
Auf einer html page finden sich zwei Bilder als Link hinzugefügt, welche auf zwei .php Dateien verlinken, welche eigentlich nur den Zweck haben per shell_exec() zwei bash scripte zu starten und anschließend wieder auf die html page umleiten:

Code:

echo shell_exec('/var/www/html/on.sh');
header("location:index.html");

Diese bash Scripte sprechen eine API via " curl 'http://adresse:port/link&auth&befehl' " an und lösen ein AUS/EIN Befehl bei der Software aus. Natürlich sehr umständlich gemacht, aber ich mache gerade meine ersten Schritte in php und html daher ist alles etwas wirr.

Problematik:
Mir fehlt eine Anzeige ob die Software aktuell den Status EIN oder AUS hat. Dafür habe ich zwei weitere Bilder vorbereitet, eines soll Status An und eines Status Aus symbolisieren. Nun muss aber im Hintergrund laufend überprüft werden welchen Status die API zurückgibt, und dann müsste das Bild Ausgetauscht werden, je nach verwendeter Methode muss, nach etwas googeln scheinbar auch noch ein automatischer Reload der Seite erfolgen damit das neue Bild Sichtbar wird. Teilweise habe ich JavaScript Anweisungen gefunden, aber noch eine weitere dritte mir ziemlich unbekannte Programmiersprache zu verwenden würde ich gerne vermeiden. Das einzige was ich in der Richtung finden konnte ein PHP Script "dauerhaft" laufen zu lassen war ein cronjob auf die PHP Datei zu legen und diese in festen abständen auszuführen. Mir ist aber schleierhaft wie ich dann diese PHP Datei verwenden soll um das Bild in der Index Datei austauschen.
Könntet ihr mir ein paar Ratschläge geben wie ich am besten weitermache, brauche ich JavaScript oder reicht PHP? Gibt es irgendeine Lösung mit cronjobs oder muss ich das php script doch selbst dazu bringen sich immer wieder auszuführen? Bin für jeden Ansatz dankbar.

index.html falls benötigt:

Code:

<html>
<head>
<link href="design.css" rel="stylesheet">
</head>
<body>
<center>
<dl class="bildunterschrift">
<dt><a href="cam_on.php"><img src="turn_on.png"></a></dt>
<dd>Einschalten</dd>
<dt><a href="cam_off.php"><img src="turn_off.png"></a></dt>
<dd>Ausschalten</dd>
</dl>
</center>
</body>
</html>

Curanai · 10.02.2019

Du benötigst eine Mischung aus PHP (für API), HTML zur Darstellung in Deinem Frontend und JavaScript (tja!) für Komfort im Umfang sowie Datenaustausch; ständiger Reload einer Seite zwecks Aktualisierung ist so 90er bis "old school" (meint: bäh!).

Abgesehen davon, dass ich mit Deinem shell_exec()-Aufbau gar nicht einverstanden bin, ist es eigentlich simpel:
- Server läuft (Backend; kurz BE) und hostet HTML-Seite (Frontend; kurz FE)

Es führen viele Wege nach Rom - nicht immer nur der eine. Da mir nicht klar ist, was da läuft (bei "cam" zucke ich immer) oder wie wichtig die API ist (Echtzeit, geht's nur um Status, sollen das Aktivierungen sein - blaaa), beschränke ich meine Ausführungen in eine simple Richtung:

Du rufst regulär das FE auf. In der Folge löst ein AJAX-Request aus und holt sich die Stati vom Server (entweder aus einer zuvor gespeicherten Ecke oder frisch aus der API; ließe sich an eine Bedingung koppeln (wenn vorhanden, zeig ... sonst: neu holen)).

Das Ergebnis wertest Du aus und änderst entsprechend Deine Anzeige im FE.

Das BE könnte nun autark mittels Cronjob (wenn Du unbedingt willst) die API befragen - dann speicherst Du das Ergebnis und holst es eben immer nur wieder ab.

Bedingungen wie "einschalten" bzw. "abschalten" gehen hierüber natürlich auch - sofern Deine API Befehle annimmt (wovon ich aber ausgehe).

Ja, Du kannst auch alles OHNE JavaScript (AJAX) machen - also bäh und pfui und dreckig und "Hauptsache läuft": Hierzu schaust Du Dir zwecks Reload mal eine Weiterleitung per META-Tag an. Sollte das für Besucher sein, so lass Dir sagen, dass es bei mir nicht läuft (autom. Weiterleitung ist deaktiviert; meiner Paranoia geschuldet). Ist es nur für Dich ... nun ... das geht dann gerade so in Ordnung. Hierbei würde jeder Seitenaufruf immer wieder aufs Neue die API ansprechen und das Ergebnis zum erstmaligen Rendern der HTML-Seite mitbringen. Buttons zum Aktivieren etc. müssten dann an eine jeweilige Seite geschickt werden, die das verwerten kann ... (sprich: POST-Requests und abarbeiten auf Serverseite). Dass Dir das durchaus dann mit Deinem Meta-Tag um die Ohren fliegt, liegt an einer Laufzeitbedingung (eine Art selbstgemachte "race condition"). Denn während Du auf die Reaktion von Button wartest, lädt in dem Moment die Seite wegen META neu. Bäh ... sagte ich ja.

Kannst Du mehrere AJAX-Requests feuern? Ja. Hierbei könnte also einer die reine Datenholerei machen und ein anderer eben auf Deine Buttons reagieren.

Sorry, aber wenn Du gar keine Ahnung hast, sehe ich das gerade viel zu komplex für Dich. Da Du ein iFrame ansprichst: es geht nur "top down" in der Befehlskette (also ins iFrame) - nicht "bottom up" (aus dem iFrame nach oben). Ich weiß nicht, ob das für Dich relevant ist, aber ... nun ... ja, es ginge (nicht browserübergreifend) ... aber das sprengt diesen Post final.

Meine klare Empfehlung: FE machen, BE machen ... und dann such Dir wen, der Dir den AJAX-Teil zackig zusammenstellt zwischen FE und BE (das wäre kein Hexenwerk und geht zügig).

Nur das iFrame irritiert mich ... aber es ist Sonntag, verdammt!

Viel Erfolg.