IOSignal examples

IOSignal을 React, Svelte 5, Vanilla JavaScript 환경에서 사용하는 채팅 및 WebRTC 화상통화 예제 모음입니다. 각 폴더는 독립적으로 설치하고 실행할 수 있습니다.

예제와 기본 포트

예제	웹 페이지	IOSignal 서버
React	http://localhost:5173	ws://localhost:7777
Svelte 5	http://localhost:5174	ws://localhost:7778
Vanilla JS	http://localhost:5175	ws://localhost:7779
Vanilla JS CDN	http://localhost:5176	ws://localhost:7780
WebRTC Lab	http://localhost:5180	ws://localhost:7781
IOSignal Chat	http://localhost:5177	ws://localhost:5177/ws (같은 포트)

IOSignal Chat은 Vite가 아닌 Node 정적 서버를 사용하며, 웹 페이지와 IOSignal WebSocket을 한 포트(5177) 에서 함께 실행합니다.

WebRTC 화상통화 예제

WebRTC Lab은 IOSignal 공개 채널로 상대를 발견하고 CID 직접 메시지로 SDP·ICE 후보를 교환하는 1:1 화상통화 앱입니다. 채널명·초대 링크·QR, 내/상대 영상 크기 전환, 마이크·카메라·상대 음량 제어, 실제 시그널링 로그와 ICE/RTT 상태를 제공합니다.

cd iosignal_webrtc
npm ci
npm run dev

http://localhost:5180에서 한 탭은 방 만들기, 다른 탭은 같은 채널로 방 참여를 누르세요. 개발 서버가 IOSignal도 함께 실행합니다. 다른 장치에서 사용하려면 HTTPS 화면과 공개 WSS 서버가 필요하며, NAT/방화벽으로 직접 연결이 불가능할 때는 TURN을 설정해야 합니다. WebRTC 예제의 배포·검증 방법은 전용 README를 참고하세요. 아래 채팅 예제 설명과 기본 채널 openchat은 기존 네 채팅 예제에 해당합니다.

채널 협상 채팅 예제

IOSignal Chat은 두 창이 채널을 협상한 뒤 대화하는 독립 예제입니다. 한쪽이 상대 CID로 제안을 보내면 다른 쪽이 수락·거절·역제안으로 응답하고, 합의된 room#chat 채널에서 메시지를 주고받습니다. 접속자 발견은 lobby#presence, 협상은 CID@negotiate 직접 시그널을 사용하며, 모든 과정이 화면의 협상 로그에 남습니다.

cd iosignal-chat_DeepSeek-V4.1-Flash-1017
npm ci
npm start

http://localhost:5177을 두 창에서 열고 한쪽의 협상 버튼으로 시작하세요. 웹 페이지와 IOSignal 서버가 같은 포트에서 실행되며, 구조와 협상 프로토콜은 전용 README에 정리되어 있습니다.

빠른 시작

Vite 기반 예제를 실행하려면 Node.js 22.16 이상과 npm을 준비하세요. 예를 들어 React 예제는 다음과 같이 실행합니다.

cd iosignal_react-chat
npm ci
npm run dev

다른 Vite 예제도 해당 폴더에서 같은 명령으로 실행합니다. 이미 VS Code로 예제 폴더를 열었다면 cd는 생략합니다. npm start도 개발 서버를 실행합니다.

브라우저 두 탭에서 같은 예제의 웹 페이지 주소를 열고, 양쪽 IO State가 ready가 되면 메시지를 보내세요. 공통 채널 이름은 openchat입니다.

Vite를 통해 IOSignal 서버가 실행됩니다

npm run dev 하나로 다음 두 서버가 함께 실행됩니다.

1. Vite 웹 서버가 화면과 클라이언트 코드를 제공합니다.
2. 각 vite.config.js의 iosignal-server 플러그인이 configureServer()에서 IOSignal WebSocket 서버를 생성합니다. 브라우저는 이 서버에 연결해 채팅 메시지를 주고받습니다.

따라서 로컬 개발 시 별도의 IOSignal 서버 실행 명령은 필요하지 않습니다. 브라우저 주소창에는 http://localhost:517x 웹 주소를 입력하고, WebSocket 주소는 클라이언트 코드에서 사용합니다.

CDN 예제는 브라우저 클라이언트만 jsDelivr의 IOSignal 8.0.0에서 가져옵니다. 채팅 서버는 다른 예제와 마찬가지로 npm의 IOSignal 패키지를 사용해 Vite가 로컬에서 실행하므로 npm ci이 필요합니다. CDN을 불러올 인터넷 연결도 필요합니다.

종료·재시작·동시 실행

