지금까지 테스트 한 웹서버 예제는 출력 관련 예제 였는데 이번에는 웹페이지 측에서 입력을 받을 수 있는 테스트를 해보자
기존에 실시간 웹서버를 구현 하기 위해 AJAX를 사용 했지만 비동기 방식 웹서버를 이용하면 이벤트 방식으로 쉽게 구현이 가능하다.
우선 웹서버 초기화 시에 사용할 이벤트를 등록 한다.
AsyncEventSource events("/events");
void InitWebServer()
{
server.addHandler(&events);
server.on("/", onRootRequest);
server.serveStatic("/", SPIFFS, "/");
server.begin();
}
웹페이지에 데이터를 보내기 위해 ESP32 보드에서는 event.send 함수를 사용하면 쉽게 구현 가능하다.
events.send(String(analogRead(adcPin)).c_str(),"update", millis());
ESP32 이벤트 방식 실시간 웹서버 구현 예제
// Import required libraries
#ifdef ESP32 // ESP32 libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#else // ESP8266 libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
// SSID & Password
const char *ssid = " ";
const char *password = " ";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
AsyncEventSource events("/events");
void InitSPIFFS() {
if (!SPIFFS.begin()) {
Serial.println("Cannot mount SPIFFS volume...");
while (1) {
}
}
}
String processor(const String& var){
//Serial.println(var);
return var;
}
void onRootRequest(AsyncWebServerRequest *request) {
request->send(SPIFFS, "/index.html", "text/html", false, processor);
}
void InitWebServer()
{
server.addHandler(&events);
server.on("/", onRootRequest);
server.serveStatic("/", SPIFFS, "/");
server.begin();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
InitSPIFFS();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
InitWebServer();
}
static const unsigned long EVENT_INTERVAL_MS = 30;
void ProcessUpdate()
{
static uint32_t prev_ms = millis();
if (millis() > prev_ms + EVENT_INTERVAL_MS)
{
//이벤트 발송
events.send(String(analogRead(adcPin)).c_str(),"update", millis());
prev_ms = millis();
}
}
void loop()
{
ProcessUpdate(&events);
}
ESP32에서 이벤트 등록하고 보내면 웹페이지 쪽에서는 Listener 를 등록해서 이벤트를 받아 올 수 있다.
받아온 이벤트 데이터는 웹페이지에 적절히 출력 해 주면 된다.
<!DOCTYPE HTML><html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<script>
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('update', function(e) {
var ad_value = e.data;
document.getElementById("ad_val").innerHTML = ad_value;
}, false);
}
</script>
</head>
<body>
<center>
<h1>ESP32 RealTime Analg Input Examples</h1>
<div>ADC = <span id="ad_val"></span></div><p></p>
</body>
</html>
가장 간단히 ESP32의 ADC값을 실시간으로 전송하고 웹페이지에 이값을 출력 하도록 해 보았다. 거의 실시간으로 출력 되는것을 확인 할 수 있다.
https://youtube.com/shorts/ILP4qp-3kS4?feature=share
좀더 복잡하게 받아온 ADC값을 그래프로 출력 하도록 웹페이지를 수정해 보았다.
반응형
