Sử Dụng ESP32 Làm Trang Web Kiểm Tra Cổng Đóng/Mở

Sử Dụng ESP32 Làm Trang Web Kiểm Tra Cổng Đóng/Mở

ESP32 với khả năng linh hoạt và mạnh mẽ, không chỉ là một nền tảng IoT tiên tiến mà còn là một công cụ lý tưởng để xây dựng các ứng dụng như trang web kiểm tra cổng mạng. Trang web này giúp người dùng kiểm tra trạng thái mở hoặc đóng của các cổng mạng trên hệ thống của mình một cách dễ dàng và hiệu quả.

2Screenshot 2024 06 16 143007

Tính Năng Trang Web

 1.  Kiểm Tra Cổng Mạng: ESP32 được lập trình để quét và báo cáo trạng thái của các cổng mạng, từ đó người dùng có thể biết được cổng đóng (closed) hoặc mở (open).

 2.  Giao Diện Người Dùng Thân Thiện: Giao diện đơn giản và thân thiện với người dùng, cho phép họ dễ dàng nhập số cổng cần kiểm tra và nhận kết quả ngay lập tức.

 3.  Tích Hợp Linh Hoạt: Khả năng hoạt động trên nhiều nền tảng khác nhau, bao gồm cả máy tính và thiết bị di động, giúp người dùng tiếp cận và sử dụng trang web một cách tiện lợi.

Ngoài ra chỉ cần mở cổng ra bên ngoài và có được ip public ta có thể truy cập từ xa vào để kiểm tra tình trạng đóng mở cổng của các ip. Hoặc có thể nhúng vào web nếu bạn đang sài hosting.

Trong code dưới đây bởi vì tài nguyên phần cứng trên ESP32 có hạn nên tôi chỉ kiểm tra trạng thái mỗi cổng 1 lần. Cùng với việc chúng ta sẽ cố định ip của ESP32 trên router nếu cần mở port và không muốn kiểm tra ip của esp32 mỗi lần kết nối để cho code được ngắn gọn và đơn giản nhất.

#include <WiFi.h>
#include <WebServer.h>
#include <HTTPClient.h>

const char* ssid = "mĩxxxx";
const char* password = "1234567999";
const int ledPin = 15; 

WebServer server(81);
const char* htmlPage = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
  <title>ESP32 Port Checker</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    h2 {
      color: #333;
    }
    form {
      background: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: inline-block;
      margin-top: 50px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
    }
    input[type="text"] {
      width: calc(100% - 22px);
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    input[type="submit"] {
      padding: 10px 20px;
      border: none;
      background-color: #007bff;
      color: white;
      border-radius: 3px;
      cursor: pointer;
    }
    input[type="submit"]:hover {
      background-color: #0056b3;
    }
  </style>
  <script>
    async function fetchPublicIP() {
      const response = await fetch('https://api.ipify.org?format=json');
      const data = await response.json();
      document.getElementById('ip').value = data.ip;
    }
    window.onload = fetchPublicIP;
  </script>
</head>
<body>
  <h2>ESP32 Port Checker</h2>
  <form action="/check" method="get">
    <label for="ip">IP/Domain:</label>
    <input type="text" id="ip" name="ip"><br>
    <label for="port">Port:</label>
    <input type="text" id="port" name="port"><br>
    <input type="submit" value="Check">
  </form>
  %s
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(115200);

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

  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, HIGH);

  server.on("/", HTTP_GET, []() {
    server.send(200, "text/html", htmlPage);
  });

  // Check
  server.on("/check", HTTP_GET, []() {
    if (server.hasArg("ip") && server.hasArg("port")) {
      String ip = server.arg("ip");
      String port = server.arg("port");
      bool isOpen = checkPort(ip, port.toInt());

      String result = "<p>Checking " + ip + ":" + port + " - ";
      result += isOpen ? "Open" : "Closed";
      result += "</p>";
      server.send(200, "text/html", String(htmlPage) + result);
    } else {
      server.send(200, "text/html", String(htmlPage) + "<p>Invalid input</p>");
    }
  });

  server.begin();
}

void loop() {
  server.handleClient();
}

bool checkPort(String host, uint16_t port) {
  WiFiClient client;
  return client.connect(host.c_str(), port);
}

 

hãy thay đổi thông tin sau nếu cần.

