Afficher la température en direct sur ma propre page web : MQTT WebSocket, ou une autre solution ?
Traduit de Türkçe par IA ·
Bonjour, c’est mon premier message, je ne fais que lire depuis longtemps. Dans la serre, je mesure la température et l’humidité avec un ESP32, les données partent vers Hermetry en MQTT et ça rend bien sur le tableau de bord. Mais je veux faire une page très simple qui s’ouvrira sur le téléphone de mes parents, avec un seul chiffre : « combien de degrés dans la serre ».Auparavant, j’avais installé Mosquitto à la maison, où j’ouvrais un listener WebSocket et je me connectais directement depuis le navigateur avec MQTT.js, c’était très facile. J’ai essayé la même chose avec Hermetry, j’ai mis le token de l’appareil dans la page et j’essaie de me connecter comme ceci :
const client = mqtt.connect('wss://<broker host>:8883/mqtt', {
username: 'cihaz_tokeni',
password: ''
});
La console affiche cette erreur :
WebSocket connection to 'wss://<broker host>:8883/mqtt' failed
Le port est-il faux, ou dois-je activer WebSocket quelque part ? Ou bien se connecter directement depuis le navigateur est-il une mauvaise idée ?
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?
Traduit de Türkçe par IA ·
Un navigateur ne peut pas parler du MQTT en TCP brut, donc WebSocket est indispensable. 8883 est le port MQTT/TLS habituel, et je pense qu’il n’y a pas de WebSocket dessus. Honnêtement, je ne sais pas si Hermetry dispose d’un port ws séparé.
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ı.
Traduit de Türkçe par IA ·
Le port mis à part, si tu mets le token de l’appareil dans la page, quiconque regarde le code source de la page peut publier des données au nom de ton appareil avec ce token. La température de la serre affiche 80 degrés, ta mère va paniquer 🙂 Retire le token de là.
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.
Traduit de Türkçe par IA ·
Vous avez raison, je n’y avais pas pensé. La page était déjà hébergée sur GitHub Pages 😬 J’ai supprimé le token. Alors, comment dois-je procéder maintenant ?
Haklısınız, onu hiç düşünmemiştim. Sayfa zaten GitHub Pages’te duruyordu 😬 Token’ı sildim. O zaman nasıl yapacağım?
Traduit de Türkçe par IA ·
La documentation indique pour les appareils MQTT 3.1.1 (8883 TLS, 1883 si le profil l’autorise) et HTTPS, sans MQTT via websocket. Le chemin du navigateur vers le broker est donc fermé, et je trouve que c’est bien ainsi, car le jeton de l’appareil est l’identité de l’appareil, et non celle du lecteur.La lecture se fait via l’API REST. Pour les dernières valeurs, il existe ce point de terminaison :
GET /tenant/<tenantId>/api/telemetry/latest?kind=iot_device&entityId=<cihazId>&keys=temperature,humidity
Authorization: Bearer sk_live_...
Mais la clé API ne doit pas non plus être placée dans le navigateur, c’est le même problème. Chez moi, j’ai fait ainsi : sur un Raspberry Pi à la maison, une application Flask de 20 lignes tourne, et la clé est stockée dans sa variable d’environnement. La page interroge Flask sur /sera, Flask interroge Hermetry et ne renvoie que deux chiffres.Lors de la création de la clé, sur la page API Keys, n’accorde que le droit de lecture de la télémétrie (les modules proposent le préréglage prêt à l’emploi Read only) et indique l’IP publique de la maison dans la liste d’IP autorisées. La clé n’est affichée qu’une seule fois, alors n’oublie pas de la copier.Détails : API d’historique et la page d’authentification. Encore plus simple : créer un petit tableau de bord dans Hermetry et inviter ta mère dans l’organisation en tant qu’utilisatrice, mais si tu veux une page d’un seul chiffre pour ton téléphone, la solution Flask est pratique.
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.
Traduit de Türkçe par IA ·
C’est fait ! Flask tourne sur le Pi, et la page interroge le serveur toutes les 30 secondes. D’abord j’ai eu une erreur 401, j’avais oublié d’écrire « Bearer » devant la clé. De plus, l’IP de la maison est variable : l’IP que j’avais inscrite dans la liste d’autorisation a changé le lendemain, alors je l’ai laissée vide pour le moment. Je vais demander une IP fixe à mon modem.
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.
Traduit de Türkçe par IA ·
+1. La durée de validité par défaut de la clé est de 90 jours, notez-la dans votre calendrier, sinon la page s’affichera silencieusement vide au bout de trois mois.
+1. Anahtarın varsayılan süresi 90 gün, takvime yaz, yoksa üç ay sonra sayfa sessizce boş gelir.
- Vous devez être connecté pour répondre à ce sujet.
Rejoignez la discussion
Connectez-vous pour poser et répondre à des questions, aimer les messages utiles et marquer la réponse qui a résolu votre problème. Chaque contribution rapporte des points et des niveaux.

