John Davidson

Message:

I want to make requests to an esp32 at the clients location (local-network).
The Idea is to control an esp32 via the webbrowser. I want to use PHP for the backend. How can I control the esp32 without using a forwarded port.

My idea was to let a javascript-script make the http call to the local-ip from the esp32 with a simple http server on it. Localy it worked, but I wondered if this is still working if the server is outside of my local network, but I dont have a webserver, so ive uploaded a test file to github pages and tried to access my esp32 via githubpages. But unfortunately the request got blocked:

Even though the initial HTML page is loaded over a secure HTTPS connection, some resources like images, stylesheets or scripts are being accessed over an insecure HTTP connection. Usage of insecure resources is restricted to strengthen the security of your entire site.
To resolve this issue, load all resources over a secure HTTPS connection.

Ive installed a basic https server on the esp32: https://techtutorialsx.com/2019/04/07/esp32-https-web-server/

but i got the same error again.The request is made in this code:

document.write("Mate");

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", "https://ip_esp32/", false);



xmlHttp.send(null);

document.write("Try:" + xmlHttp.responseText);

How can I make a request with javascript without using Node.js? If this is not possible, can I controll the local esp32 otherwise with PHP?

---

My Answer:
If you want to make a local HTTP/HTTPS request to an ESP32 at the client's location without using a forwarded port, you can use PHP as the backend and JavaScript to make the request. However, you may encounter issues with mixed content (HTTP and HTTPS) when accessing the ESP32 from a remote server.

One way to resolve this issue is to ensure that all resources are loaded over a secure HTTPS connection. You can try hosting your PHP backend and JavaScript code on a server that supports HTTPS, or use a service like ngrok to create a secure tunnel to your local server.

Alternatively, you can try using a WebSocket connection to communicate with the ESP32 from the client-side JavaScript code. This way, you can establish a persistent connection between the client and the ESP32 without the need for HTTP requests.

Here is an example of how you can use WebSocket to communicate with the ESP32 from the client-side JavaScript code:

javascript
var socket = new WebSocket("wss://ip_esp32");

socket.onopen = function(event) {
console.log("WebSocket connection opened");

// Send a message to the ESP32
socket.send("Hello ESP32");
};

socket.onmessage = function(event) {
console.log("Message received from ESP32: " + event.data);
};

socket.onclose = function(event) {
console.log("WebSocket connection closed");
};


On the ESP32 side, you will need to set up a WebSocket server to handle the incoming messages from the client. You can refer to the ESP32 WebSocket server tutorial for more information on how to implement this.

Overall, using WebSocket for communication between the client and the ESP32 may be a more reliable and secure option compared to making HTTP requests over a mixed content connection.