const char* ssid = "xxxx"; //tên wifi của bạn
const char* password = "passwd"; //mật khẩu wifi

WebServer server(81); // đang port 81 đổi thành port khác nếu cần

Sau khi nạp code và esp32 đã kết nối tới wifi hãy kiểm tra địa chỉ ip của ESP32 và truy cập vào theo địa chỉ http://IP:81 để kiểm tra cổng  nếu mở port ra ngoài thay IP bằng IPPublic là được.

ESP32 không chỉ là một nền tảng IoT mạnh mẽ mà còn là sự lựa chọn hoàn hảo cho việc xây dựng các ứng dụng nhu cầu cá nhân, mang lại sự đơn giản, hiệu quả và và chi phí rẻ. Hãy vọc ESP32 để có những ứng dụng hay!

 

Dưới đây là phần giải thích sơ về đoạn mã Arduino trên:

Thư viện

– `#include <WiFi.h>`: Thư viện cho kết nối WiFi.
– `#include <WebServer.h>`: Thư viện cho việc thiết lập máy chủ web.
– `#include <HTTPClient.h>`: Thư viện cho việc thực hiện các yêu cầu HTTP.

Biến toàn cục

– `const char* ssid = “mĩxxxx”;`: Tên SSID cho mạng WiFi.
– `const char* password = “1234567999”;`: Mật khẩu cho mạng WiFi.
– `const int ledPin = 15;`: Pin GPIO15 được sử dụng để điều khiển đèn LED.

– `WebServer server(81);`: Tạo một máy chủ web chạy trên cổng 81.
– `const char* htmlPage = R”rawliteral(…)rawliteral”;`: Nội dung HTML của trang web, được định nghĩa dưới dạng raw string literal.

Nội dung HTML

– HTML trang web bao gồm một tiêu đề, một form để nhập địa chỉ IP hoặc tên miền và cổng cần kiểm tra, cùng với một số định dạng CSS để trang trí giao diện.
– Một đoạn JavaScript để tự động lấy địa chỉ IP công cộng khi trang web tải xong.

Hàm `setup()`

– `Serial.begin(115200);`: Khởi động giao tiếp serial với tốc độ 115200 baud.
– `WiFi.begin(ssid, password);`: Bắt đầu kết nối đến mạng WiFi.
– `while (WiFi.status() != WL_CONNECTED)`: Chờ đến khi kết nối thành công tới WiFi.
– `Serial.println(“Connected to WiFi”);`: In ra thông báo kết nối thành công.
– `pinMode(ledPin, OUTPUT);`: Thiết lập pin GPIO15 làm đầu ra để điều khiển đèn LED.
– `digitalWrite(ledPin, HIGH);`: Bật đèn LED để báo hiệu kết nối WiFi thành công.

Thiết lập máy chủ web

– `server.on(“/”, HTTP_GET, []() { … });`: Xử lý yêu cầu GET tới trang chủ `/`, gửi nội dung HTML.
– `server.on(“/check”, HTTP_GET, []() { … });`: Xử lý yêu cầu GET tới đường dẫn `/check`, kiểm tra xem các tham số `ip` và `port` có được gửi hay không.

Hàm `loop()`

– `server.handleClient();`: Xử lý các yêu cầu từ client.

Hàm `checkPort()`

– `bool checkPort(String host, uint16_t port)`: Hàm kiểm tra xem cổng có mở hay không.
– `WiFiClient client;`: Tạo đối tượng WiFiClient để kết nối TCP.
– `return client.connect(host.c_str(), port);`: Trả về true nếu kết nối tới địa chỉ IP/host và cổng thành công, ngược lại trả về false.

Tổng kết

Đoạn mã trên kết nối ESP32 tới mạng WiFi, thiết lập một máy chủ web để người dùng có thể nhập vào địa chỉ IP hoặc tên miền và cổng để kiểm tra xem cổng có mở hay không. Khi người dùng gửi yêu cầu kiểm tra, ESP32 sẽ thực hiện kết nối tới địa chỉ IP và cổng đó, sau đó trả về kết quả cho người dùng biết cổng đó có mở hay không. Đèn LED được bật sáng để báo hiệu trạng thái kết nối WiFi thành công.

Leave a Comment

👈 Vuốt để chuyển bài 👉

KIỂM TRA PORT

IPv6 của bạn: Đang lấy...