HTTP Request per JavaSkript und Fetch auswerten

mat-sche · 18. Mai 2022

Liebes Forum,

ich bin recht frisch angehaucht, was das Thema Tasmota angeht und dementsprechend recht naiv und unwissend, was ich zu entschuldigen erbitte.

Ich habe mir eine NOUS Steckdose gekauft und mit Tasmota geflasht. Nun benötige ich die Messdaten Strom und Spannung sowie die Statusinfos als HTTP Request auf einer meiner Webseiten, die auf einem ESP8266 Server liegen. Dies sollte über JavaSkript und Fetch funktionieren. Einen Beitrag dazu habe ich auch schon gefunden:

Thema

Tasmota An-/aus-Zustand mit JavaScript abfragen

Hallo,
http://192.168.178.40/cm?cmnd=power fragt bei mir "on" oder "off" bei Tasmota ab. Ich verwende zur Steuerung HTTP-Shortcuts, das JavaScript versteht.

Frage: Wie bekomme ich den An- oder Aus-Zustand in eine Variable, die ich mit JavaScript weiterverarbeiten kann? Inhalt der Variable soll z.B. "Power On" oder "On" sein.

Vielen Dank!

RainerP

17. Februar 2021

Nur leider funktioniert es nicht. Vllt. hängt es schon daran, dass ich aus dem Beitrag das "CORS" nicht aktiviert bekomme.

Gibt es noch eine andere Möglichkeit über HTTP die Infos abzufassen?

Über ein paar Tipps würde ich mich sehr freuen!

Grüße MAT

HoerMirAuf · 19. Mai 2022

Hi

Geht wohl deswegen nicht mehr weil CORS inzwischen Satndartmäßig deaktiviert ist:

Code

Anyway, all the code related to CORS has not been deleted. It is just not included. You can compile your own version adding CORS support by adding #define USE_CORS in your user_config_override.h file.

Set CORS to be an optional feature by ascillato · Pull Request #12827 · arendst/Tasmota

Description: As reported in #6767, CORS is not safely implemented in Tasmota, so until a better solution is submitted, with this PR we disable by default all…

github.com

Einfach ins Binarie mit einkompilieren und dann sollte das genauso wie im verlinkten Beispiel gehen.

mat-sche · 20. Mai 2022

Moin!

Danke für Deine Antwort!

Ich bin gerade drann die ganze Sache per Fetch zu lösen. Sollte gehen und somit könnten alle HTTP Requests per JS abgehandelt werden.

Wenn ich Erfolge habe, werde ich dies dann hier posten.

HoerMirAuf · 20. Mai 2022

Moin.

Da bin ich mal gespannt ob das geht. Ich hab's ohne CORS nicht an den Start bekommen.

Jepp, wenn du eine Lösung hast, bitte mal hier posten

mat-sche · 24. Mai 2023

Zitat von HoerMirAuf

Jepp, wenn du eine Lösung hast, bitte mal hier posten

Hi,

jetzt ist ein Jahr vergangen und ich bin immer noch nicht weiter. Gibt es zu dem Thema etwas neues?

Was passiert eigentlich wenn ich von einer Webseite über:

Code

window.location = "http://192.168.188.113/cm?cmnd=Power%20TOGGLE";

zu dem Tasmota-Teilnehmer die Info sende?

Also es wird der Befehl gesendet und gleichzeitig wird die Ursprungs Webseite verlassen und ich bekomme einen Status vom Tasmota -Teilnehmer zurück. Wie kann ich das auf der Webseite "Abfangen"

HoerMirAuf · 25. Mai 2023

Hi.

gilt immer noch:

CORS muss mit einkompiliert sein:

#define USE_CORS

Dann hast du in der WLAN-Config das CORS-Feld, in das einfach "*" eintragen:

Und dann kannst das z.B. so lösen:

HTML

<!DOCTYPE html>
<html>

<head>
<title>Get Fetch-Request</title>
</head>
<body>

<script>
window.onload = function(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
alert(Status.POWER);
});
});
};
</script>

</body>
</html>

Alles anzeigen

mat-sche · 25. Mai 2023

Guten Morgen,

danke für Deine Antwort!

