실행 예제 묶음
실행 파일의 원본은 공개 iosignal-examples 저장소에서 관리합니다. 각 예제 폴더에 클라이언트·서버 코드, 의존성 목록과 잠금 파일, 실행 명령이 함께 들어 있습니다. 처음에는 Vanilla JavaScript를 권합니다.
1. 내려받기
예제 전체 ZIP 다운로드 후 압축을 풉니다. 기본 폴더 이름은 iosignal-examples-main입니다. ZIP에는 네 예제가 모두 들어 있습니다.
Git을 사용한다면 다음 명령으로 받습니다.
git clone https://github.com/remocons/iosignal-examples.git
cd iosignal-examples/iosignal_vanilla-chat
ZIP으로 받았다면 압축을 푼 위치의 터미널에서 다음 폴더로 이동합니다.
cd iosignal-examples-main/iosignal_vanilla-chat
두 방법 중 하나만 사용하세요. 이미 해당 예제 폴더에서 터미널을 열었다면 cd는 생략합니다.
2. 설치하고 실행하기
사이트 가이드와 함께 사용할 때는 Node.js 22.16 이상과 npm을 준비하고, 예제 package.json의 engines 조건도 확인하세요. 설치 상태는 node --version, npm --version으로 확인합니다.
npm ci
npm run dev
npm ci는 내려받은 package-lock.json에 기록된 버전으로 설치합니다. main의 ZIP 내용은 갱신되므로 재현을 위해 다운로드한 ZIP을 보관하거나 Git의 git rev-parse HEAD 결과를 기록하세요. 설치한 IOSignal 버전은 예제 폴더에서 npm ls iosignal로 확인합니다. 사이트 문서 기준 버전은 버전과 호환성에 있습니다.
Vanilla 예제의 정상 실행에서는 터미널에 웹 주소 http://localhost:5175와 IOSignal의 listening port : 7779가 표시됩니다. 버전에 따라 로그 형식은 달라질 수 있습니다. npm run dev가 두 서버를 함께 실행하므로 별도의 서버 명령은 필요하지 않습니다.
3. 성공 확인하기
- 같은 컴퓨터의 브라우저 두 탭에서
http://localhost:5175를 엽니다. - 양쪽 화면에서 IO State가
ready이고 CID가 표시되는지 확인합니다. - 한 탭에
첫 메시지를 입력하고 전송합니다. - 다른 탭에 같은 메시지가 표시되면 성공입니다. 채널은
openchat, WebSocket 주소는ws://localhost:7779입니다. - 종료할 때 실행 터미널에서
Ctrl+C를 누릅니다.
localhost는 브라우저가 실행되는 기기 자신입니다. 휴대전화·다른 PC에서 실행하려면 서버 주소와 연결 환경을 먼저 확인하세요.
다른 환경 선택하기
| 예제 폴더·원본 | 웹 화면 | WebSocket | 선택 기준 |
|---|---|---|---|
| iosignal_vanilla-chat | http://localhost:5175 | ws://localhost:7779 | 프레임워크 없이 기본 흐름 학습 |
| iosignal_react-chat | http://localhost:5173 | ws://localhost:7777 | React 컴포넌트와 이벤트 정리 |
| iosignal_svelte-chat | http://localhost:5174 | ws://localhost:7778 | Svelte 화면 상태와 연결 |
| iosignal_vanilla-chat_CDN | http://localhost:5176 | ws://localhost:7780 | 브라우저 클라이언트를 CDN에서 로딩 |
각 폴더에서 같은 설치·실행 명령을 사용합니다. 서로 다른 예제의 서버는 독립적이므로 같은 예제의 웹 주소를 두 탭에서 열어야 합니다. CDN 예제도 로컬 서버·개발 도구 설치가 필요하며 CDN을 불러올 인터넷 연결이 필요합니다.
파일을 읽는 순서
Vanilla 예제 기준입니다.
| 파일 | 확인할 내용 |
|---|---|
package.json / package-lock.json | 실행 명령, 지원 Node.js, 의존성 버전 |
vite.config.js | 웹 포트 5175와 개발용 IOSignal 포트 7779 |
main.js | 연결 URL, ready → 구독 → 전송·수신 → 종료 |
index.html | 상태·입력·메시지를 표시하는 화면 |
server.js | 빌드 결과를 시험할 때 별도로 실행하는 서버 |
빌드 결과 확인하기
개발 서버를 Ctrl+C로 종료한 뒤, 같은 예제 폴더에서 터미널 두 개를 사용합니다.
터미널 1:
npm run server
터미널 2:
npm run build
npm run preview
preview가 출력한 웹 주소를 두 탭에서 엽니다. build와 preview는 IOSignal 서버를 시작하지 않습니다. 종료 시 두 터미널에서 각각 Ctrl+C를 누르세요. 실제 외부 배포는 별도의 서버 주소·TLS 구성이 필요합니다.
검증한 예제 버전
2026-10-11, 공개 저장소의 b971c6f 커밋을 새로 받아 Vanilla 예제의 npm ci, npm run build, 개발 서버 실행과 두 브라우저 탭 간 메시지 전달을 확인했습니다. 이 커밋의 잠금 파일은 IOSignal 7.1.0을 설치합니다. 사이트의 JS 7.2.0 API 설명과 버전이 다르므로 직접 토픽 이벤트 등 변경 사항은 버전과 호환성을 함께 확인하세요.
이 기록은 Vanilla 로컬 채팅의 확인 결과이며 React·Svelte·CDN 전체 실행이나 실물 보드 검증을 뜻하지 않습니다.
다음 단계
- 채팅 코드의 흐름을 따라 자신의 UI에 적용합니다.
- 설치·실행이 실패하면 단계별 문제 해결에서 정상 출력과 비교합니다.
- 보드를 연결하려면 ESP32 시작 경로를 선택합니다.