alex9ufo 聰明人求知心切: ESP32 Async Web Server & MQTT

ESP32 Async Web Server & MQTT – Control LED

源自於https://randomnerdtutorials.com/esp32-async-web-server-espasyncwebserver-library/

// Import required libraries

#include <WiFi.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

//================MQTT=====================

#include <PubSubClient.h> //MQTT

// Replace with your network credentials

//const char* ssid = "REPLACE_WITH_YOUR_SSID";

//const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* ssid = "TOTOLINK_A3002MU";

const char* password = "24063173";

const char* PARAM_INPUT_1 = "output";

const char* PARAM_INPUT_2 = "state";

String inputMessage1;

String inputMessage2;

const int output2 = 2;

const int output4 = 4;

const int output33 = 33;

// Auxiliar variables to store the current output state

String output2State = "off";

String output4State = "off";

String output33State = "off";

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

//================MQTT=====================

const char* mqtt_server = "broker.mqtt-dashboard.com" ; //MQTT

//================MQTT=====================

WiFiClient espClient;

PubSubClient client(espClient);

long lastMsg = 0;

char msg[50];

//=========================================

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<title>ESP Web Server</title>

<style>

html {font-family: Arial; display: inline-block; text-align: center;}

h2 {font-size: 3.0rem;}

p {font-size: 3.0rem;}

body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}

.switch {position: relative; display: inline-block; width: 120px; height: 68px}

.switch input {display: none}

.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}

.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}

input:checked+.slider {background-color: #b30000}

input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}

</style>

</head>

<body>

<h2>ESP Web Server</h2>

%BUTTONPLACEHOLDER%

var xhr = new XMLHttpRequest();

if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }

else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }

xhr.send();

}

</script>

</body>

</html>

)rawliteral";

//=========================================

// Replaces placeholder with button section in your web page

String processor(const String& var){

//Serial.println(var);

if(var == "BUTTONPLACEHOLDER"){

String buttons = "";

buttons += "<h4>Output - GPIO 2</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" " + outputState(2) + "><span class=\"slider\"></span></label>";

buttons += "<h4>Output - GPIO 4</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"4\" " + outputState(4) + "><span class=\"slider\"></span></label>";

buttons += "<h4>Output - GPIO 33</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"33\" " + outputState(33) + "><span class=\"slider\"></span></label>";

return buttons;

}

return String();

}

//=========================================

String outputState(int output){

if(digitalRead(output)){

return "checked";

}

else {

return "";

}

//================MQTT=====================

void callback(char* topic, byte* message, unsigned int length) {

Serial.print("Message arrived on topic: ");

Serial.print(topic);

Serial.print(". Message: ");

String messageTemp;

for (int i = 0; i < length; i++) {

Serial.print((char)message[i]);

messageTemp += (char)message[i];

}

Serial.println();

// Feel free to add more if statements to control more GPIOs with MQTT

// If a message is received on the topic esp32/output, you check if the message is either "on" or "off".

// Changes the output state according to the message

if (String(topic) == "alex9ufo/esp32/input/LED2") {

Serial.print("Changing output to ");

if(messageTemp == "on"){

Serial.println("on");

output2State = "on";

digitalWrite(output2, HIGH);

}

else if(messageTemp == "off"){

Serial.println("off");

output2State = "off";

digitalWrite(output2, LOW);

}

if (String(topic) == "alex9ufo/esp32/input/LED4") {

Serial.print("Changing output to ");

if(messageTemp == "on"){

Serial.println("on");

output4State = "on";

digitalWrite(output4, HIGH);

}

else if(messageTemp == "off"){

Serial.println("off");

output4State = "off";

digitalWrite(output4, LOW);

}

if (String(topic) == "alex9ufo/esp32/input/LED33") {

Serial.print("Changing output to ");

if(messageTemp == "on"){

Serial.println("on");

output33State = "on";

digitalWrite(output33, HIGH);

}

else if(messageTemp == "off"){

Serial.println("off");

output33State = "off";

digitalWrite(output33, LOW);

}

loop_mqtt();

}

//================MQTT=====================

void reconnect() {

// Loop until we're reconnected

while (!client.connected()) {

Serial.print("Attempting MQTT connection...");

// Attempt to connect

if (client.connect("ESP32Client")) {

Serial.println("connected");

// Subscribe

client.subscribe("alex9ufo/esp32/input/LED2");

client.subscribe("alex9ufo/esp32/input/LED4");

client.subscribe("alex9ufo/esp32/input/LED33");

} else {

Serial.print("failed, rc=");

Serial.print(client.state());

Serial.println(" try again in 5 seconds");

// Wait 5 seconds before retrying

delay(5000);

}

//================MQTT=====================

void loop_mqtt(){

if (!client.connected()) {

reconnect();

}

client.loop();

long now = millis();

if (now - lastMsg > 5000) {

lastMsg = now;

client.publish("alex9ufo/esp32/output/LED2", String(output2State).c_str());

client.publish("alex9ufo/esp32/output/LED4", String(output4State).c_str());

client.publish("alex9ufo/esp32/output/LED33", String(output33State).c_str());

}

//=========================================

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

pinMode(2, OUTPUT);

digitalWrite(2, LOW);

pinMode(4, OUTPUT);

digitalWrite(4, LOW);

pinMode(33, OUTPUT);

digitalWrite(33, LOW);

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

// Print ESP Local IP Address

Serial.println(WiFi.localIP());

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

// Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>

server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {

//String inputMessage1;

//String inputMessage2;

// GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>

if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {

inputMessage1 = request->getParam(PARAM_INPUT_1)->value();

inputMessage2 = request->getParam(PARAM_INPUT_2)->value();

digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());

}

else {

inputMessage1 = "No message sent";

inputMessage2 = "No message sent";

}

Serial.print("GPIO: ");

Serial.print(inputMessage1);

Serial.print(" - Set to: ");

Serial.println(inputMessage2);

Serial.println(inputMessage1.substring(0,1));

Serial.println(inputMessage2.substring(0));

//=========================================

if (inputMessage1.substring(0,1)=="2"){

if (inputMessage2.substring(0,1)=="1") {

output2State="on";

//client.publish("alex9ufo/esp32/output/LED2", String("on").c_str());

} else {

output2State="off";

client.publish("alex9ufo/esp32/output/LED2", String("off").c_str());

}

//=========================================

if (inputMessage1.substring(0,1)=="4"){

if (inputMessage2.substring(0,1)=="1") {

output4State="on";

//client.publish("alex9ufo/esp32/output/LED4", String("on").c_str());

} else {

output4State="off";

client.publish("alex9ufo/esp32/output/LED4", String("off").c_str());

}

//=========================================

if (inputMessage1.substring(0,2)=="33"){

if (inputMessage2.substring(0,1)=="1" ){

output33State="on";

//client.publish("alex9ufo/esp32/output/LED33", String("on").c_str());

} else {

output2State="off";

//client.publish("alex9ufo/esp32/output/LED33", String("off").c_str());

}

//=========================================

request->send(200, "text/plain", "OK");

});

// Start server

server.begin();

//================MQTT=====================

client.setServer(mqtt_server, 1883);

client.setCallback(callback);

}

//=========================================

void loop() {

loop_mqtt();

}

alex9ufo 聰明人求知心切

2022年1月2日星期日

ESP32 Async Web Server & MQTT – Control LED

沒有留言:

張貼留言

2024_09 作業3 以Node-Red 為主

2022年1月2日 星期日

ESP32 Async Web Server & MQTT – Control LED

沒有留言:

張貼留言

2024_09 作業3 以Node-Red 為主

2022年1月2日星期日