13. Make up the ESP32 Web Server - EnglishNo/ESP32 GitHub Wiki

ESP32를 통해 서버(사이트) 만들기

DHT11 외 페이지 1개 - 개인 - Microsoft Edge 2023-06-02 오후 8_59_14 Editing 13 Make up the ESP32 Web Server · EnglishNo_ESP32 Wiki 외 페이지 3개 - 개인 - Microsoft Edge 2023-06-03 오후 2_37_08

HTML를 통해 기초적인 사이트 틀 만들기

HTML이란?

"HyperText Markup Language"의 약자로, 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류.
문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 사용.
HTML에는 태그, 속성, 콘텐츠, 요소로 이루어져 있는데, 태그하고 속성은 <>안에 작성되고, 콘텐츠는 여는 태그하고 닫은 태그 사이에 있는 문장, 요소는 여는 태그, 닫은 태그, 콘텐츠로 구성.
메모장에도 작성할 수 있는 언어.

-참고할 사이트-

<HTML>

<HEAD>
    <TITLE> DHT11 </TITLE> <!-- 사이트 제목 -->
</HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=UTF-8" > <!-- 한글이 깨질 것을 우려해 작성. -->

<BODY>
    <H1> ESP32 Web Server Reading sensor values </H1> <!-- 큰 제목, 자동으로 띄어쓰기 적용, <H> 태그 중에서 1은 제일 큰 글자의 제목을 작성하게 함. -->
    <h2> DHT11 </h2> <!-- 사용할 DHT 종류 작성. -->
    <h3> 신동우 제작 </h3> <!-- 제작자 이름 작성. -->

    <table width="190"> <!-- 표 생성. -->
        <tr> <!-- 첫번째 라인 -->
            <th> MEASUREMENT </th>
            <th> VALUE </th>
        </tr>

        <tr align="center"> <!-- 두번째 라인, align="center"는 <tr> 태그 안에 있는 모든 문장을 가운데로 정렬하게 해줌. -->
            <td> Temperature </td>
            <td> ---*C </td> <!-- 온도 값을 넣을 자리 -->
        </tr>

        <tr align="center"> <!-- 세번째 라인 -->
            <td> Humidity </td>
            <td> ---% </td> <!-- 습도 값을 넣을 자리 -->
        </tr>
    </table>
</BODY>

</HTML>

DHT11 - 개인 - Microsoft Edge 2023-06-02 오후 9_11_57

-작성 후 실행할 때의 사이트 모습-

해당 사이트를 아두이누 개발 환경으로 ESP32 서버에 적용하는 법

#include <Wire.h>
#include <WiFi.h>
#include "DHT.h"

#define DHTTYPE DHT11
int Pin = 13;
DHT dht(Pin, DHTTYPE);

const char* ssid = "(와이파이 ID)";
const char* password = "(와이파이 비밀번호)";

WiFiServer server(80); // ()안에는 포트번호 작성하는데, 포트 번호 80은 일반적으로 HTTP 통신을 위한 기본 포트 번호이기에, HTTP 서버는 클라이언트의 요청을 받기 위해 80번 포트를 사용. ("WiFiServer" 클래스는 ESP32의 Wi-Fi 서버 기능을 구현하기 위해 사용)

float temp;
float humid;

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

    Serial.print("Connecting to Wifi Network");
    Serial.println(ssid);
    WiFi.begin(ssid, password); // 와이파이 준비.

    while (WiFi.status() != WL_CONNECTED) { // 와이파이가 연결될 때까지 진행.
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("Successfully connected to WiFi.");
    Serial.print("IP address of ESP32 is : ");
    Serial.println(WiFi.localIP()); // 사용중인 와이파이가 지급하는 IP 출력.
    server.begin(); // WiFiServer 객체인 server를 사용할 수 있도록 초기화하는 역할. (서버를 시작하여 클라이언트의 연결을 받을 수 있도록 하며, 이후의 코드에서 server 객체를 사용하여 클라이언트와의 통신을 관리)
    Serial.println("Server started \n");
    Serial.print("http://"); Serial.println(WiFi.localIP());
}

