이 ESP32 기사에서는 ESP32 보드를 액세스 포인트와 연결하고 웹 서버를 설계하는 방법을 살펴보겠습니다. 해당 웹 서버를 사용하여 릴레이 모듈의 도움으로 LED 및 AC 기기를 제어합니다.
내용물:
- ESP32 웹 서버
- Arduino IDE를 사용하여 ESP32 웹 서버를 만드는 방법
- ESP32 웹 서버 코드
- ESP32 웹 서버 IP 주소
- ESP32 웹 서버를 사용하여 LED 제어
- 데스크탑 인터페이스
- 모바일 인터페이스
- ESP32 웹 서버를 사용하여 AC 기기 제어
- 결론
1. ESP32 웹 서버
웹 서버에는 웹 페이지를 처리하고 웹 클라이언트로 보낼 수 있는 특수 프로그램이 있습니다. 웹사이트를 열려면 웹 브라우저를 사용합니다. 이 웹 브라우저는 웹 클라이언트라고도 합니다. 보고 싶은 웹사이트는 웹서버라는 다른 컴퓨터에 저장되어 있습니다.
웹 서버와 웹 클라이언트는 서로 통신하기 위해 HTTP라는 공통 언어를 사용합니다. 작동 방식은 다음과 같습니다. 웹 클라이언트는 HTTP 요청을 사용하여 웹 서버에 웹 페이지를 요청합니다. 웹 서버는 요청된 웹 페이지를 다시 보냅니다. 웹페이지가 없으면 오류 메시지가 표시됩니다.
ESP32에서는 ESP32가 네트워크를 통해 다른 장치와 연결할 수 있을 뿐만 아니라 웹 서버를 생성하고 수신된 요청에 응답할 수 있으므로 웹 서버를 설계할 수 있습니다. ESP32는 세 가지 다른 모드로 작동할 수 있기 때문에 이 모든 것이 가능합니다.
- 역
- 액세스 포인트
- 스테이션과 액세스 포인트 모두
이 기사를 확인하면 ESP32의 세 가지 모드 모두에 대한 통찰력을 얻을 수 있습니다.
Arduino IDE를 사용하여 ESP32 액세스 포인트(AP)를 설정하는 방법
2. Arduino IDE를 사용하여 ESP32 웹 서버를 만드는 방법
Arduino IDE를 사용하여 ESP32 웹 서버를 생성하려면 ESP32를 액세스 포인트에 연결하고 웹 서버에 대한 IP 주소를 생성할 수 있습니다. HTML과 CSS를 적용하여 서버 인터페이스를 디자인할 수 있습니다.
ESP32 액세스 포인트의 작동을 이해하고 나면 Arduino IDE 코드를 사용하여 ESP32 웹 서버를 쉽게 설계할 수 있습니다. ESP32 웹 서버 코드는 ESP32 Wi-Fi 라이브러리를 사용합니다. 이 라이브러리에는 ESP32를 액세스 포인트에 연결하는 데 필요한 모든 중요한 기능이 포함되어 있으므로 작업이 더 쉬워집니다.
Arduino IDE 코드를 사용하여 ESP32 웹 서버를 설계해 보겠습니다.
3. ESP32 웹 서버 코드
ESP32 웹 서버 코드에는 액세스 포인트와의 ESP32 연결 및 서버의 IP 주소 가져오기가 포함됩니다. IP 주소를 얻은 후에는 ESP32 웹 서버에 액세스하려면 동일한 네트워크에 연결해야 합니다. 여기에서 LED 및 기타 장치를 제어할 수 있습니다.
Arduino IDE를 열고 ESP32 보드를 연결합니다.
Arduino IDE에 ESP32 보드 설치
ESP32 보드가 연결되면 다음 코드를 보드에 업로드하세요.
/****************Linuxhint.com
LED를 제어하는 ESP32 웹 서버
**************/
// 라이브러리 가져오기 ~을 위한 Wi-Fi 연결
#include
// Wi-Fi 이름과 비밀번호를 입력하세요.
const 문자 * ssid = 'ESP32' ;
const 문자 * 비밀번호 = '123456789' ;
// 포트 번호를 선택하세요 ~을 위한 웹 서버
WiFi서버 서버 ( 80 ) ;
// 웹 요청을 저장할 변수 만들기
문자열 헤더;
// 출력 상태를 저장하는 변수 만들기
문자열 출력26상태 = '끄다' ;
문자열 출력27상태 = '끄다' ;
// 변수에 출력 핀 할당
const int 출력26 = 26 ;
const int 출력27 = 27 ;
부호 없는 긴 currentTime = 밀리초 ( ) ;
부호 없는 긴 이전 시간 = 0 ;
// 다음을 선택하세요. 시간 한계 ~을 위한 웹 요청 ~에 밀리초
const 긴 timeoutTime = 2000 ;
보이드 설정 ( ) {
직렬.시작 ( 115200 ) ;
// 출력 핀 설정 ~처럼 출력
pinMode ( 출력26, 출력 ) ;
pinMode ( 출력27, 출력 ) ;
// 출력 끄기
디지털 쓰기 ( 출력26, 낮음 ) ;
디지털 쓰기 ( 출력27, 낮음 ) ;
// Wi-Fi 네트워크에 연결
직렬.인쇄 ( '연결 중' ) ;
Serial.println ( SSID ) ;
WiFi.시작 ( ssid, 비밀번호 ) ;
// 기다리다 ~까지 연결이 설정되었습니다
~하는 동안 ( WiFi.상태 ( ) ! = WL_연결됨 ) {
지연 ( 500 ) ;
직렬.인쇄 ( '.' ) ;
}
Serial.println ( '' ) ;
Serial.println ( '와이파이가 연결되었습니다.' ) ;
Serial.println ( 'IP 주소: ' ) ;
Serial.println ( WiFi.localIP ( ) ) ;
서버.시작 ( ) ;
}
무효 루프 ( ) {
WiFiClient 클라이언트 = server.available ( ) ; // 확인하다 ~을 위한 신규 고객
만약에 ( 고객 ) { // 클라이언트가 연결되어 있는 경우,
현재시간 = 밀리초 ( ) ;
이전시간 = 현재시간;
Serial.println ( '새 클라이언트.' ) ; // 직렬 포트에 알림
문자열 currentLine = '' ; // 클라이언트 데이터를 저장할 문자열 만들기
~하는 동안 ( 클라이언트.연결됨 ( ) && 현재시간 - 이전시간 = 0 ) {
Serial.println ( 'GPIO 26 켜짐' ) ;
출력26상태 = '에' ;
디지털 쓰기 ( 출력26, 높음 ) ;
} 또 다른 만약에 ( header.indexOf ( 'GET /26/오프' ) > = 0 ) {
Serial.println ( 'GPIO 26 꺼짐' ) ;
출력26상태 = '끄다' ;
디지털 쓰기 ( 출력26, 낮음 ) ;
} 또 다른 만약에 ( header.indexOf ( 'GET /27/on' ) > = 0 ) {
Serial.println ( 'GPIO 27 켜짐' ) ;
출력27상태 = '에' ;
디지털 쓰기 ( 출력27, 높음 ) ;
} 또 다른 만약에 ( header.indexOf ( 'GET /27/오프' ) > = 0 ) {
Serial.println ( 'GPIO 27 꺼짐' ) ;
출력27상태 = '끄다' ;
디지털 쓰기 ( 출력27, 낮음 ) ;
}
클라이언트.println ( '' ) ;
클라이언트.println ( '<헤드><메타 이름=' 뷰포트 ' 내용=' 너비 =장치 너비, 초기 규모= 1 '>' ) ;
클라이언트.println ( '<링크 상대=' 상 ' href=' 데이터:, '>' ) ;
// 버튼 스타일을 지정하는 CSS
클라이언트.println ( '<스타일>html { 글꼴 계열: Helvetica; 디스플레이: 인라인 블록; 여백: 0px 자동; 텍스트 정렬: 센터;}' ) ;
클라이언트.println ( 'body { 배경: 선형 그라데이션(오른쪽으로, #0f0c29, #302b63, #24243e); }' ) ;
// 네온 효과가 있는 네온 블루 버튼
클라이언트.println ( '.button { 배경색: #08f; 테두리: 없음; 색상: 흰색; 패딩: 16px 40px;' ) ;
클라이언트.println ( '텍스트 장식: 없음; 글꼴 크기: 30px; 여백: 2px; 커서: 포인터; 상자 그림자: 0 0 20px #08f;}' ) ;
// 글로우 효과가 있는 어두운 회색 버튼
클라이언트.println ( '.button2 {배경색: #333; 상자 그림자: 0 0 20px #333;}' ) ;
// 전환 효과 ~을 위한 버튼
클라이언트.println ( '.button, .button2 {전환: 모든 0.3초 Ease-in-out;}' ) ;
// 둥근 버튼
클라이언트.println ( '.button, .button2 {테두리 반경: 50%;}' ) ;
// 웹페이지 제목
클라이언트.println ( '<본체>
Linuxhint ESP32 웹 서버
' ) ;// 웹페이지 제목
클라이언트.println ( '
ESP32 웹 서버
');// 상태와 버튼 표시 ~을 위한 GPIO 26
클라이언트.println ( '
GPIO 26 - 상태 '
+ 출력26상태 + '' ) ;// ON 버튼 표시 만약에 상태는 꺼짐
만약에 ( 출력26상태 == '끄다' ) {
클라이언트.println ( ' 단추 '>켜기 ' ) ;
} 또 다른 { // OFF 버튼 표시 만약에 상태는 ON이다
클라이언트.println ( ' 버튼 버튼2 '>끄기 ' ) ;
}
// 상태와 버튼 표시 ~을 위한 GPIO 27
클라이언트.println ( '
GPIO 27 - 상태 '
+ 출력27상태 + '' ) ;// ON 버튼 표시 만약에 상태는 꺼짐
만약에 ( 출력27상태 == '끄다' ) {
클라이언트.println ( ' 단추 '>켜기 ' ) ;
} 또 다른 { // OFF 버튼 표시 만약에 상태는 ON이다
클라이언트.println ( ' 버튼 버튼2 '>끄기 ' ) ;
}
클라이언트.println ( '