ESP32 아두이노: WebSerial

ESP32

ESP32 아두이노: WebSerial

기하 2021. 8. 14. 23:34

소개

이 튜토리얼에서는 WebSerial 라이브러리에 의해 구현된

ESP32용 웹반 직렬 모니터를 사용하는 방법을 배울 것입니다.

마이크로컨트롤러로부터 메시지를 볼 수 있다는 것은 디버깅에 매우 유용합니다.

Arduino 프레임워크에서 이를 달성하는 가장 일반적인 방법 중 하나는

일반적으로 개발 보드의 직렬-USB 변환기 칩에 연결되는

마이크로컨트롤러의 UART를 사용하는 것입니다.

그런 다음 장치와 컴퓨터 사이에 USB 케이블을 연결하기만 하면

Arduino IDE 직렬 모니터에서 메시지를 볼 수 있습니다.

그럼에도 불구하고 WiFi 기반 응용 프로그램을 테스트하는 경우

장치가 더 이상 컴퓨터에 연결되어 있지 않지만

여전히 디버깅 메시지를 받고 싶은 시나리오로 이동할 수 있습니다.

따라서 ESP32와 같은 마이크로 컨트롤러에서

WiFi 기능을 활용하여 직렬 통신을 설정할 수 있습니다.

이 게시물에서 분석할 라이브러리는

ESP32와의 웹기반 직렬 연결을 설정할 수 있는 매우 간단한 UI를 제공합니다.

ESP32와 메시지를 주고받을 수 있습니다.

웹 UI는 Vue.js 프레임워크로 구현됩니다 .

UI는 ESP32에서 제공하므로 추가 응용 프로그램이 필요하지 않으며

동일한 WiFi 네트워크에 연결된 웹 브라우저가 있는 컴퓨터만 있으면 됩니다.

UI를 제공 하기 위해서,WebSerial 라이브러리는 ESPAsyncWebServer 라이브러리에 의존합니다.

ESPAsyncWebServer 라이브러리 및 설치 방법 에 대한 소개 자습서는 여기 를 참조하세요.

UI(웹 브라우저에서 렌더링됨)와 ESP32 간의 실제 통신은

ESPAsyncWebServer 프레임워크에 의해

후드 아래에서 관리되는 웹 소켓을 사용하여 수행됩니다 .

이 자습서에서는 ESP32의 WebSerial 라이브러리 사용법을 다루지만 ESP8266도 지원됩니다[1].

WebSerial 시작하기

다음 라이브러리를 포함하면서 코드를 시작합니다.

WiFi.h : ESP32를 WiFi 네트워크에 연결하는 데 필요합니다.
ESPAsyncWebServer.h : WebSerial 라이브러리에서 후드 아래에서 사용하는
AsyncWebServer 인스턴스 를 만드는 데 필요합니다 .
WebSerial.h : 모든 WebSerial 관련 기능에 필요합니다.
WebSerialClass 클래스의 객체인 WebSerial 이라는 변수를 제공 합니다.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

그런 다음 WiFi 자격 증명을 보유할 두 가지 변수,

즉 네트워크 이름(SSID)과 네트워크 암호를 정의합니다.

네트워크의 실제 자격 증명으로 대체해야 하는 자리 표시자 문자열을 사용하고 있습니다.

const char* ssid = "yourNetworkName";
const char* password =  "yourNetworkPassword";

또한 ESP32 에서 HTTP 웹 서버를 설정하는 데 사용되는

AsyncWebServer 클래스의 개체를 인스턴스화합니다 .

입력으로 이 클래스의 생성자는 서버가 들어오는 요청을 수신할 포트를 받습니다.

기본 HTTP 포트에 해당하는 포트 80을 사용합니다.

AsyncWebServer server(80);

Arduino 설정으로 이동하여 유선 직렬 연결을 열어 시작합니다.

이것은 WebSerial 기능에 필요한 것이 아니라

WiFi 네트워크에서 ESP32에 할당된 IP 주소를 인쇄하는 데 필요 합니다.

이 IP 주소는 ESP32 서버에 연결하는 데 필요합니다.

Serial.begin(115200);

그런 다음 ESP32를 이전에 정의한 변수를 사용하여 WiFi 네트워크에 연결합니다

연결이 완료되면 직렬 포트에 IP 주소를 인쇄합니다.

