연결 환경과 서버 주소
웹 화면을 여는 HTTP 포트, IOSignal의 WebSocket 포트, Arduino용 TCP 포트는 서로 다릅니다. 서버의 port·congPort와 클라이언트 설정을 맞추세요.
| 환경 | 브라우저의 연결 URL | Arduino 호스트·포트 |
|---|---|---|
| 로컬 빠른 시작 | ws://localhost:7777 | PC LAN IP·별도 congPort |
| 실습실 npm run dev | ws://localhost:7777 | PC LAN IP·55488 |
| 공개 IOSignal | wss://io.iosignal.net/ws | io.iosignal.net·55488 |
| 공개 Remocon | wss://io.remocon.kr/ws | io.remocon.kr·55488 |
HTTP / HTTPS와 WebSocket 선택
- HTTPS 웹앱: 공개 WSS 서버 접속의 기본 주소입니다.
- HTTP 웹앱: WS 실습용 대안입니다. HTTP로 바꿔도 브라우저의 로컬 네트워크 접근 제한이 모두 해결되지는 않습니다.
상단에 현재 HTTP/HTTPS 접속 방식이 표시됩니다. 전환 버튼은 제공하지 않습니다. HTTPS에서 WS 연결이 차단되면 브라우저 주소창에 http://test.iosignal.net을 직접 입력하여 새로 접속하세요. 기본 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 주소를 직접 입력하여 새로 접속하라는 안내를 표시합니다. 앱에서 WS 연결을 일괄 차단하지 않습니다. 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로 바뀔 수 있습니다. 주소창에 HTTP 주소를 직접 입력해도 HTTPS로 열리면 WSS 서버 또는 로컬에서 실행한 웹앱을 사용하세요.