채팅 예제 따라 하기
기준: iosignal-examples. 네 예제 모두 채널 openchat에 참여해 메시지를 주고받는 흐름을 보여줍니다.
| 예제 | 배우는 내용 | 원본 |
|---|---|---|
| Vanilla JavaScript | ready에서 구독하고 message로 수신하며 destroy()로 정리 | iosignal_vanilla-chat |
| CDN | 패키지 설치 없이 브라우저 배포 파일 로딩 | iosignal_vanilla-chat_CDN |
| React | 컴포넌트 생명주기에 맞춰 인스턴스와 이벤트 관리 | iosignal_react-chat |
| Svelte | 공유 클라이언트와 화면 상태 연결 | iosignal_svelte-chat |
Vanilla 예제 실행
git clone https://github.com/remocons/iosignal-examples.git
cd iosignal-examples/iosignal_vanilla-chat
npm install
npm run dev
예제의 vite.config.js가 개발 서버 실행 시 IOSignal 서버를 포트 7777에 함께 띄웁니다. main.js는 ws://localhost:7777에 연결합니다. 포트 7777을 사용하는 다른 서버는 먼저 종료하세요. 개발 서버가 표시하는 브라우저 주소를 두 탭에서 열고 양쪽에 ready와 CID가 나타나면 메시지를 전송합니다. 두 탭에 표시되면 채널 구독과 전달이 동작합니다.
핵심 순서는 **인스턴스 생성 → ready에서 subscribe('openchat') → signal('openchat', data) → message 수신 → 화면 종료 시 destroy()**입니다. React와 Svelte도 같은 프로토콜을 사용합니다. 예제별 설치 명령과 개발 서버 포트는 각 예제의 package.json을 확인하세요.