Automating Gate Opening with ESP32 and MQTT: Remote Control from a React Native App

Access automation is a growing field, especially when integrating IoT with remote control solutions. In this article, we will explore how to open and close a gate using an ESP32 with MQTT, controlled from a React Native app. We will also discuss communication security and how this type of solution can be implemented in different environments, from homes to businesses like a fence company chicago looking to optimize their access control. Project Requirements To build this project, we need: ESP32: To connect the hardware to the network. 5V Relay: To trigger the gate mechanism. MQTT Broker (e.g., Mosquitto or HiveMQ). React Native with React Native MQTT. Node.js with Express.js (Optional, for an intermediary API). Setting Up ESP32 with MQTT The ESP32 will act as an MQTT client, subscribing to a topic where it will receive commands to open or close the gate. Installing Necessary Libraries In the ESP32 code, we will use the PubSubClient library to handle MQTT. Add the following code to the .ino file: #include #include const char* ssid = "YourSSID"; const char* password = "YourPassword"; const char* mqttServer = "broker.hivemq.com"; const int mqttPort = 1883; WiFiClient espClient; PubSubClient client(espClient); const int relayPin = 5; void callback(char* topic, byte* payload, unsigned int length) { String message = ""; for (int i = 0; i < length; i++) { message += (char)payload[i]; } if (message == "open") { digitalWrite(relayPin, HIGH); delay(1000); digitalWrite(relayPin, LOW); } } void setup() { pinMode(relayPin, OUTPUT); digitalWrite(relayPin, LOW); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); } client.setServer(mqttServer, mqttPort); client.setCallback(callback); while (!client.connected()) { client.connect("ESP32Client"); } client.subscribe("gate/control"); } void loop() { client.loop(); } This code connects the ESP32 to WiFi and subscribes to an MQTT topic. When it receives the message "open", it activates the relay to trigger the gate mechanism. Building the React Native App To send commands to the ESP32, we will create a React Native app using MQTT. Installing Dependencies First, install the MQTT library: npm install mqtt React Native MQTT Code Create a MQTTService.js file to manage the connection: import init from 'react_native_mqtt'; init({ size: 10000, storageBackend: AsyncStorage, defaultExpires: 1000 * 60 * 60, enableCache: true, reconnect: true, sync: {}, }); const options = { host: "broker.hivemq.com", port: 8000, path: "/mqtt", id: `id_${parseInt(Math.random() * 100000)}`, }; const client = new Paho.MQTT.Client(options.host, options.port, options.path); client.connect({ onSuccess: () => console.log("Connected to MQTT"), }); export const sendCommand = (message) => { const mqttMessage = new Paho.MQTT.Message(message); mqttMessage.destinationName = "gate/control"; client.send(mqttMessage); }; Gate Control Button Now, in App.js, create a button to open the gate: import React from 'react'; import { View, Button } from 'react-native'; import { sendCommand } from './MQTTService'; const App = () => { return ( sendCommand("open")} /> ); }; export default App; When the button is pressed, an MQTT message is sent, which the ESP32 receives to trigger the relay and open the gate. Security and Enhancements One of the biggest concerns in these systems is security. To prevent unauthorized access: Use a secure MQTT server with authentication. Implement JWT or OAuth authentication in the app. Use TLS/SSL encryption in the MQTT server. Real-World Applications This type of automation is not just useful for homes but also for security companies and perimeter fencing businesses. For example, a fence company chicago could implement this system to manage access to their premises. Additionally, locations with chain link fence chicago could integrate sensors to detect unauthorized openings and send real-time alerts. Conclusion Using ESP32 and MQTT for gate control enables seamless integration with mobile apps like React Native. This approach is scalable and can be applied in various environments, from residential properties to industries that require advanced access systems. If you found this article helpful, share it and let us know about your experience with IoT and React Native!

#include 
#include 

const char* ssid = "YourSSID";
const char* password = "YourPassword";
const char* mqttServer = "broker.hivemq.com";
const int mqttPort = 1883;

WiFiClient espClient;
PubSubClient client(espClient);

const int relayPin = 5;

void callback(char* topic, byte* payload, unsigned int length) {
    String message = "";
    for (int i = 0; i < length; i++) {
        message += (char)payload[i];
    }

    if (message == "open") {
        digitalWrite(relayPin, HIGH);
        delay(1000);
        digitalWrite(relayPin, LOW);
    }
}

void setup() {
    pinMode(relayPin, OUTPUT);
    digitalWrite(relayPin, LOW);

    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(1000);
    }

    client.setServer(mqttServer, mqttPort);
    client.setCallback(callback);

    while (!client.connected()) {
        client.connect("ESP32Client");
    }

    client.subscribe("gate/control");
}

void loop() {
    client.loop();
}

npm install mqtt

import init from 'react_native_mqtt';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 60 * 60,
  enableCache: true,
  reconnect: true,
  sync: {},
});

const options = {
  host: "broker.hivemq.com",
  port: 8000,
  path: "/mqtt",
  id: `id_${parseInt(Math.random() * 100000)}`,
};

const client = new Paho.MQTT.Client(options.host, options.port, options.path);

client.connect({
  onSuccess: () => console.log("Connected to MQTT"),
});

export const sendCommand = (message) => {
  const mqttMessage = new Paho.MQTT.Message(message);
  mqttMessage.destinationName = "gate/control";
  client.send(mqttMessage);
};

import React from 'react';
import { View, Button } from 'react-native';
import { sendCommand } from './MQTTService';

const App = () => {
  return (
    
       sendCommand("open")} />
    
  );
};

export default App;

Real-World Applications

Related Posts

LangGraph Subgraphs: A Guide to Modular AI Agents Devel...

Feb 17, 2025  0

What Is Split For Heat In Amazon DynamoDB?

Mar 8, 2025  0

How to Find Profitable App Ideas (Even If You Think Eve...

Feb 28, 2025  0