Manage IoT devices via web interface (MQTT or HTTP)?

Question

Message Queues

Hello.

I am writing a thesis on the topic "smart home".
At the moment I'm trying to implement a web interface for managing devices.

Approached this from different angles: espeasy, home-assistant, etc.
The difficulty is that I can’t use ready-made solutions like the same Home.io (you need a code in the diploma!)

In connection with which I am considering the idea of ​​writing my own (local) site for managing devices.

I managed to create a simple web page for relay control. All this worked through WinSCP with the SFTP protocol.
I tried to create a website by immediately writing the html code in nodemcu. But this is very limiting since the entire site is on the same board.

1) Is it possible to implement this in such a way that the site exists independently of the boards (locally on the network) and at the same time receives data from all devices (at the moment there are 2 nodemcu boards with connected sensors) and sends data in response (relay switching request )? And at the same time, was it possible to go to this site for all devices connected to home wi-fi?

2) Even harder. Is it possible to implement data transfer through an mqtt broker between a site and several NodeMcu boards? Do you need hosting for this?

Answer 1

For the first question, the answer is yes, you can. But you need to use WebSocket technology, normal AJAX will not work.
Because AJAX can only access the same address where the page was read from.
The site itself can be located on a home computer.
As you can see from the example - https://randomnerdtutorials.com/esp32-websocket-se...
making a WebSocket connection on the server side is very simple.
On the second question.
MQTT requires an MQTT broker. Brokers like Mosquitto can work on any computer.
Including the one on which the site is located. The site pages themselves must use a JavaScript MQTT client.

Answer 2

Raspberry Pi in LAN and good.
You can raise mosquitto on it with support for web sockets, then you can also communicate directly with mqtt from the browser, you can
raise Node-red as a bonus, there is both logic and viewing

Answer 3

On the second question, I would not bother with raising my own broker and use some public one. For example, www.mqtt-dashboard.com . Devices connect to a broker and write to one topic, your site/page connects to the same broker and subscribes to this topic (MQTT over WebSocket). To implement this, you can use the JS library https://www.npmjs.com/package/mqtt
The opposite is the same. Devices subscribe to another topic and listen for commands sent to it from your site/page.