Live-Temperatur auf meiner eigenen Webseite anzeigen: MQTT-WebSocket oder ein anderer Weg?
Von Türkçe mit KI übersetzt ·
Hallo, ich schreibe zum ersten Mal, ich lese schon lange nur mit. Im Gewächshaus messe ich mit einem ESP32 Temperatur und Luftfeuchtigkeit, die Daten gehen per MQTT an Hermetry und sehen im Dashboard gut aus. Aber für meine Eltern möchte ich eine ganz einfache Seite machen, die auf dem Handy geöffnet wird, nur mit einer Zahl: „Wie viele Grad hat das Gewächshaus“.Früher habe ich zu Hause Mosquitto eingerichtet, dort habe ich einen WebSocket-Listener geöffnet und mit MQTT.js direkt aus dem Browser verbunden, das war sehr einfach. Dasselbe habe ich mit Hermetry versucht, ich habe das Token des Geräts in die Seite eingetragen und versuche so zu verbinden:
const client = mqtt.connect('wss://<broker host>:8883/mqtt', {
username: 'cihaz_tokeni',
password: ''
});
In der Konsole erscheint folgender Fehler:
WebSocket connection to 'wss://<broker host>:8883/mqtt' failed
Ist der Port falsch, oder muss ich irgendwo WebSocket aktivieren? Oder ist es eine falsche Idee, direkt aus dem Browser zu verbinden?
Merhaba, ilk defa yazıyorum, uzun süredir okuyorum sadece. Serada ESP32 ile sıcaklık ve nem ölçüyorum, Hermetry’ye MQTT ile gidiyor, dashboard’da güzel görünüyor. Ama annemle babam için telefonda açılacak çok basit bir sayfa yapmak istiyorum, tek sayı: „sera kaç derece“.
Daha önce evde Mosquitto kurmuştum, orada websocket listener açıp MQTT.js ile tarayıcıdan direkt bağlanıyordum, çok kolaydı. Aynısını Hermetry ile denedim, sayfaya cihazın token’ını koydum, şöyle bağlanmaya çalışıyorum:
const client = mqtt.connect('wss://<broker host>:8883/mqtt', {
username: 'cihaz_tokeni',
password: ''
});
Konsolda şu hata çıkıyor:
WebSocket connection to 'wss://<broker host>:8883/mqtt' failed
Port mu yanlış, yoksa websocket mi açmam gerekiyor bir yerden? Yoksa tarayıcıdan direkt bağlanmak mı yanlış fikir?
Von Türkçe mit KI übersetzt ·
Ein Browser kann kein einfaches TCP-MQTT sprechen, WebSocket ist also Pflicht. 8883 ist der normale MQTT/TLS-Port, dort gibt es meines Erachtens kein WebSocket. Ob Hermetry einen separaten ws-Port hat, weiß ich ehrlich gesagt nicht.
Tarayıcı düz TCP MQTT konuşamaz, websocket şart. 8883 normal MQTT/TLS portu, orada websocket yok bence. Hermetry’de ayrı bir ws portu var mı bilmiyorum açıkçası.
Von Türkçe mit KI übersetzt ·
Der Port ist eine Sache für sich: Wenn du das Gerätetoken auf die Seite packst, kann jeder, der den Quelltext der Seite ansieht, mit diesem Token Daten im Namen deines Geräts veröffentlichen. Die Gewächshaustemperatur zeigt 80 Grad an, deine Mama dreht durch 🙂 Hol das Token da raus.
Port bir yana, cihaz token’ını sayfaya koyarsan sayfanın kaynağına bakan herkes o token ile senin cihazın adına veri basabilir. Sera sıcaklığı 80 derece görünür, annen panik olur 🙂 Token’ı oradan çıkar.
Von Türkçe mit KI übersetzt ·
Sie haben recht, daran hatte ich nicht gedacht. Die Seite lag ja schon auf GitHub Pages 😬 Ich habe das Token gelöscht. Wie sollte ich es jetzt machen?
Haklısınız, onu hiç düşünmemiştim. Sayfa zaten GitHub Pages’te duruyordu 😬 Token’ı sildim. O zaman nasıl yapacağım?
Von Türkçe mit KI übersetzt ·
In der Dokumentation gibt es für Geräte MQTT 3.1.1 (8883 TLS, bei erlaubtem Profil 1883) und HTTPS, MQTT über Websocket gibt es nicht. Der Weg vom Browser zum Broker ist also geschlossen, und ich finde das gut so, denn das Geräte-Token ist die Identität des Geräts, nicht die des Lesers.Zum Lesen wird die REST API verwendet. Für die letzten Werte gibt es diesen Endpunkt:
GET /tenant/<tenantId>/api/telemetry/latest?kind=iot_device&entityId=<cihazId>&keys=temperature,humidity
Authorization: Bearer sk_live_...
Aber den API-Schlüssel solltest du auch nicht in den Browser legen, das ist dasselbe Problem. Ich habe es bei mir zu Hause so gemacht: Auf einem Raspberry Pi läuft eine 20-zeilige Flask-Anwendung, der Schlüssel steht in deren Umgebungsvariable. Die Seite fragt bei Flask unter /sera an, Flask fragt bei Hermetry nach und gibt nur zwei Zahlen zurück.Beim Erstellen des Schlüssels gib auf der Seite API Keys nur das Leserecht für Telemetrie (in den Modulen gibt es die fertige Voreinstellung Read only) und trag die externe IP des Hauses in die IP-Allowlist ein. Der Schlüssel wird nur einmal angezeigt, also nicht vergessen, ihn zu kopieren.Details: Historien-API und die Seite zur Authentifizierung. Noch einfacher: ein kleines Dashboard in Hermetry bauen und deine Mutter als Benutzerin in die Organisation einladen. Wenn du aber eine Seite mit nur einer Zahl fürs Handy willst, ist der Flask-Weg praktisch.
Dokümanda cihazlar için MQTT 3.1.1 (8883 TLS, profil izin verirse 1883) ve HTTPS var, websocket üzerinden MQTT yok. Yani tarayıcıdan broker’a bağlanma yolu kapalı, bence iyi ki de kapalı, çünkü cihaz token’ı cihazın kimliği, okuyucu kimliği değil.
Okumak için REST API kullanılıyor. Son değerler için şu uç var:
GET /tenant/<tenantId>/api/telemetry/latest?kind=iot_device&entityId=<cihazId>&keys=temperature,humidity
Authorization: Bearer sk_live_...
Ama buradaki API anahtarını da tarayıcıya koymamalısın, aynı sorun. Ben kendi evde şöyle yaptım: evdeki Raspberry Pi’da 20 satırlık bir Flask uygulaması var, anahtar onun ortam değişkeninde duruyor. Sayfa Flask’a /sera diye soruyor, Flask Hermetry’ye soruyor, sadece iki sayıyı döndürüyor.
Anahtarı oluştururken API Keys sayfasında sadece telemetri okuma iznini ver (modüllerde Read only hazır ayarı var), IP allowlist’e de evin dış IP’sini yaz. Anahtar sadece bir kere gösteriliyor, kopyalamayı unutma.
Ayrıntılar: Geçmiş API’si ve kimlik doğrulama sayfası. Daha da basiti, Hermetry’de küçük bir dashboard yapıp annenleri organizasyona kullanıcı olarak davet etmek, ama telefon için tek sayılık sayfa istiyorsan Flask yolu rahat.
Von Türkçe mit KI übersetzt ·
Gemacht! Flask läuft auf dem Pi, und die Seite fragt alle 30 Sekunden ab. Zuerst bekam ich einen 401-Fehler, ich hatte vergessen, „Bearer “ vor den Schlüssel zu schreiben. Außerdem ist die IP des Hauses dynamisch: Die IP, die ich in der Allowlist eingetragen hatte, hat sich am nächsten Tag geändert, deshalb habe ich das Feld vorerst leer gelassen. Ich werde beim Modem eine feste IP beantragen.
Yaptım! Pi’da Flask çalışıyor, sayfa 30 saniyede bir soruyor. Önce 401 aldım, anahtarın başına „Bearer “ yazmayı unutmuşum. Bir de evin IP’si değişken, allowlist’e yazdığım IP ertesi gün değişti, şimdilik boş bıraktım, modemden sabit IP isteyeceğim.
Von Türkçe mit KI übersetzt ·
+1. Die Standardlaufzeit des Schlüssels beträgt 90 Tage, trag sie in den Kalender ein, sonst erscheint die Seite nach drei Monaten stillschweigend leer.
+1. Anahtarın varsayılan süresi 90 gün, takvime yaz, yoksa üç ay sonra sayfa sessizce boş gelir.
- Du musst angemeldet sein, um auf dieses Thema antworten zu können.
Mitdiskutieren
Melde dich an, um Fragen zu stellen und zu beantworten, hilfreiche Beiträge mit „Gefällt mir“ zu markieren und die Antwort zu kennzeichnen, die dein Problem gelöst hat. Jeder Beitrag bringt Punkte und Stufen.

