ESP32와 공개 통신 실습실
IOSignal 통신 실습실(test.iosignal.net)은 서버 연결, 시그널 송수신, 구독, 데이터 확인을 위한 공개 웹앱입니다. 계정 관리 없이 자신의 IOSignal 서버에도 연결할 수 있습니다. Remocon은 장치 검색·제어 UI와 계정 기반 관리 서비스를 제공하며, 같은 장치 예제를 목적에 따라 두 웹앱에서 사용할 수 있습니다.
실습 순서
| 실습 | Arduino 예제 | 웹 프리셋 | 확인할 결과 |
|---|---|---|---|
| 기본 송수신 | IOSignal esp32_channel_txrx | 기본 송수신 | 버튼 이벤트와 LED 토글 |
| 개별 장치 제어 | Remocon esp32-cid-led | 장치 개별 제어 (CID) | 명령 후 실제 on/off 상태 수신 |
| 그룹 제어 | Remocon esp32-group-led 2대 | 그룹 LED | 10/01/11/00에 따른 두 LED 제어 |
| RGB LED | Remocon esp32s3-ws2812 | ESP32-S3 RGB | RGB 4바이트 전송과 색상 변경 |
일반 ESP32 보드를 기준으로 시작하세요. RGB 과정은 GPIO 48에 WS2812가 있는 ESP32-S3 예제용이며, 모든 ESP32의 내장 LED에 적용되는 것은 아닙니다.
웹앱 로컬 실행
test_iosignal_net 소스 저장소를 받은 뒤 Node.js 22.12 이상에서 실행합니다.
npm ci
npm start
브라우저에서 http://localhost:8080을 엽니다. 이 명령은 웹 화면만 실행합니다. 공개 서버를 사용하려면 연결 URL을 wss://io.iosignal.net/ws 또는 Remocon 예제용 wss://io.remocon.kr/ws로 입력합니다.
자신의 PC에서 중계 서버까지 함께 실행하려면 다음을 사용합니다.
npm run dev
| 항목 | 기본 주소·설정 |
|---|---|
| 브라우저에서 열 웹 화면 | http://localhost:8080 |
| 웹앱 연결 URL | ws://localhost:7777 |
Arduino IO_HOST | PC의 LAN IP 주소, 예: 192.168.0.10 |
| Arduino TCP 포트 | 55488 |
Arduino에서 localhost는 PC를 뜻하지 않습니다. PC의 LAN IP를 사용하고 같은 네트워크에서 TCP 55488 접근이 가능해야 합니다. 로컬 서버는 익명 통신 실습용이며 Remocon의 계정 관리 API를 제공하지 않습니다.
보드 없이 CID 흐름 먼저 보기
npm run dev 실행 중 다른 터미널에서 npm run demo:device를 실행합니다. 웹에서 로컬 서버에 연결하고 CID 프리셋의 장치 찾기를 누르면 모의 LED 장치가 응답합니다. CID를 적용한 뒤 on/off를 보내 상태 변화를 확인할 수 있습니다. 실제 GPIO 대신 콘솔과 시그널로 동작하는 학습용 장치입니다.
연결을 맞추는 방법
웹앱과 Arduino는 같은 IOSignal 서버에 연결해야 합니다. 웹의 WebSocket 주소와 Arduino의 TCP 주소·포트는 서로 다릅니다.
| 실습 | Arduino 호스트 | 웹 연결 URL |
|---|---|---|
| 기존 IOSignal 기본 예제 | io.iosignal.net | wss://io.iosignal.net/ws |
| 새 Remocon 개별·그룹 예제 | io.remocon.kr | wss://io.remocon.kr/ws |
| 자체 로컬 서버 | PC의 LAN IP | ws://localhost:7777 (같은 PC 브라우저) |
홈채널 실습은 서버가 장치와 웹앱을 같은 홈채널로 분류하는 연결 환경에서 진행합니다. 보통 같은 공유기에서 같은 서버에 연결해 시작합니다. VPN·모바일 데이터 등 경로가 달라지면 검색과 그룹 통신이 안 될 수 있습니다. 홈채널 설명을 참고하세요.
공개 서버 접속에는 HTTPS + WSS를 권장합니다. WS와 로컬 연결 조건은 아래 HTTP / HTTPS 안내를 참고하세요. 인증은 선택 사항이며, 사용할 서버에서 발급된 본인의 ID_KEY만 입력합니다. 웹앱은 키를 로그나 프리셋에 저장하지 않습니다.
통신 화면 읽기
- 프리셋 선택: 태그·형식·구독 목록을 채웁니다. 선택만으로 시그널을 보내지는 않습니다.
- 연결: 상태가
ready가 되고 내 CID가 표시되 는지 확인합니다. - 송신: TX는 송신 호출 기록입니다. 상대 장치 실행 완료 표시는 아닙니다.
- 수신: RX의 태그, 인자 수와 타입, 값을 확인합니다.
- 직접 제어: 내 CID와 대상 장치 CID를 구분합니다.
EMPTY는 인자 없음이며, TEXT의 빈 문자열이나 JSON null과 다릅니다. HEX는 ff 00 7f처럼 입력합니다. 여러 인자는 JSON 배열로 입력하며, []는 인자 없음, [null]은 null 하나입니다. JS의 실제 시그널 유형 선택은 시그널 유형을 참고하세요.
검증 범위와 문제 해결도 함께 확인하세요. 수정된 웹앱과 새 예제는 소스에서 실행할 수 있으며, 운영 웹사이트나 Library Manager에 반영되기 전에는 기존 배포본에 없을 수 있습니다.
보드부터 선택하기
첫 실습은 ESP32-C3 Super Mini를 권장합니다. 통신 개념은 공유하고 배선·GPIO·payload 규약은 보드별 페이지에서 확인합니다. 웹앱의 보드 선택도 같은 구성을 제공합니다.
| 보드 | 튜토리얼 | 방식 |
|---|---|---|
| ESP32-C3 Super Mini | 버튼과 내장 LED | 홈채널 이벤트 |
| ESP8266 D1 mini | 개별 LED | CID |
| ESP-01 | 릴레이·LED | CID |
| iris (ESP32-C3) | DIP 그룹 | 그룹 상태 |
| ESP32 | 기본 송수신 | 홈채널 이벤트 |
| ESP32-S3 | RGB | robot 채널 |
보드 선택은 제어 프리셋과 튜토리얼을 바꿉니다. 서버 주소는 변경하지 않으므로 스케치와 같은 서버인지 연결 전에 확인하세요.
HTTP / HTTPS와 WebSocket 선택
- HTTPS 웹앱: 공개 WSS 서버 접속의 기본 주소입니다.
- HTTP 웹앱: WS 실습용 대안입니다. HTTP로 바꿔도 브라우저의 로컬 네트워크 접근 제한이 모두 해결되지는 않습니다.
상단에 현재 HTTP/HTTPS 접속 방식과 전환 버튼이 표시됩니다. 전환은 같은 호스트·경로로 이동하며 기존 연결을 종료합니다. 이동 후 서버 주소를 확인하고 다시 연결하세요. 인증키와 입력한 서버 주소는 전달·저장하지 않습니다. URL에는 보드·프리셋 선택과 요청한 프로토콜을 나타내는 transport만 전달합니다. 로컬 개발 주소에서 전환하려면 해당 포트에 반대 프로토콜 서버도 제공되어야 합니다. 기본 npm start는 HTTP만 제공합니다.
| 웹앱 페이지 | WebSocket 서버 | 안내 |
|---|---|---|
| HTTPS | 공개 wss://… | 권장 구성 |
| HTTPS | ws://… | 앱은 연결을 시도하지만 브라우저가 혼합 콘텐츠로 차단할 수 있음 |
| HTTPS | ws://localhost:7777 또는 LAN의 ws://192.168.x.x:7777 | 브라우저·버전·로컬 네트워크 접근 권한에 따라 허용 여부가 달라짐 |
http://localhost:8080 | ws://localhost:7777 | 같은 PC에서의 로컬 실습 |
| 공개 HTTP 웹앱 | LAN·localhost 서버 | 로컬 접근에 보안 컨텍스트를 요구하는 브라우저에서는 제한될 수 있음 |
HTTPS에서 WS 주소를 입력하면 조건 안내와 HTTP 전환 버튼을 보여주며, 자동 전환하거나 앱에서 일괄 차단하지 않습니다. WSS를 사용하려면 서버에도 TLS와 브라우저가 신뢰하는 인증서가 준비되어 있어야 합니다. 주소의 ws만 wss로 바꾸는 것으로 서버 설정이 변경되지는 않습니다.
localhost는 브라우저가 실행 중인 기기 자신입니다. 다른 PC의 서버에는 그 PC의 LAN IP를 입력합니다. 현재 로컬 웹앱 개발 서버는 127.0.0.1:8080에만 바인딩되어 다른 LAN 기기에서 화면에 접속할 수 없습니다. LAN에 웹앱을 제공하려면 서버의 수신 주소 및 방화벽 설정을 별도로 구성해야 합니다. 웹 화면 접속 포트와 IOSignal WebSocket/TCP 포트는 서로 다릅니다.
연결 실패 시 서버 주소·서버 실행 여부·TLS·방화벽을 확인하고, 브라우저가 로컬 네트워크 접근 권한을 요청하는 환경에서는 해당 권한도 확인하세요. 브라우저별 예외를 모든 환경에서의 연결 보장으로 해석하지 않습니다. 로컬 네트워크 접근 설명
HTTP 전환 후에도 HTTPS로 열리는 경우
브라우저의 HTTPS 자동 전환 또는 HSTS 정책, 서버 리다이렉트로 인해 HTTP 이동 요청이 HTTPS로 바뀔 수 있습니다. 전환 버튼은 프로토콜 변경을 요청하며 브라우저 정책을 우회하지 않습니다. 앱은 transport=http 요청이 HTTPS로 열린 경우 안내와 HTTP 주소 복사 기능을 표시합니다. 주소창에 HTTP 주소를 직접 입력해도 HTTPS로 열리면 WSS 서버 또는 로컬에서 실행한 웹앱을 사용하세요.