• 터미널에서 Ctrl+C를 누르면 개발 서버가 종료됩니다.
• Vite의 closeBundle() 훅에서 IOSignal close() 완료를 기다려 WebSocket 서버도 정리합니다. 설정 변경으로 Vite가 재시작할 때도 같은 정리 과정이 적용됩니다.
• 예제마다 웹·WebSocket 포트가 다르므로 여러 예제를 각각의 터미널에서 동시에 실행할 수 있습니다.
• 각 예제의 채팅 서버는 독립적입니다. 다른 예제 사이에는 메시지가 전달되지 않으며 같은 예제의 웹 주소를 여러 탭에서 열어 테스트합니다.
• 같은 예제를 두 번 실행하거나 다른 프로그램이 해당 포트를 점유하면 충돌합니다. 먼저 실행한 프로세스를 종료하세요. 웹 포트는 strictPort: true로 고정되어 자동으로 다른 포트를 선택하지 않습니다.

포트를 직접 변경하려면

변경할 항목	수정 위치
웹 페이지 포트	각 vite.config.js의 server.port
IOSignal 서버 포트	각 vite.config.js의 new Server({ port: ... })
클라이언트 연결 포트	React src/App.jsx, Svelte src/routes/+page.svelte, Vanilla·CDN main.js의 URL

IOSignal 서버 포트와 클라이언트 URL은 반드시 함께 변경하세요. vite --port는 웹 포트만 바꿉니다.

빌드·preview·배포

Vite 기반 다섯 예제 모두 npm run build, npm run preview, npm run server를 제공합니다.

개발 중에는 npm run dev만 사용합니다. 빌드·preview는 IOSignal 서버를 실행하지 않습니다. 개발 전용 configureServer() 훅에서 서버를 생성하기 때문입니다. 빌드 결과는 클라이언트 파일이며, Svelte도 static adapter로 정적 파일을 생성합니다.

빌드 결과로 채팅하려면 먼저 개발 서버를 종료한 뒤 같은 예제 폴더에서 두 터미널을 사용하세요.

# 터미널 1: 독립 IOSignal 서버 실행
npm run server

# 터미널 2: 클라이언트 빌드와 미리보기
npm run build
npm run preview

preview가 출력하는 웹 주소를 두 탭에서 열면 됩니다. server.js는 각 예제의 개발용 IOSignal 포트와 동일한 포트를 사용하므로 npm run dev와 동시에 실행하지 마세요. Ctrl+C로 종료합니다. 포트를 직접 변경할 때는 클라이언트 URL, vite.config.js, server.js를 함께 수정합니다.

실제 배포에서는 IOSignal 서버를 별도로 운영하고 클라이언트 URL을 해당 주소로 수정해야 합니다. 기본 localhost는 같은 컴퓨터에서 테스트하기 위한 주소입니다. 외부 기기나 원격 환경에서는 실제 서버 주소로 바꾸고, HTTPS 페이지에서는 wss:// 서버를 사용하세요.

예제의 범위

서비스용 정책보다 연결·구독·송수신 흐름을 쉽게 읽는 데 초점을 둡니다. Enter 전송은 단순하게 유지하며 메시지 크기 제한, 수신 형식 필터, 한글 조합 처리, 기록 개수 제한은 구현하지 않습니다. 문자열 메시지와 { text, cid } 객체를 사용하는 기본 흐름을 보여줍니다.

React의 effect, Svelte의 onMount, Vanilla의 페이지·HMR 정리에서 IO 인스턴스를 종료합니다. Svelte는 메시지가 DOM에 반영된 뒤 스크롤하도록 tick()을 사용합니다. CDN 예제는 외부 ESM import 사용을 그대로 보여주며, CDN에 접근할 수 없다면 브라우저 개발자 도구에서 네트워크 오류를 확인하세요.

8.0.0 검증 기준

모든 예제의 npm 의존성과 CDN은 IOSignal 8.0.0으로 고정합니다. npm ci로 잠금 파일을 설치하고 npm ls iosignal로 확인합니다.

2026-10-28: 5개 예제 빌드, 채팅 4종 양방향 송수신·재접속, WebRTC 통합 테스트 5개가 로컬 Chrome에서 통과했습니다. WebRTC는 가상 캡처 장치를 사용했으며 실제 장치·Safari/iOS·다른 인터넷망·TURN relay는 이 검증에 포함하지 않았습니다.

2026-10-28: 별도 예제 iosignal-chat_DeepSeek-V4.1-Flash-1017의 Node 스모크 테스트와 Chrome 두 창 E2E(수락·역제안·거절·수동 입장)를 검증했습니다.

각 예제에서 npm ci를 실행한 뒤 브라우저 테스트를 재현합니다.

cd iosignal_webrtc
npx playwright install chromium
npm test
npm run test:chats

설치된 Chrome을 쓰려면 CHROME_PATH를 실행 파일 경로로 지정하세요. test:chats는 네 채팅 개발 서버를 자동으로 실행하고 종료합니다. CDN 테스트에는 인터넷 연결이 필요합니다.