void loop() {
    temp = dht.readTemperature();
    humid  = dht.readHumidity();
    WiFiClient client = server.available(); // 코드는 서버가 클라이언트의 연결을 받을 수 있는지 확인하고, 연결된 클라이언트와의 통신을 위한 WiFiClient 객체를 생성 (server.available() 함수는 현재 서버에 대기 중인 클라이언트 연결이 있는지 확인하고, 만약 대기 중인 클라이언트가 있으면, 새로운 WiFiClient 객체를 생성하고 해당 클라이언트와의 통신을 위해 이 객체를 사용)

    if(client) { // "client"라는 WiFiClient 객체가 사용 가능한 상태라면 if의 {}안의 코드가 작동하게 함.
        Serial.println("Web Client connected ");
        String request = client.readStringUntil('\r'); // 클라이언트의 요청을 읽는 역할을 함. 예를 들어,  "GET /index.html HTTP/1.1"과 같은 GET 요청을 보냈다면 해당 변수에는 "GET /index.html HTTP/1.1"라고 저장.

        client.println("http://192.168.35.107 OK");
        client.println("Content-type:text/html");
        client.println("Connection : close");
        client.println("");

        // HTML 웹 사이트 제작한 것
        client.println("<html>");
        client.println("<head> <title> DHT11 </title> </head>");

        client.println("<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html;CHARSET=UTF-8\" name=\"SmartDevice\" >"); // 서버에 나오는 한글이 깨져 나와서 사용함.

        client.println("<body>");
        client.println("<H1> ESP32 Web Server Reading sensor values </H1>");
        client.println("<h2> DHT11 </h2>");
        client.println("<h3> 신동우 제작 </h3>");

        client.println("<table width=\"190\">");
        client.println("<tr> <th> MEASUREMENT </th> <th> VALUE </th> </tr>");

        client.print("<tr align=\"center\"> <td> Temperature </td> <td>");
        client.print(temp);
        client.println("*C </td> </tr>");

        client.print("<tr align=\"center\"> <td> Humidity </td> <td>");
        client.print(humid);
        client.println("% </td> </tr>");

        client.println("</table>");
        client.println("</body>");
        client.println("</html>");
    }
}

DHT11 외 페이지 1개 - 개인 - Microsoft Edge 2023-06-02 오후 8_59_14

-해당 코드 작성 후 실행 결과-

(*주의 - 몇몇 코드를 설명하는 주석은 Chat GPT를 통해 찾은 것이므로 틀린 정보일 가능성도 있음.)

고급 웹페이지 만들기(이미지 추가, 자동 새로고침, 큰 제목 추가, 사이트 간략화)

<HTML>

    <HEAD>
        <TITLE> DHT11 </TITLE>

        <!-- css 사용 -->
        <style type="text/css">
            .title {text-align: center; font-size: 60px;}
            th, td {font-size: xx-large;}
            sup {font-size: 18px;}
        </style>
    </HEAD>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=UTF-8">
    <META HTTP-EQUIV="refresh" CONTENT="10"> <!-- 10초마다 사이트 새로고침 -->

    <BODY>
        <H1 class="title"> ESP32 DHT11 Web Server </H1> <!-- "title" 클래스 사용 -->

        <table width="400" height="200" align="center"> <!-- 표 생성. "align" 속성을 통해 사이트 가운데로 정렬 -->
            <tr>
                <th> MEASUREMENT </th>
                <th> VALUE </th>
            </tr>

            <tr align="center">
                <td> 
                    <sub><svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 320 512"><style>svg{fill:#ff2e2e}</style><path d="M160 64c-26.5 0-48 21.5-48 48V276.5c0 17.3-7.1 31.9-15.3 42.5C86.2 332.6 80 349.5 80 368c0 44.2 35.8 80 80 80s80-35.8 80-80c0-18.5-6.2-35.4-16.7-48.9c-8.2-10.6-15.3-25.2-15.3-42.5V112c0-26.5-21.5-48-48-48zM48 112C48 50.2 98.1 0 160 0s112 50.1 112 112V276.5c0 .1 .1 .3 .2 .6c.2 .6 .8 1.6 1.7 2.8c18.9 24.4 30.1 55 30.1 88.1c0 79.5-64.5 144-144 144S16 447.5 16 368c0-33.2 11.2-63.8 30.1-88.1c.9-1.2 1.5-2.2 1.7-2.8c.1-.3 .2-.5 .2-.6V112zM208 368c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-20.9 13.4-38.7 32-45.3V144c0-8.8 7.2-16 16-16s16 7.2 16 16V322.7c18.6 6.6 32 24.4 32 45.3z"/></svg></sub> <!-- 이미지 출력, "sub" 태그를 통해 이미지를 아래첨자로 출력 -->
                    Temperature
                </td>
                <td> ---<sup>*C</sup> </td> <!-- "sup" 태그를 통해 위첨자로 출력. -->
            </tr>

            <tr align="center">
                <td>
                    <sub><svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 384 512"><style>svg{fill:#3881ff}</style><path d="M192 512C86 512 0 426 0 320C0 228.8 130.2 57.7 166.6 11.7C172.6 4.2 181.5 0 191.1 0h1.8c9.6 0 18.5 4.2 24.5 11.7C253.8 57.7 384 228.8 384 320c0 106-86 192-192 192zM96 336c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.9 50.1 112 112 112c8.8 0 16-7.2 16-16s-7.2-16-16-16c-44.2 0-80-35.8-80-80z"/></svg></sub>
                    Humidity
                </td>
                <td> ---<sup>%</sup> </td>
            </tr>
        </table>
    </BODY>