Das heisst, dass ich die Tasmota FW neu kompelieren müsste, was ich bisher noch nicht gemacht habe. Welchen Weg dazu könntest Du mir dazu empfehlen. Ich habe schon einmal etwas mit der BIN Erzeugung über das Webtool gelesen. Würde das aber gern auch mal über Visual studio code machen. Hast Du auf die Schnelle einige Links dazu dafür für mich?

Ich werde parallel auch noch google darauf ansetzen

Vielen DDank MAT

HoerMirAuf · 25. Mai 2023

Hi....

puuuuhh, ich kompiliere IMMER mit dem benzino77 Tasmokompiler (siehe SIgnatur)

Dort einfach in den zusätzlichen Parametern das "#define USE_CORS" eingeben und fertig.

Zu VSC kann ich Dir leider nix sagen. Ist mir zu aufwendig das aktuell zu halten

Wenn ich echt mal was ganz spezielles hab dann ginge das auch übers Github Master Release (Signatur). Ist soweit ich weiß nix anderes als VSC.

mat-sche · 25. Mai 2023

Vielen Dank, dann werde ich mich mal damit beschäftigen!

mat-sche · 25. Mai 2023

Hi,

gibt es eine Möglichkteit die Web Requests Befehle auch ohne eine Rückantwort zu nutzen? Also wenn ich http://192.168.188.80/cm?cmnd=Power%20TOGGLE sende, öffnet sich eine html Seite wie oben angezeigt. Das Problem ist, dass meine Ursprungsseite verlassen wird und ich eine Antwort vom Sonoff Gerät bekomme.

Was geschieht wenn ich cors aktiviere, klar, ich kann dann per fetch die antworten in eine Variable schreiben lassen aber was ist dann mit der Webseite, von dem ich den Request gestartet habe?

HoerMirAuf · 25. Mai 2023

Ich denke das wird mit reinem Javascript nicht gehen.

Google in dem Zusammenhang mal nach ajax und jquery

Betreibst du die HTML auf nem eigenen Linux http-Server, könntest du mit einem cgi-script nen curl-request ausführen lassen

Bei meinem Fetch Beispiel wird aber die eigene HTML Seite nicht verlassen. Der Request wird ja vom fetch gehändelt. Aber geht eben nur mit CORS.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Get Fetch-Request</title>
</head>
<body>

<h1>ÜBERSCHRIFT</h1>

<script>

function ButtonClick(){
fetch('http://<IP>/cm?user=admin&password=<password>&cmnd=power').then(function(response) {
response.text().then(function(text) {
const Status = JSON.parse(text);
alert("Power=" + Status.POWER);
});
});
};

</script>

<p>Beispieltext</p>

<input value="Fetch Power Value" class="button" onclick="ButtonClick()" type="button">
</body>
</html>

Alles anzeigen

mat-sche · 26. Mai 2023

Zitat von HoerMirAuf

Betreibst du die HTML auf nem eigenen Linux http-Server, könntest du mit einem cgi-script nen curl-request ausführen lassen

Guten Morgen,

die Web-Seite liegt ebenfalls auf einem ESP8266, der aber ein eigenständiges Programm laufen hat, welches über die HTML - Seite und per Fetch Schaltvorgänge bearbeitet. Von dieser Seite aus möchte ich nun einen zweiten ESP, der eben mit Tasmota auf einer Gosund steckt, diese Steckdose schalten lassen. Da leider Tasmota kein UDP versteht und ich noch keinen MQTT Broker betreibe, bleibt mir nur der HTML Request als Übertragungsmöglichkeit oder vllt. doch nicht?

Ich wollte mir über den Request das hin und her schalten swichen den Webseiten auf meinem mobilen Devices ersparren und alles von einer Seite aus steuern...

Dann werde ich mal versuchen ein eigenes Tasmota BIN mit Cors zu erstellen.

dcx · 26. Mai 2023

Tasmota Globale Variablen + Script kann hier sicherlich helfen.

Muss man nur reinkompilieren.

mat-sche · 26. Mai 2023

Zitat von dcx

Tasmota Globale Variablen + Script kann hier sicherlich helfen.
Muss man nur reinkompilieren.

Danke! Ja klar aber viel Hilfe bringt es mir nicht.... Deine Worte, sorry!