WiFi.begin(ssid, password);     
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.println("Could not initialize WiFi");
        return;
}     
Serial.println(WiFi.localIP());

이제 begin 메소드를 호출 하여 WebSerial 인스턴스 를 초기화할 것 입니다.

입력으로 이 메서드는 AsyncWebServer 개체 의 주소를 받습니다 .

이 메서드는 브라우저에서 WebSerial UI에 액세스하기 위해

HTTP 서버 endpoint의 이름을 정의하는 두 번째 선택적 매개변수도 수신합니다.

지정하지 않으면 기본값은 " /webserial "입니다. 기본값으로 유지하겠습니다.

내부에서 begin 메소드는 WebSerial UI로 웹 페이지(HTML, CSS 및 JavaScript)를

제공하는 책임이 있는 서버에 새 경로를 등록하는 작업을 처리합니다.

또한 UI에서 ESP32와 통신하는 데 사용하는 Websocket 끝점(endpoint)도 설정합니다.

WebSerial.begin(&server);

setup 함수을 완료 하기 위해 서버 개체 의 시작 메서드를 호출하여 비동기 서버를 시작 합니다.

이 호출 후에만 서버는 들어오는 요청을 수신하기 시작합니다.

server.begin();

온전한 setup() 함수는 아래와 같습니다.

void setup() {   
    Serial.begin(115200);
    WiFi.begin(ssid, password);     
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.println("Could not initialize WiFi");
        return;
    }     
    Serial.println(WiFi.localIP());     
    WebSerial.begin(&server);     
    server.begin();
}

이제 Arduino 메인 루프를 확인할 것입니다.

내부에서 Async 웹 서버 솔루션을 사용하고 있으므로

클라이언트 연결을 처리하기 위해 주기적으로 함수를 호출할 필요가 없습니다.

대신 Arduino 루프를 사용하여

WebSerial 인터페이스에 콘텐츠를 주기적으로 인쇄하고 웹 브라우저 UI에 표시해야 합니다.

WebSerial 콘솔에 내용을 인쇄하는 것은 Print 또는 Println 메서드를 호출하고

인쇄 하려는 내용을 입력으로 전달하는 것만 큼 쉽습니다 .

이는 유선 직렬 연결에 대해 수행하는 것과 거의 같습니다.

여기 에서 이러한 메서드의 오버로드된 정의를 참조할 수 있습니다 .

매우 간단한 "Hello World" 메시지를 인쇄할 것입니다.

WebSerial.println("Hello World");

전체 루프는 아래에서 볼 수 있습니다.

루프의 각 반복 사이에 1초의 지연을 추가했는데,

이는 웹 콘솔에서 인쇄되는 메시지의 케이던스(cadence)와 일치해야 합니다.

void loop() {
    WebSerial.println("Hello World");
    delay(1000);
}

최종 코드는 아래 스니펫에서 볼 수 있습니다.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

const char* ssid = "yourNetworkName";
const char* password =  "yourNetworkPassword";
AsyncWebServer server(80);

void setup() {   
    Serial.begin(115200);
    WiFi.begin(ssid, password);     
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.println("Could not initialize WiFi");
        return;
    }     
    Serial.println(WiFi.localIP());     
    WebSerial.begin(&server);     
    server.begin();
}
void loop() {
    WebSerial.println("Hello World");
    delay(1000);
}

종단 간 시스템을 테스트하려면 먼저 Arduino IDE를 사용하여

이전 코드를 컴파일하고 장치에 업로드하십시오.

절차가 완료되면 IDE 직렬 모니터를 열고 WiFi 연결이 설정될 때까지 기다립니다.

그런 다음 그림 1과 같이 ESP32의 IP 주소가 직렬 모니터에 인쇄되는 것을 볼 수 있습니다.

서버에 도달하는 데 필요하므로 복사하십시오.

그림 1 - WiFi 네트워크에서 ESP32의 로컬 IP 주소.

IP 주소를 복사한 후 원하는 웹 브라우저를 엽니다. 그런 다음 다음 URL에 액세스합니다.

http://YourESPIp/webserial

그러면 그림 2와 같은 UI가 표시됩니다.

Arduino 코드에서 정의한 것처럼 "Hello World" 메시지가 1초마다 인쇄되어야 합니다.