</HTML>

DHT11 - 개인 - Microsoft Edge 2023-06-03 오후 2_38_11

-해당 코드 작성 후 실행한 결과-

고급 웹페이지를 아두이누 개발 환경에서 ESP32 서버에 적용시키기

#include <Wire.h>
#include <WiFi.h>
#include "DHT.h"

#define DHTTYPE DHT11
int Pin = 13;
DHT dht(Pin, DHTTYPE);

const char* ssid = "(와이파이 ID)";
const char* password = "(와이파이 비밀번호)";

WiFiServer server(80);

float temp;
float humid;

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

    Serial.print("Connecting to Wifi Network");
    Serial.println(ssid);
    WiFi.begin(ssid, password); // 와이파이 준비.

    while (WiFi.status() != WL_CONNECTED) { // 와이파이가 연결될 때까지 진행.
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("Successfully connected to WiFi.");
    Serial.print("IP address of ESP32 is : ");
    Serial.println(WiFi.localIP()); // 사용중인 와이파이가 지급하는 IP 출력.
    server.begin();
    Serial.println("Server started \n");
    Serial.print("http://"); Serial.println(WiFi.localIP());
}

void loop() {
    temp = dht.readTemperature();
    humid  = dht.readHumidity();
    WiFiClient client = server.available();

    if(client) {
        Serial.println("Web Client connected ");
        String request = client.readStringUntil('\r');

        client.println("http://192.168.35.107 OK");
        client.println("Content-type:text/html");
        client.println("Connection : close");
        client.println("");

        // HTML 웹 사이트 제작한 것
        client.println("<html>");

        client.println("<head>");
        client.println("<title> DHT11 </title>");
        client.println("<style type=\"text/css\">");
        client.println(".title {text-align: center; font-size: 60px;}"); // HTML의 CSS에서 클래스 작성 모습임.
        client.println("th, td {font-size: xx-large;}"); // HTML의 태그를 작성 시, 모든 해당 태그에 CSS 적용.
        client.println("sup {font-size: 18px;}");
        client.println("</style>");
        client.println("</head>");

        client.println("<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html;CHARSET=UTF-8\" name=\"SmartDevice\" >"); // 서버에 나오는 한글이 깨져 나와서 사용함.
        client.println("<META HTTP-EQUIV=\"refresh\" CONTENT=\"10\">");

        client.println("<body>");
        client.println("<H1 class=\"title\"> ESP32 DHT11 Web Server </H1>");

        client.println("<table width=\"400\" height=\"200\" align=\"center\">");
        client.println("<tr> <th> MEASUREMENT </th> <th> VALUE </th> </tr>");

        client.println("<tr align=\"center\"> <td>");
        client.println("<sub><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.5em\" viewBox=\"0 0 320 512\"><style>svg{fill:#ff2e2e}</style><path d=\"M160 64c-26.5 0-48 21.5-48 48V276.5c0 17.3-7.1 31.9-15.3 42.5C86.2 332.6 80 349.5 80 368c0 44.2 35.8 80 80 80s80-35.8 80-80c0-18.5-6.2-35.4-16.7-48.9c-8.2-10.6-15.3-25.2-15.3-42.5V112c0-26.5-21.5-48-48-48zM48 112C48 50.2 98.1 0 160 0s112 50.1 112 112V276.5c0 .1 .1 .3 .2 .6c.2 .6 .8 1.6 1.7 2.8c18.9 24.4 30.1 55 30.1 88.1c0 79.5-64.5 144-144 144S16 447.5 16 368c0-33.2 11.2-63.8 30.1-88.1c.9-1.2 1.5-2.2 1.7-2.8c.1-.3 .2-.5 .2-.6V112zM208 368c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-20.9 13.4-38.7 32-45.3V144c0-8.8 7.2-16 16-16s16 7.2 16 16V322.7c18.6 6.6 32 24.4 32 45.3z\"/></svg></sub>");
        client.println("Temperature </td> ");
        client.println("<td>");
        client.print(temp);
        client.println("<sup>*C</sup> </td> </tr>");

        client.println("<tr align=\"center\"> <td>");
        client.println("<sub><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.5em\" viewBox=\"0 0 384 512\"><style>svg{fill:#3881ff}</style><path d=\"M192 512C86 512 0 426 0 320C0 228.8 130.2 57.7 166.6 11.7C172.6 4.2 181.5 0 191.1 0h1.8c9.6 0 18.5 4.2 24.5 11.7C253.8 57.7 384 228.8 384 320c0 106-86 192-192 192zM96 336c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.9 50.1 112 112 112c8.8 0 16-7.2 16-16s-7.2-16-16-16c-44.2 0-80-35.8-80-80z\"/></svg></sub>");
        client.println("Humidity </td>");
        client.println("<td>");
        client.print(humid);
        client.println("<sup>%</sup> </td> </tr>");

        client.println("</table>");
        client.println("</body>");
        client.println("</html>");
    }
}

