ESP32 WebChat 예제 대화형 채팅 인터페이스 튜토리얼
개요
WebChat 예제는 웹 브라우저와 Arduino 간의 대화형 채팅 인터페이스를 만드는 방법을 보여줍니다. ESP32용으로 설계된 교육 플랫폼은 향상된 IoT 기능과 내장 센서와의 원활한 통합을 제공합니다. ESP32는 메시지에 지능적으로 응답하고 채팅 명령에 따라 하드웨어를 제어할 수 있습니다.
특징
- 실시간 채팅: WebSocket을 통한 실시간 메시징
- 지능형 응답: ESP32가 맥락에 맞는 응답을 제공합니다
- LED 제어: 채팅 명령으로 내장 LED를 제어합니다
- 사용자 인식: ESP32가 사용자의 이름을 기억합니다
- 대화 기록: 대화 기록 보기
- 반응형 디자인: 데스크탑과 모바일에서 작동
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지시를 한 단계씩 따라가세요:
- 만약 ESP32를 처음 사용하는 경우, ESP32 - 소프트웨어 설치을 참조하세요.
- USB 케이블을 사용하여 ESP32 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택합니다.
- Arduino IDE 왼쪽 바의 Libraries 아이콘으로 이동합니다.
- 검색 "DIYables ESP32 WebApps"를 수행한 뒤, DIYables에서 제공하는 DIYables ESP32 WebApps 라이브러리를 찾습니다.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하세요.
- Arduino IDE에서, File 예제 DIYables ESP32 WebApps WebChat 예제로 이동하거나, 위의 코드를 복사하여 Arduino IDE의 에디터에 붙여넣으세요.
/*
* DIYables WebApp Library - WebChat Example
*
* This example demonstrates the WebChat feature:
* - Interactive chat interface
* - Intelligent ESP32 responses
* - Built-in LED control via chat commands
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/chat
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebChatPage chatPage;
// Chat variables
String userName = "";
int chatCount = 0;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - WebChat Example");
// Add only home and webchat pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&chatPage);
// Optional: Add 404 page for better user experience (local object)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Initialize LED for chat commands
pinMode(LED_BUILTIN, OUTPUT);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up chat callback
chatPage.onChatMessage([](const String& message) {
chatCount++;
Serial.println("Chat message #" + String(chatCount) + ": " + message);
String response = "";
String lowerMessage = message;
lowerMessage.toLowerCase();
// Process chat commands
if (lowerMessage.indexOf("hello") >= 0 || lowerMessage.indexOf("hi") >= 0) {
response = "Hello! I'm your ESP32 assistant. Try saying 'led on' or 'led off' to control the LED!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led on") >= 0 || lowerMessage.indexOf("light on") >= 0) {
digitalWrite(LED_BUILTIN, HIGH);
response = "LED is now ON! ✨";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led off") >= 0 || lowerMessage.indexOf("light off") >= 0) {
digitalWrite(LED_BUILTIN, LOW);
response = "LED is now OFF! 💡";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("status") >= 0) {
String ledStatus = digitalRead(LED_BUILTIN) ? "ON" : "OFF";
response = "Arduino Status: LED is " + ledStatus + ", Uptime: " + String(millis() / 1000) + " seconds";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("help") >= 0) {
response = "Available commands: 'led on', 'led off', 'status', 'help'. Just chat with me!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("time") >= 0) {
response = "Arduino has been running for " + String(millis() / 1000) + " seconds.";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("name") >= 0) {
response = "I'm your ESP32! What's your name?";
chatPage.sendToChat(response);
return;
}
// General responses
String responses[] = {
"That's interesting! Tell me more.",
"I understand! As an Arduino, I love processing your messages.",
"Cool! I'm here and ready to help.",
"Thanks for chatting with me! Try 'led on' to see something happen.",
"I'm just an Arduino, but I enjoy our conversation!"
};
response = responses[chatCount % 5];
chatPage.sendToChat(response);
});
// Send welcome message
chatPage.sendToChat("Arduino Chat Bot is online! 🤖");
chatPage.sendToChat("Say 'hello' or 'help' to get started!");
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Add your main application code here
delay(10);
}
- 코드에서 와이파이 자격 증명을 구성하려면 다음 줄들을 업데이트하십시오:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- ESP32에 코드를 업로드하려면 Arduino IDE에서 Upload 버튼을 클릭합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같이 보입니다.
COM6
DIYables WebApp - WebChat Example
INFO: Added app /
INFO: Added app /chat
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
💬 WebChat: http://192.168.0.2/chat
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무 것도 보이지 않으면 ESP32 보드를 재부팅하십시오.
- 표시된 IP 주소를 확인한 뒤, 이 주소를 스마트폰이나 PC의 웹 브라우저 주소창에 입력하십시오.
- 예: http://192.168.0.2
- 다음 이미지와 같은 홈 페이지가 표시됩니다.
- 채팅 링크를 클릭하면 아래와 같은 웹 채팅 앱의 UI를 볼 수 있습니다:
- 또는 IP 주소 뒤에 /chat를 붙여 페이지에 직접 접속할 수 있습니다. 예를 들어: http://192.168.0.2/chat
- 아두이노와 채팅을 시작하세요! 프롬프트가 나타나면 이름을 입력하고 "led on", "hello", 또는 "help"와 같은 명령어를 사용해 아두이노와 상호작용해 보세요.
사용 방법
대화를 시작하기
- 브라우저에서 채팅 인터페이스를 여세요
- 프롬프트가 표시되면 이름을 입력하세요
- 아두이노와 채팅을 시작하세요!
채팅 명령어
ESP32는 이러한 특별한 명령을 인식합니다:
LED 제어
- "led on" 또는 "turn on led" → 내장 LED를 켭니다
- "led off" 또는 "turn off led" → 내장 LED를 끕니다
- "blink" 또는 "blink led" → LED를 깜박이게 합니다
정보 명령어
- "안녕" 또는 "하이" → 친근한 인사
- "도움말" → 사용 가능한 명령어 표시
- "시간" → ESP32 가동 시간 표시
- "상태" → 시스템 상태 표시
질문들
- "잘 지내고 계신가요?" → ESP32가 자신의 상태를 공유합니다
- "무슨 일을 할 수 있나요?" → 가능한 기능들을 나열합니다
- "이름이 무엇입니까?" → ESP32가 자신을 소개합니다
예시 대화
You: Hello
ESP32: Hi there! I'm your assistant. What's your name?
You: My name is John
ESP32: Nice to meet you, John! I'm ready to help.
You: led on
ESP32: LED turned ON for you, John! 💡
You: what can you do?
ESP32: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands!
You: help
ESP32: Available commands:
* 'led on/off' - Control LED
* 'blink' - Blink LED
* 'status' - Show system info
* 'time' - Show uptime
창의적 커스터마이징 - 당신의 대화형 어시스턴트를 구축하기
이 기본 채팅 예제를 멋진 것으로 바꿔보세요! 모듈식 설계로 기능을 조정하고 확장하여 자신만의 독특한 대화형 ESP32 어시스턴트를 만들 수 있습니다.
코드 구조
주요 구성 요소
- 웹앱 서버: HTTP 및 WebSocket 연결 관리
- 채팅 페이지: 웹 인터페이스 제공
- 메시지 핸들러: 수신된 채팅 메시지 처리
- 응답 생성기: 지능형 응답 생성
주요 기능
// Handle incoming chat messages
void handleChatMessage(String message, String clientId) {
// Process message and generate response
}
// Send message to web interface
void sendChatResponse(String response, String clientId) {
// Send response via WebSocket
}
사용자 정의 명령 추가
새 채팅 명령어를 추가하려면 handleChatMessage 함수를 수정하세요:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
맞춤 설정 옵션
ESP32 성격 수정
Arduino의 성격을 바꾸려면 응답 메시지를 편집하십시오:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
하드웨어 제어 추가
다른 부품으로 LED 제어를 확장:
// Control servo motor
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees!";
}
// Read sensor data
if (message.indexOf("temperature") >= 0) {
float temp = getTemperature();
response = "Current temperature: " + String(temp) + "°C";
}
웹 인터페이스 테마 변경
채팅 인터페이스는 라이브러리 파일의 CSS를 수정하여 사용자화할 수 있습니다:
- 색상: 그라데이션 배경 편집
- 글꼴: 글꼴 계열 변경
- 레이아웃: 간격 및 크기 조정
문제 해결
일반적인 문제
1. ESP32가 메시지에 응답하지 않음
- 시리얼 모니터에서 오류 메시지를 확인하기
- 웹소켓 연결 상태를 확인하기
- 브라우저 페이지를 새로고침하기
- 와이파이 연결 실패
- SSID와 비밀번호를 다시 확인하세요
- 2.4GHz 네트워크를 사용하도록 하세요(5GHz는 제외)
- 신호 강도를 확인하세요
- 채팅 페이지에 접속할 수 없습니다
- IP 주소가 올바른지 확인
- ESP32가 아직 와이파이에 연결되어 있는지 확인
- 먼저 홈페이지에 접속해 보세요: http://[IP]/
4. LED가 명령에 응답하지 않음
- 배선 점검(기본적으로 내장 LED가 작동해야 합니다)
- 명령어의 철자가 정확한지 확인
- 시리얼 모니터에서 디버그 메시지를 확인하십시오
디버깅 팁
setup()에 이 줄을 추가하여 디버그 모드를 활성화합니다:
Serial.println("Debug mode enabled");
확인하려면 시리얼 출력을 모니터링하십시오:
- 수신 메시지
- 명령 구문 분석
- 응답 생성
- 하드웨어 동작
고급 기능
다중 클라이언트 지원
채팅은 여러 사용자를 동시에 지원합니다:
- 각 사용자는 고유한 세션을 가지고 있습니다
- ESP32는 각 사용자의 이름을 기억합니다
- 모든 사용자에게 메시지를 방송합니다
메시지 지속성
메시지 로깅을 EEPROM에 추가:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
센서와의 통합
센서를 연결하고 채팅을 통해 접근 가능하도록 만듭니다:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
다음 단계
채팅 예제를 숙달한 후, 시도해 보세요:
- WebMonitor - 디버깅 및 개발을 위한
- DigitalPins - 여러 출력을 제어하기 위한
- Joystick - 방향 제어를 위한
- MultipleWebApps - 모든 기능을 결합하기 위한
지원
추가 도움이 필요하신 경우:
- API 참조 문서를 확인하세요
- DIYables 튜토리얼을 방문하세요: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32 커뮤니티 포럼