그림 2 - "Hello World" 메시지를 보여주는 WebSerial UI.

"SEND" 버튼은 ESP32로 데이터를 보내는 데 사용됩니다.

그럼에도 불구하고 ESP32 측에서 수신된 메시지를 처리하지 않기 때문에

이 첫 번째 예에는 영향을 미치지 않습니다.

우리는 다음 섹션에서 그것을 하는 방법을 배울 것입니다.

예제를 마치기 위해 그림 3과 같이 브라우저 검사기를 열어

웹 소켓을 통해 메시지가 수신되고 있는지 확인할 수 있습니다.

그림 3 - WebSerial에서 사용하는 Websocket 요청 검사.

그림 4(Google Chrome에서 테스트)와 같이 해당 요청을 추가로 검사하고

수신 중인 메시지를 확인할 수 있습니다.

그림 4 - Websocket을 통해 수신된 메시지.

수신 데이터 처리

이 섹션에서는 웹 콘솔에서 보낸 데이터를 처리하는 방법을 확인합니다.

들어오는 메시지 처리를 제외하고 대부분의 코드는 유사합니다.

그래서 우리는 콜백 함수를 등록하기 위해

코드 줄을 추가할 설정 함수에 주의를 집중할 것입니다.

이것은 웹 콘솔에서 ESP32로 데이터를 보낼 때마다 호출됩니다.

콜백을 등록하려면 WebSerial객체에서 msgCallback 메서드를 호출하고

함수를 입력으로 전달하기만 하면 됩니다. 아래에서 구현을 확인하지만 onMessage 라고 합니다 .

WebSerial.msgCallback(onMessage);

콜백 함수는 미리 정의된 서명을 따라야 합니다. void를 반환하고 다음 매개변수를 입력으로 받습니다.

수신된 데이터 버퍼에 대한 포인터.
수신된 데이터의 길이입니다.

void onMessage(uint8_t *data, size_t len){
   // Implementation of the callback
}

구현은 매우 간단합니다. 수신된 데이터의 바이트를 반복하여 직렬 포트에 인쇄합니다.

for(int i=0; i < len; i++){
    Serial.print((char)data[i]);
}

아래에서 전체 콜백함수를 확인할 수 있습니다.

void onMessage(uint8_t *data, size_t len){
  Serial.print("Message received: ");
  for(int i=0; i < len; i++){
      Serial.print((char)data[i]);
  }
  Serial.println();
}

전체 코드는 아래에 나와 있습니다.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

const char* ssid = "yourNetworkName;
const char* password =  "yourNetworkPass";
AsyncWebServer server(80);

void onMessage(uint8_t *data, size_t len){
  Serial.print("Message received: ");
  for(int i=0; i < len; i++){
      Serial.print((char)data[i]);
  }
  Serial.println();
}

void setup() {   
    Serial.begin(115200);
    WiFi.begin(ssid, password);     
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.println("Could not initialize WiFi");
        return;
    }     
    Serial.println(WiFi.localIP());     
    WebSerial.msgCallback(onMessage);
    WebSerial.begin(&server);     
    server.begin();
}
void loop() {}

코드를 테스트하려면 다시 한 번 컴파일하고 기기에 업로드하세요.

그런 다음 웹 브라우저에서 WebSerial 콘솔로 이동하여

텍스트 입력에 일부 내용을 입력하고 보내기 버튼을 클릭합니다.

그림 5와 같이 웹 브라우저 콘솔에서 보낸 메시지는 Arduino IDE 직렬 모니터에 출력되어야 합니다.

그림 5 - WebSerial 수신 메시지를 Arduino IDE 직렬 모니터에 인쇄합니다.

참고문헌

[1] https://github.com/ayushsharma82/WebSerial

[참조번역인용] https://techtutorialsx.com/2021/01/09/esp32-arduino-webserial/

'ESP32' 카테고리의 다른 글

ESP8266: Connecting to MQTT broker (0)	2021.08.16
ESP32: Publishing messages to MQTT topic (0)	2021.08.16
ESP32: Connecting to a WiFi network (0)	2021.08.16
ESP32 Arduino: 인터럽트로 DHT22 센서 측정 얻기 (0)	2021.08.15
ESP32: Ticker library (0)	2021.08.14

현재글ESP32 아두이노: WebSerial

개인기록

Today :
Yesterday :

개인기록