Editing 13 Make up the ESP32 Web Server · EnglishNo_ESP32 Wiki 외 페이지 3개 - 개인 - Microsoft Edge 2023-06-03 오후 2_37_08

-해당 코드 작성 후 실행한 모습-

DHT11 온습도 사이트에 이미지 추가하는 법

"img" 태그를 사용.
- HTML에서 라고 작성하고, src의 ""안에 같은 폴더 안에 있는 이미지 이름(파일형식까지 포함!)을 작성.
- 단점: 태그를 사용한 HTML를 ESP32 서버에 적용할려고 하면, 해당 이미지가 표시 안 됨.
"svg" 태그를 사용.
- 이 사이트에 들어가, 맘에 드는 이미지 클릭하고, 하단의 "SVG" 클릭해서 해당 코드를 복사해 HTML 파일에 붙어넣기.
- 단점1: 붙어넣기한 코드의 길이가 너무 길어 가독성에 안 좋음.
- 단점2: 이미지가 출력될 때, 이미지의 색이 원하는 색깔로 안 나올 수도 있음.

ESP32서버가 작동되는 원리

웹서버란?
- 웹 페이지를 유지 관리하고 가져오고 웹 클라이언트에 제공하는 역할을 하는 하드웨어와 소프트웨어의 조합.
- Hyper Text Transfer Protocol 또는 간단히 HTTP는 클라이언트와 서버 간의 통신을 담당하는 프로토콜로, 이러한 유형의 통신에서 웹 클라이언트는 HTTP를 사용하여 서버에 정보를 요청. (만약 요청한 페이지를 찾을 수 없으면 서버는 HTTP 404 오류로 응답.)
ESP32의 WiFi 작동 모드 종류
- 스테이션 모드(STA)
  - ESP32 모듈은 무선 라우터에 의해 설정된 기존 WiFi 네트워크에 연결됨.
  - ESP32 Wi-Fi 모듈은 라우터의 SSID, 비밀번호를 사용해 라우터의 WiFi 네트워크에 연결, 라우터는 ESP32에 로컬 IP 주소 할당.
- 엑세스 포인트 모드(AP)
  - 해당 모드로 전환 시, ESP32 모듈은 무선 라우터와 같은 자체 WiFi 네트워크 생성.
  - 휴대폰, 랩톱 및 기타 ESP32 모듈(STA 모드)와 같은 다른 스테이션이 해당 네트워크에 연결 가능.
  - ESP32는 유선 이더넷이 인터넷에 연결되어 있지 않기 때문에 이 AP모드를 소프트 AP 모드라고 하며, AP 모드에서 ESP32를 구성하는 동안 네트워크에 대한 SSID 및 암호를 설정해야 다른 장치가 해당 자격 증명을 사용하여 해당 네트워크에 연결 가능.
- 스테이션 + 소프트 AP 모드
  - 스테이션 모드와 소프트 AP 모드의 조합.
  - 여기서 ESP32는 스테이션 및 엑세스 포인트 역할을 함.

-참고할 사이트-

https://modbusrtu.tistory.com/98

LED 전등 불을 웹 서버(사이트)를 통해 점멸시키기

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

const char* ssid = "SK_WiFiGIGA1AA7";  // WiFi 네트워크 SSID
const char* password = "2006085191";  // WiFi 네트워크 비밀번호

const int ledPin = 21;  // LED가 연결된 핀 번호

WebServer server(80);  // 웹 서버 객체 생성

