Showing live temperature on my own web page: MQTT websocket, or another way?
Translated from Türkçe by AI ·
Hello, this is my first time posting, I have only been reading for a long time. I measure temperature and humidity with an ESP32 in the greenhouse, it goes to Hermetry over MQTT, and it looks nice on the dashboard. But I want to make a very simple page that opens on my parents’ phones, just one number: “how many degrees is the greenhouse”.Earlier I had set up Mosquitto at home, where I opened a websocket listener and connected directly from the browser with MQTT.js, it was very easy. I tried the same with Hermetry, I put the device’s token in the page and I’m trying to connect like this:
const client = mqtt.connect('wss://<broker host>:8883/mqtt', {
username: 'cihaz_tokeni',
password: ''
});
The console shows this error:
WebSocket connection to 'wss://<broker host>:8883/mqtt' failed
Is the port wrong, or do I need to enable websocket somewhere? Or is connecting directly from the browser the wrong idea?
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?
Translated from Türkçe by AI ·
A browser cannot speak plain TCP MQTT, so WebSocket is a must. 8883 is the normal MQTT/TLS port, I think there is no WebSocket there. I honestly don’t know whether Hermetry has a separate ws port.
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ı.
Translated from Türkçe by AI ·
Forget the port: if you put the device token on the page, anyone who views the page source can publish data in your device’s name with that token. Greenhouse temperature shows 80 degrees, your mom freaks out 🙂 Take the token out of there.
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.
Translated from Türkçe by AI ·
You’re right, I hadn’t thought of that. The page was already sitting on GitHub Pages 😬 I deleted the token. So how should I do it now?
Haklısınız, onu hiç düşünmemiştim. Sayfa zaten GitHub Pages’te duruyordu 😬 Token’ı sildim. O zaman nasıl yapacağım?
Translated from Türkçe by AI ·
The documentation lists MQTT 3.1.1 for devices (8883 TLS, 1883 if the profile allows it) and HTTPS, with no MQTT over websocket. So the path from the browser to the broker is closed, and I think that’s a good thing, because the device token is the device’s identity, not the reader’s identity.Reading is done through the REST API. For the latest values there is this endpoint:
GET /tenant/<tenantId>/api/telemetry/latest?kind=iot_device&entityId=<cihazId>&keys=temperature,humidity
Authorization: Bearer sk_live_...
But you shouldn’t put the API key in the browser either, same problem. At home I did it like this: there is a 20-line Flask application on a Raspberry Pi, and the key is stored in its environment variable. The page asks Flask at /sera, Flask asks Hermetry, and it returns only two numbers.When creating the key, on the API Keys page give only telemetry read permission (there is a ready-made Read only preset in the modules), and enter the home’s external IP in the IP allowlist. The key is shown only once, so don’t forget to copy it.Details: History API and the authentication page. Even simpler, build a small dashboard in Hermetry and invite your mother to the organization as a user, but if you want a single-number page for your phone, the Flask route is convenient.
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.
Translated from Türkçe by AI ·
Done! Flask is running on the Pi, and the page polls every 30 seconds. At first I got a 401, I had forgotten to put “Bearer ” in front of the key. Also, the house IP is dynamic: the IP I wrote in the allowlist changed the next day, so I left it empty for now. I’ll ask the modem for a static IP.
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.
Translated from Türkçe by AI ·
+1. The default validity period of the key is 90 days, put it in your calendar, otherwise the page will silently come up empty after three months.
+1. Anahtarın varsayılan süresi 90 gün, takvime yaz, yoksa üç ay sonra sayfa sessizce boş gelir.
- You must be logged in to reply to this topic.
Join the conversation
Sign in to ask and answer, like helpful posts and mark the reply that solved your problem. Every contribution earns points and levels.

