Eduardo-Morales-Alberti · April 27, 2024 17:49
diff --git a/control_led.ino b/control_led.ino
 #include <WiFi.h>
 #include <ESPAsyncWebServer.h>
 #include <SPIFFS.h>
 #include <WebSocketsServer.h>

 const uint8_t ledPin = 2;

 AsyncWebServer server(80);
 WebSocketsServer websockets(81);

 // HTML web page to handle 3 input fields (input1, input2, input3)
 const char index_html[] PROGMEM = R"rawliteral(
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <div style="text-align:center;">
        <h1>ESP32 CONTROL PANEL</h1>
        <h3>Led</h3>
        <button onclick="turnOn()">ON</button>
        <button onclick="turnOff()">Off</button>
    </div>
    <script>
        let socketConnection = new WebSocket('ws://' + location.hostname + ':81');
        var somePackage = {};
        somePackage.connect = function()  {
            var ws = new WebSocket('ws://'+document.location.host+ ':81');
            ws.onopen = function() {
                console.log('ws connected');
                somePackage.ws = ws;
            };
            ws.onerror = function() {
                console.log('ws error');
            };
            ws.onclose = function() {
                console.log('ws closed');
            };
            ws.onmessage = function(msgevent) {
                // var msg = JSON.parse(msgevent.data);
                var msg = msgevent.data;
                console.log('in :', msg);
                // message received, do something
            };
        };

        somePackage.send = function(msg) {
            if (!this.ws) {
                console.log('no connection');
                return;
            }
            console.log('out:', msg)
            //this.ws.send(window.JSON.stringify(msg));
            this.ws.send(msg);
        };
        somePackage.connect();
        const turnOn = () => somePackage.send("LedOn");
        const turnOff = () => somePackage.send("LedOff");
    </script>
 </body>
 </html>)rawliteral";

 void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  delay(2000);
  WiFi.softAP("ControlLed", "");
  Serial.println("\nsoftAP");
  Serial.println(WiFi.softAPIP());

  if (!SPIFFS.begin(true)) {
    Serial.println("Error al montar SPIFFS");
    return;
  }

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "text/html", index_html);
  });
  server.onNotFound(notFound);
  server.begin();

  websockets.begin();
  websockets.onEvent(webSocketEvent);
 }

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

 void webSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length)
 {
  switch (type)
  {
    case WStype_DISCONNECTED:
      Serial.printf("[%u] Desconectado!\n", num);
      break;
    case WStype_CONNECTED:
    {
      IPAddress ip = websockets.remoteIP(num);
      Serial.printf("[%u] Conectado en %d.%d.%d.%d:\n", num, ip[0], ip[1], ip[2], ip[4]);

      websockets.sendTXT(num, "Conectado al servidor");
    }
    break;
    case WStype_TEXT:
      Serial.printf("[%u] Mensaje recibido: %s\n", num, payload);
      String msg = String((char *)(payload));

      if (msg.equalsIgnoreCase("ledon")) {
        digitalWrite(ledPin, HIGH);
        websockets.sendTXT(num, "Estado led: on");
      }

      if (msg.equalsIgnoreCase("ledoff")) {
        digitalWrite(ledPin, LOW);
        websockets.sendTXT(num, "Estado led: off");
      }
  }
 }

 void notFound(AsyncWebServerRequest *request)
 {
  request->send(404, "text/plain", "Página no encontrada!");
 }
	#include <WiFi.h>
	#include <ESPAsyncWebServer.h>
	#include <SPIFFS.h>
	#include <WebSocketsServer.h>

	const uint8_t ledPin = 2;

	AsyncWebServer server(80);
	WebSocketsServer websockets(81);

	// HTML web page to handle 3 input fields (input1, input2, input3)
	const char index_html[] PROGMEM = R"rawliteral(
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div style="text-align:center;">
	<h1>ESP32 CONTROL PANEL</h1>
	<h3>Led</h3>
	<button onclick="turnOn()">ON</button>
	<button onclick="turnOff()">Off</button>
	</div>
	<script>
	let socketConnection = new WebSocket('ws://' + location.hostname + ':81');
	var somePackage = {};
	somePackage.connect = function() {
	var ws = new WebSocket('ws://'+document.location.host+ ':81');
	ws.onopen = function() {
	console.log('ws connected');
	somePackage.ws = ws;
	};
	ws.onerror = function() {
	console.log('ws error');
	};
	ws.onclose = function() {
	console.log('ws closed');
	};
	ws.onmessage = function(msgevent) {
	// var msg = JSON.parse(msgevent.data);
	var msg = msgevent.data;
	console.log('in :', msg);
	// message received, do something
	};
	};

	somePackage.send = function(msg) {
	if (!this.ws) {
	console.log('no connection');
	return;
	}
	console.log('out:', msg)
	//this.ws.send(window.JSON.stringify(msg));
	this.ws.send(msg);
	};
	somePackage.connect();
	const turnOn = () => somePackage.send("LedOn");
	const turnOff = () => somePackage.send("LedOff");
	</script>
	</body>
	</html>)rawliteral";

	void setup() {
	Serial.begin(115200);
	pinMode(ledPin, OUTPUT);
	delay(2000);
	WiFi.softAP("ControlLed", "");
	Serial.println("\nsoftAP");
	Serial.println(WiFi.softAPIP());

	if (!SPIFFS.begin(true)) {
	Serial.println("Error al montar SPIFFS");
	return;
	}

	server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
	request->send(200, "text/html", index_html);
	});
	server.onNotFound(notFound);
	server.begin();

	websockets.begin();
	websockets.onEvent(webSocketEvent);
	}

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

	void webSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length)
	{
	switch (type)
	{
	case WStype_DISCONNECTED:
	Serial.printf("[%u] Desconectado!\n", num);
	break;
	case WStype_CONNECTED:
	{
	IPAddress ip = websockets.remoteIP(num);
	Serial.printf("[%u] Conectado en %d.%d.%d.%d:\n", num, ip[0], ip[1], ip[2], ip[4]);

	websockets.sendTXT(num, "Conectado al servidor");
	}
	break;
	case WStype_TEXT:
	Serial.printf("[%u] Mensaje recibido: %s\n", num, payload);
	String msg = String((char *)(payload));

	if (msg.equalsIgnoreCase("ledon")) {
	digitalWrite(ledPin, HIGH);
	websockets.sendTXT(num, "Estado led: on");
	}

	if (msg.equalsIgnoreCase("ledoff")) {
	digitalWrite(ledPin, LOW);
	websockets.sendTXT(num, "Estado led: off");
	}
	}
	}

	void notFound(AsyncWebServerRequest *request)
	{
	request->send(404, "text/plain", "Página no encontrada!");
	}