Real-time temperature monitoring with LavinMQ

This guide will show you how to build a real-time temperature monitoring system. We will use a basic microcontroller and a sensor to create a project that sends live temperature data to a message broker. The data will then be displayed on a webpage, allowing you to check the temperature of a specific area from any location.

An overview of the Internet of Things (IoT)

The Internet of Things (IoT) is a network of physical objects—”things”—that are embedded with sensors, software, and other technologies to connect and exchange data with other devices and systems over the internet.

A typical IoT system consists of four fundamental components:

1. Devices/Sensors: Physical objects collecting data from the surrounding environment. This could be anything from a simple temperature sensor to a complex machine with multiple built-in sensors.
2. Connectivity: The network layer enabling data transfer. It can use Wi-Fi, Bluetooth, cellular networks (4G/5G), Zigbee, or other protocols.
3. Data Processing: The collected data is sent to a platform (often in the cloud) where it is temporarily stored, analyzed, or processed. Here, you can use machine learning algorithms to find patterns and generate insights.
4. User Interface (UI): Finally, the processed data is presented to the user via an app, a web dashboard, or another interface. The user can then monitor the system and, in some cases, send commands back to the device (e.g., to turn off a light).

What you’ll build with this guide

In this guide, you will learn how to set up a microcontroller a temperature sensor. You’ll learn to send temperature data to a message broker and then retrieve that data to display it on a webpage.

You might be wondering, “Why do I need to send the data to a message broker?” In many IoT systems, a broker serves as a central hub that manages all data traffic. This approach, known as the publish/subscribe model, allows devices to send and receive information without needing to know anything about one another.

Here’s how it works:

• Publisher: The device, an NodeMCU board, and a temperature sensor publish a message with temperature data to a specific topic, for example, lavinmq/home/temperature.
• Broker: Receives the message and acts as a central post office. It knows which applications or devices are interested in that topic.
• Subscriber: An application (a web page) subscribes to the data on the topic: lavinmq/home/temperature and receives the message from the broker.

For this project/experiment, you will need to use a LavinMQ IoT starting kit. You can request this for free from marketing@cloudamqp.com, or you can buy it yourself. The starter kit includes:

• Microcontroller (In the starter kit: NodeMCU board)
• Sensor
• Jumper cables (In the starter kit: 2 female - to - female)
• Power cable

Step-by-step guide

Step 1: Create a LavinMQ instance

To begin, you need to set up a new CloudAMQP server. CloudAMQP provides a managed LavinMQ broker, which is fully compatible with our IoT project’s needs for message handling.

1. Navigate to CloudAMQP. Sign up for an account, or if you already have one, log in.
2. Once you are logged in, you will be on your dashboard. Click the “Create New Instance” button.
3. For a basic IoT project or a proof-of-concept, the free Loyal Lemming plan is perfect. Select this plan to proceed.
4. Give your new instance a name that is descriptive of your project, for example, “iot-temperature-project.”
5. Choose a data center region that is geographically close to your devices. This helps to minimize latency and improve performance.
6. Review your selections and then click the “Create Instance” button. CloudAMQP will then provision your new LavinMQ server.
7. Once the instance is active, you will be provided with the necessary connection details. This includes the hostname, user, and password that you will use in your microcontroller.

You now have a live message broker ready to handle the data from your IoT devices. The following steps involve using these connection details to set up your publisher (the microcontroller) and your subscriber (the webpage).

Step 2: Configure the microcontroller

1. Connect the power outlet of the board to the computer.
2. A Demo WiFi will appear. Connect to this wifi: “DEMO/WIFI”. (Please note that this wifi is only available for a few minutes. If you are not connected to the wifi within that time, just re-plug the power again.)
3. Once connected, enter the web page: HTTP://192.168.4.1
4. Enter the credentials for the LavinMQ instance and press save. This will configure the message broker on the microcontroller. You can find your credentials in the CloudAMQP control panel for your created instance.
5. In the network section, select your home network and enter the password. This will connect the microcontroller to your network. (The board only supports the 2.4GHz band, which could cause a problem if you share a hotspot from your phone. Most modern smartphones create a hotspot on the 5GHz band by default because it’s faster. A device that only supports 2.4GHz simply can’t “see” or connect to a 5GHz network.)
6. The microcontroller will start sending data to the message broker.
7. Verify that the data is sent by opening the management interface of the broker. Here, press the queue tab and select the queue for your session. Press on it and go down to bindings, you should see: lavinmq/home/temperature and lavinmq/home/humidity.

Wi-Fi and MQTT credentials are now stored on the board.

If you plug it in again to the computer later on, you will need to wait about one minute for the ‘Demo_wifi’ network to disappear from the list of available networks; the device will then connect to Wi-Fi.

Step 3: Create the web page

It’s time to subscribe to the data from the message broker and show it on a web page. We have prepared a web page for you to download here.

1. Clone the wep page project from GitHub.

2. Configure the broker URL in the code.

    const MQTT_URL = "wss://HOSTNAME.lmq.cloudamqp.com/mqtt"; 
    const TOPIC_TEMP = "lavinmq/home/temperature";
    const TOPIC_HUM  = "lavinmq/home/humidity";
    const MQTT_OPTIONS = {
        username: "USERNAME:USERNAME",
        password: "*****",
        clientId: "webclient-" + Math.random().toString(16).slice(2),
        clean: true, keepalive: 60, reconnectPeriod: 2000, protocolVersion: 4, protocolId: "MQTT"
    };
   

3. Run the web page.

Have fun!

We can’t wait to see what you build! If you want to dive deeper, get some hands-on help, or share your project with fellow developers, join our Slack community. It’s a place to ask questions, get advice from our team, and connect with other innovators using LavinMQ for their projects.