New: the AI firewall watches the whole platform and explains each incident in plain words. See how it works

Showing live temperature on my own web page: MQTT websocket, or another way?

Showing live temperature on my own web page: MQTT websocket, or another way?

Solved 6 4

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?

♥ 0

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.

♥ 0

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.

♥ 1

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?

♥ 0

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.

Sahadan selamlar.
Accepted solution♥ 9

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.

♥ 0

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.

♥ 0
Viewing 7 posts – 1 through 7 (of 7 total)
  • 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.

Share