HoerMirAuf · 26. Mai 2023

Moin.

Das ginge auch einfacher.

Du könntest auf einen unbelegten GPIO ein "virtuelles" Relais konfigurieren.

Du bekommst dann im Tasmota WebIF einen neuen ein/aus Button (auch beschriftbar mit dem webbutton Command)

Dann eine Rule erstellen die beim betätigen des Webbuttons mit Websend das 2. tasmnota Gerät schaltet:

rule1 on power<virtuell>#state do websend [<IP-gerät2>,<user>:<password>] POWER1 %value% endon

rule1 1

Wenn man's echt ausreizen möchte könnte man auch einen Status per websend von Gerät2 an Gerät1 zurückschicken lassen:

Gerät1:

rule1 on power<virtuell>#state do websend [<IP-gerät2>,<user>:<password>] POWER1 %value% endon

rule1 1

Gerät2:

rule1 on power1#state do websend [<IP-gerät1,<user>:<password>] Power<virtuell> %value% endon

rule1 1

Ist ungetestet, könnte sein das man noch mit der oneshot funktion Spielen muss um nicht zuviel websend zu erzeugen.

EDIT:

Ok, setzt aber eben Tasmota auf beiden geräten voraus, scheint aber nicht der Fall zu sein?

Zitat von mat-sche

Dann werde ich mal versuchen ein eigenes Tasmota BIN mit Cors zu erstellen.

Das wird wohl die einfachste Lösung sei und ist echt kein Ding im Online Compiler.

Wenn Du nicht zurecht kommst, dann kann man hier auch eins hosten.

EDIT2:

MQTT ist natürlich immer die besser Lösung, für solche Steuerungen. Solltest Du dir mal überlegen.

Ich hab hier mal nen MQTT Server, den man für wenige Geräte auf nem ESP betreiben kann gepostet.

Vielleicht wäre das ja was interessantes ohne jetzt gleich nen ganzen Server aufzusetzten.

Noschvie · 26. Mai 2023

Was spricht gegen einen MQTT Broker ? Ein solcher ist in wenigen Minuten "up and running".

mat-sche · 26. Mai 2023

Zitat von HoerMirAuf

Ok, setzt aber eben Tasmota auf beiden geräten voraus, scheint aber nicht der Fall zu sein?

... so ist es, ist ein kleines C++ Programm.

Zitat von HoerMirAuf

EDIT2:
MQTT ist natürlich immer die besser Lösung, für solche Steuerungen. Solltest Du dir mal überlegen.
Ich hab hier mal nen MQTT Server, den man für wenige Geräte auf nem ESP betreiben kann gepostet.
Vielleicht wäre das ja was interessantes ohne jetzt gleich nen ganzen Server aufzusetzten.

MQTT hab ich mir fest vorgenommen mit einzupflegen. Aber im Moment scheitert es an den Grundwissen dazu, wie ich in meinem C++ Programm einen MQTT Client hinzufügen kann. Ich habe auf einem 7/24h Rechner mir schon ioBroker installiert, die Tasmota-Steckdose konfiguriert und sehen kann ich sie im Broker.

Dann wird meine Nutzung der jetzigen Hardware ersteinmal so beleiben und ich werde mich mit MQtt beschäftigen und in mein Programm aufnehmen. Hätte gedacht, dass isch mit den jetzigen Mitteln ohne Probleme etwas ändern könnte.

Vielen Dank und bis später!

Noschvie · 26. Mai 2023

Für ein verregnetes Wochenende:

How to Implement Paho MQTT in C++ CMake Project | Cedalo

Read this guide to learn how to use Paho MQTT in C++ CMake project. Access the sample code with all features available for MQTT in one file.

cedalo.com

GitHub - eclipse/paho.mqtt.cpp

Contribute to eclipse/paho.mqtt.cpp development by creating an account on GitHub.

github.com

GitHub - eclipse/paho.mqtt.embedded-c: Paho MQTT C client library for embedded systems. Paho is an Eclipse IoT project (https://iot.eclipse.org/)

Paho MQTT C client library for embedded systems. Paho is an Eclipse IoT project (https://iot.eclipse.org/) - GitHub - eclipse/paho.mqtt.embedded-c: Paho MQTT…

github.com

Teilen