void setup() {
    pinMode(ledPin, OUTPUT);  // LED 핀을 출력으로 설정
    digitalWrite(ledPin, LOW);  // LED 초기 상태를 OFF로 설정

    Serial.begin(115200);  // 시리얼 통신 초기화

    WiFi.begin(ssid, password);  // WiFi 네트워크에 연결
    while (WiFi.status() != WL_CONNECTED) {  // WiFi 연결이 완료될 때까지 대기
        delay(1000);
        Serial.println("Connecting to WiFi...");
    }

    Serial.println("Connected to WiFi");
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());  // 할당된 IP 주소 출력

    // "/on"과 "/off"는 서버 경로
    server.on("/", handleRoot);  // 루트 경로에 대한 요청 핸들러 등록
    server.on("/on", handleOn);  // "/on" 경로에 대한 요청 핸들러 등록
    server.on("/off", handleOff);  // "/off" 경로에 대한 요청 핸들러 등록

    server.begin();  // 웹 서버 시작
    Serial.println("Server started");
}

void loop() {
    server.handleClient();  // 클라이언트 요청 처리.
    // 1. 클라이언트로부터 요청이 도착하면, 해당 요청을 읽고 파싱.
    // 2. 요청된 경로와 일치하는 등록된 경로 핸들러 탐색.
    // 3. 해당 경로 핸들러 함수를 실행하여 요청을 처리하고 응답을 생성.
    // 4. 생성된 응답을 클라이언트에게 전송.
    // 5. 클라이언트와의 연결을 닫거나 다음 요청을 처리하기 위해 대기.
}

void handleRoot() {
    String html = "<html><body>";
    html += "<h1>ESP32 LED Control</h1>";
    html += "<p>LED Status: ";

    if (digitalRead(ledPin) == HIGH) {
        html += "ON";
    }
    else {
        html += "OFF";
    }

    html += "</p>";
    html += "<p><a href='/on'>Turn On</a></p>"; // 해당 버튼을 클릭 시, 현재 주소에 "/on"이 추가되면서 LED 불이 켜짐.
    html += "<p><a href='/off'>Turn Off</a></p>"; // 해당 버튼을 클릭 시, 현재 주소에 "/off"이 추가되면서 LED 불이 꺼짐.
    html += "</body></html>";

    server.send(200, "text/html", html);  // 클라이언트에 응답 전송, "text/html"는 HTML 형식의 데이터를 가리킴.
}

void handleOn() { // /on 경로가 사용될 시, 스스로 작동.
    digitalWrite(ledPin, HIGH);  // LED를 켬
    // "text/plain"는 일반 텍스트 데이터
    server.send(200, "text/plain", "LED turned on");  // 클라이언트에 응답 전송
}

void handleOff() { // /off 경로가 사용될 시, 스스로 작동.
    digitalWrite(ledPin, LOW);  // LED를 끔
    server.send(200, "text/plain", "LED turned off");  // 클라이언트에 응답 전송, "200"는 OK 상태를 알리는 HTTP 응답.
}

192 168 35 104 외 페이지 3개 - 개인 - Microsoft Edge 2023-06-04 오후 2_42_42

-코드 작성 후 실행한 결과-

(*주의 - 이 코드의 주석들 역시 Chat GPT를 통해 찾은 것이므로 틀린 정보일 가능성도 있음.)

20230604_144313

-"Turn On" 버튼을 클릭 시의 모습-

20230604_144326

-"Turn Off" 버튼을 클릭 시의 모습-

이번 실습을 통해 알게 된 점

아두이누 개발 환경에서 HTML를 통해 만든 웹 페이지를 구현할 때 WiFiServer, WebServer, WiFiClient 객체의 함수들(println, print, send((응답 상태), "(데이터 형식)", "(보낼 데이터)"))을 사용한다는 것을 알게 됨.
태그의 "href" 속성에 "/(아무 문장)" 이런 식으로 작성하면, 현재 주소에서 "/(아무 문장)" 이런 식으로 작성된 것이 추가된다는 것을 알게 됨.
"WebServer"로 만든 객체의 "on()"함수는 해당 주소가 요청되면 또 다른 함수를 발생시킨다는 것을 알게 됨.

이번 실습에서 어려웠던 점과 해결 방식

DHT11로 측정한 온습도 값을 알려주는 서버를 만들 때, 태그로 만든 이미지가 표시가 안된 적이 있었지만, 태그를 사용해 이미지를 표시하니 HTML로 만든 웹 페이지를 서버에서 사용하고자 하니 정상적으로 이미지가 표시됨.
LED 등을 점멸시키는 서버를 만들려고 할때, 틀을 다 만들었지만, 막상 서버에 적용시키려고 하니깐 제대로 된 적이 없었다. 하지만 Chat GPT를 통해 질문을 하니 정상적으로 LED 등을 점멸시키는 서버가 만들어짐.
send(), on() 등의 함수의 사용처를 잘 몰랐으나, GPT한테 물어보니 그나마 알게 됨.