How can i make esp32 ip open from any network

Projects Networking, Protocols, and Devices
1

So currently I made a smart waiting system which fills the form from an html page of esp32 ip and sends data to lcd currently the esp32 ip can be open
here is my code

#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>

const char* ssid = "SAJSVG-ATL";
const char* password = "Atl@#1234";

LiquidCrystal_I2C lcd(0x27, 16, 2); // Initialize LCD
AsyncWebServer server(80);
AsyncWebSocket ws("/ws"); // WebSocket endpoint

const int acceptButtonPin = 12;
const int rejectButtonPin = 14;

bool acceptPressed = false;
bool rejectPressed = false;

String nameToScroll = "";
int scrollIndex = 0;
unsigned long lastScrollTime = 0;
const unsigned long scrollInterval = 300;

// HTML with WebSocket
const char index_html[] = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #89f7fe, #66a6ff);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #333;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .form-box {
      background: linear-gradient(145deg, #ffffff, #f0f4ff);
      padding: 25px 45px;
      border-radius: 12px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 400px;
      transition: transform 0.3s ease-in-out;
    }
    .form-box:hover {
      transform: scale(1.05);
    }
    h2 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
      font-size: 26px;
    }
    .input-group {
      margin-bottom: 20px;
    }
    .input-group label {
      display: block;
      color: #555;
      font-size: 16px;
      margin-bottom: 5px;
    }
    .input-group-row {
      display: flex;
      gap: 10px;
    }
    .input-group input,
    .input-group select {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .input-group input:focus,
    .input-group select:focus {
      border-color: #66a6ff;
      box-shadow: 0 0 8px rgba(102, 166, 255, 0.5);
    }
    .submit-button {
      width: 100%;
      padding: 12px;
      font-size: 18px;
      background: linear-gradient(135deg, #66a6ff, #89f7fe);
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    .submit-button:hover {
      background: linear-gradient(135deg, #5a9ee6, #76e4ff);
      transform: translateY(-2px);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-box">
      <h2>Visitor Name Entry</h2>
      <form id="visitor-form" action="/submit" method="POST">
        <div class="input-group">
          <label for="visitor-name">Visitor Name</label>
          <input type="text" id="visitor-name" name="visitor-name" placeholder="Enter your name" required>
        </div>
        <div class="input-group-row">
          <div class="input-group">
            <label for="visitor-type">Visitor Type</label>
            <select id="visitor-type" name="visitor-type" required>
              <option value="" disabled selected>Select Type</option>
              <option value="Student">Student</option>
              <option value="Guest">Guest</option>
              <option value="Staff">Staff</option>
              <option value="Admin">Admin</option>
            </select>
          </div>
          <div class="input-group">
            <label for="priority-level">Priority Level</label>
            <select id="priority-level" name="priority-level" required>
              <option value="" disabled selected>Select Priority</option>
              <option value=":HP">High</option>
              <option value=":MP">Medium</option>
              <option value=":LP">Low</option>
            </select>
          </div>
        </div>
        <button type="submit" class="submit-button">Submit</button>
      </form>
      <div id="visitor-status" style="margin-top: 20px; font-size: 18px; color: #333; text-align: center;">
        Visitor Status: <span id="status">Awaiting Input</span>
      </div>
    </div>
  </div>
  <script>
    const socket = new WebSocket(`ws://${location.host}/ws`);
    socket.onmessage = function(event) {
      document.getElementById('status').textContent = event.data;
    };
  </script>
</body>
</html>
)rawliteral";

// Function to send WebSocket message
void notifyClients(String message) {
  ws.textAll(message);
}

void setup() {
  Serial.begin(115200);
  pinMode(acceptButtonPin, INPUT_PULLUP);
  pinMode(rejectButtonPin, INPUT_PULLUP);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
 

  lcd.init();
  lcd.backlight();
  lcd.clear();

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

// Handle form submission
server.on("/submit", HTTP_POST, [](AsyncWebServerRequest *request) {
    String name, type, level;
    if (request->hasParam("visitor-name", true)) name = request->getParam("visitor-name", true)->value();
    if (request->hasParam("visitor-type", true)) type = request->getParam("visitor-type", true)->value();
    if (request->hasParam("priority-level", true)) level = request->getParam("priority-level", true)->value();

    Serial.println("Visitor Name: " + name);
    Serial.println("Visitor Type: " + type);
    Serial.println("Visitor Priority: " + level);

    lcd.clear();
    lcd.setCursor(0, 0);
    lcd.print("Name:");
    if (name.length() > 11) {
      nameToScroll = name;
      scrollIndex = 0;
    } else {
      lcd.setCursor(6, 0);
      lcd.print(name);
      nameToScroll = "";
    }
    lcd.setCursor(0, 1);
    lcd.print("Type: " + type + level);

    // Enhanced response HTML
    String responseHTML = R"rawliteral(
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Successful !</title>
        <style>
          body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #a8ff78, #78ffd6);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
          }
          .confirmation-box {
            text-align: center;
            background: #fff;
            padding: 30px 50px;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.8s ease;
          }
          .confirmation-box .tick {
            font-size: 60px;
            color: #4caf50;
            margin-bottom: 15px;
          }
          .confirmation-box h1 {
            font-size: 24px;
            margin-bottom: 10px;
          }
          .confirmation-box p {
            font-size: 18px;
            margin-bottom: 20px;
          }
          .confirmation-box a {
            text-decoration: none;
            padding: 10px 20px;
            background: #4caf50;
            color: #fff;
            border-radius: 8px;
            transition: background 0.3s ease, transform 0.2s ease;
          }
          .confirmation-box a:hover {
            background: #45a049;
            transform: translateY(-2px);
          }
          @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
          }
        </style>
      </head>
      <body>
        <div class="confirmation-box">
          <div class="tick">&#10004;</div>
          <h1>Submission Successful!</h1>
         
          <a href="/">Go Back</a>
        </div>
      </body>
      </html>
    )rawliteral";

    request->send(200, "text/html", responseHTML);
});

  // WebSocket event handler
  ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
    if (type == WS_EVT_CONNECT) {
      Serial.println("WebSocket client connected");
    } else if (type == WS_EVT_DISCONNECT) {
      Serial.println("WebSocket client disconnected");
    }
  });
  server.addHandler(&ws);

  server.begin();
}

