NodeMCU: Show Live Data from DHT11 Sensor Using WebSocket on Flutter Mobile App
Introduction
The NodeMCU is a popular microcontroller board that can be used to connect objects to the internet. In this blog post, we will explore how to use the NodeMCU to show live data from a DHT11 sensor using WebSocket on a Flutter mobile app. The DHT11 sensor is a low-cost, low-power temperature and humidity sensor that can be used in a variety of applications.
Hardware Requirements
The hardware requirements for this project are:
– NodeMCU board
– DHT11 sensor
– Breadboard and jumper wires
Software Requirements
The software requirements for this project are:
– Arduino IDE
– Flutter SDK
– WebSocket library for Flutter
Connecting the DHT11 Sensor to the NodeMCU
To connect the DHT11 sensor to the NodeMCU, follow these steps:
– Connect the VCC pin of the DHT11 sensor to the 3V3 pin of the NodeMCU
– Connect the GND pin of the DHT11 sensor to the GND pin of the NodeMCU
– Connect the SIG pin of the DHT11 sensor to any digital pin of the NodeMCU
NodeMCU Code
Here is an example of the NodeMCU code:
“`c++
#include
#include
#include
#include
const char* ssid = “yourwifissid”;
const char* password = “yourwifipassword”;
const int dhtPin = 2;
DHT dht(dhtPin, DHT11);
WiFiServer server(80);
WiFiClient client;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(“Connecting to WiFi…”);
}
Serial.println(“Connected to WiFi”);
server.begin();
}
void loop() {
client = server.available();
if (client) {
String request = client.readStringUntil(‘\r’);
client.flush();
int temperature = dht.readTemperature();
int humidity = dht.readHumidity();
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/plain”);
client.println(“”);
client.println(temperature);
client.println(humidity);
delay(50);
client.stop();
}
}
“`
Flutter App Code
Here is an example of the Flutter app code:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:websockets/websockets.dart’;
class HomePage extends StatefulWidget {
@override
HomePageState createState() => HomePageState();
}
class _HomePageState extends State
WebSocket _ws;
String _temperature = “”;
String _humidity = “”;
void _connectWebSocket() async {
ws = await WebSocket.connect(‘ws://yournodemcuip_address:80′);
_ws.listen((event) {
setState(() {
_temperature = event.split(“,”)[0];
_humidity = event.split(“,”)[1];
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“DHT11 Sensor Data”),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:
Text(“Temperature: $_temperature°C”),
Text(“Humidity: $_humidity%”),
SizedBox(height: 20),
ElevatedButton(
onPressed: _connectWebSocket,
child: Text(“Connect to NodeMCU”),
),
],
),
),
);
}
}
“`
Conclusion
In this blog post, we have shown how to use the NodeMCU to show live data from a DHT11 sensor using WebSocket on a Flutter mobile app. This project can be used in a variety of applications, such as home automation and environmental monitoring.
FAQs
1. What is NodeMCU?
NodeMCU is a popular microcontroller board that can be used to connect objects to the internet.
2. What is DHT11 sensor?
DHT11 sensor is a low-cost, low-power temperature and humidity sensor that can be used in a variety of applications.
3. What is WebSocket?
WebSocket is a protocol that allows for bidirectional, real-time communication between a client and a server over the web.
4. How to connect DHT11 sensor to NodeMCU?
To connect the DHT11 sensor to the NodeMCU, connect the VCC pin of the DHT11 sensor to the 3V3 pin of the NodeMCU, connect the GND pin of the DHT11 sensor to the GND pin of the NodeMCU, and connect the SIG pin of the DHT11 sensor to any digital pin of the NodeMCU.
5. How to show live data from DHT11 sensor on Flutter mobile app?
To show live data from the DHT11 sensor on a Flutter mobile app, use the WebSocket protocol to connect to the NodeMCU and receive the sensor data in real-time.
