Hello dears,
i am trying to make project using esp32 and the codes runs very well and esp32 is runing as webserver and providing webpage which is using websocket .. but actually i want this webpage to run in my website which is web host with domain and then i can make any one controls the esp32 by using my website by user and password i provide them . i really do not know how to make this and what topic i should read about and if there are any example for such communication please let me know
this is the basic example i want this webpage code in the code to not be in the esp32 i want this to be in my own website and from there it controls the esp32
//============================
//ESP32 Web Server: Toggle LED
//============================
#include <WiFi.h>
#include <WebServer.h>
#include "webpageCode.h"
//------------------------------------------
const char* ssid = "ssid";
const char* password = "password";
//------------------------------------------
WebServer server(80);
//------------------------------------------
#include "functions.h"
//===================================================================
void setup()
{
Serial.begin(115200); pinMode(2, OUTPUT); delay(10);
//-----------------------------------------------------------------
Serial.println();
Serial.print("Connecting to WiFi ");
WiFi.begin(ssid, password);
while (WiFi.status()!=WL_CONNECTED){delay(500); Serial.print(".");}
Serial.println(); Serial.println("WiFi connected.");
Serial.print("IP address: "); Serial.println(WiFi.localIP());
//-----------------------------------------------------------------
server.on("/", webPage);
server.on("/led", LEDtoggle);
server.begin();
}
//===================================================================
void loop() {server.handleClient();}
function.h file:
//=====================
//web handler functions
//=====================
void webPage()
{
server.send(200,"text/html", webpageCode);
}
//---------------------------------------------
void LEDtoggle()
{
digitalWrite(2, !digitalRead(2)); delay(500);
server.send(200,"text/html", webpageCode);
}
webpageCode.h file:
//=================
//Webpage HTML code
//=================
String webpageCode = R"***(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Web Server</title>
</head>
<style>
body {font-family: "Calibri"; text-align:center; background-color: rgba(128, 128, 128, 0.589)}
h1 {color: rgba(0, 0, 255, 0.788); font-size: 50px;}
h2 {color: rgb(155, 11, 11); font-size: 30px;}
#btn
{
display: inline-block;
text-decoration: none;
background: #b60303;
color: rgba(255,255,255, 0.80);
font-weight: bold;
font: 50px arial, sans-serif;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
margin: 30%;
margin-top: 60px;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: 0px 0px 0px 8px #0813018e;
border: solid 2px rgba(247, 243, 7, 0.836);
transition: 0.4s;
cursor: pointer;
}
</style>
<body>
<h1>
ESP32 Web Server<br>
</h1>
<h2>
Click to toggle LED
<a href="/led" id="btn" onclick="onoff()">LED</a>
</h2>
<script>
function onoff()
{
var x = document.getElementById("btn");
x.innerHTML = "T";
}
</script>
</body>
</html>
)***";