void loop() {
  // Handle scrolling
  if (!nameToScroll.isEmpty() && millis() - lastScrollTime > scrollInterval) {
    lastScrollTime = millis();
    lcd.setCursor(6, 0);
    String toDisplay = nameToScroll.substring(scrollIndex, scrollIndex + 11);
    String padding = String("            ").substring(0, 11 - toDisplay.length());
    lcd.print(toDisplay + padding);
    scrollIndex++;
    if (scrollIndex > nameToScroll.length() - 11) scrollIndex = 0;
  }

  // Accept button logic
  if (digitalRead(acceptButtonPin) == LOW) {
    if (!acceptPressed) {
      acceptPressed = true;
      Serial.println("Visitor Accepted!");
      lcd.clear();
      lcd.setCursor(0, 0);
      lcd.print("Visitor");
      lcd.setCursor(0, 1);
      lcd.print("Accepted!");
      notifyClients("Visitor Accepted!");
    }
  } else {
    acceptPressed = false;
  }

  // Reject button logic
  if (digitalRead(rejectButtonPin) == LOW) {
    if (!rejectPressed) {
      rejectPressed = true;
      Serial.println("Visitor Rejected!");
      lcd.clear();
      lcd.setCursor(0, 0);
      lcd.print("Visitor");
      lcd.setCursor(0, 1);
      lcd.print("Rejected!");
      notifyClients("Visitor Rejected!");
    }
  } else {
    rejectPressed = false;
  }
}
2

Did you have a question?

3

Are you using an Arduino Nano ESP32? Or some other ESP32 based board?

4

esp32 based

5

Are you really sure you wanna make it accessible to the world? It's not very security wise.

7

I used something called Caddyfile. I don't know exactly how it works but it dealt with making it a secure https://xxxxx site. I think it is some kind of reverse proxy. Also I password protected the site via Caddy also. It has been a while since I used it. It made my esp32 server accessible to outside my LAN. I believe you need a domain name, maybe not. I think if I was going to make it permament I would host it somewhere and reverse proxy to the hosting organization. I did a lot of reading on security and its a deep dive.

9

yes i want to make it

10

Ok, you're the boss :upside_down_face:

In your router you do a so called port forward from the routers external / WAN IP. Pick a port like 80 and point it to your ESP32 IP and port 80.

Your web server will get a lot of traffic of the unwanted kind after this. There are safer ways to do it, like a VPN, maybe you'll realize the need for that.

11

can you provide me with the steps

12

Yes, it goes like this.

  1. Get the manual for the router.
  2. Login to the router.
  3. Follow the steps in the manual, for what I described.

It's as easy as that.

This is noteworthy and could possibly be something for you:

https://docs.arduino.cc/arduino-cloud/guides/esp32/

1 Like
13

I moved your topic to a more appropriate forum category @rudransh-8c

The Nano Family > Nano ESP32 category you chose is only used for discussions directly related to the Arduino Nano ESP32 board.

In the future, please take the time to pick the forum category that best suits the subject of your question. There is an "About the _____ category" topic at the top of each category that explains its purpose.

Thanks in advance for your cooperation.

14

do i have to make changes in the code also?
and have to add different things

15

No changes are needed.

16

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.