Web RTC Chat

WebRTC 기술을 이용한 P2P방식의 화상채팅 웹 앱 ( PWA : Progessive Web App 표준 적용 )

ICE ( Interactive Connectivity Establishment ) 프레임워크로 STUN, TURN 서버를 통해 상대 Peer에 유동적으로 연결

프론트엔드 구조 : client/ 내부의 순수 HTML, JS, CSS 기반 SPA

데스크탑, 모바일별 별도 레이아웃 제공

1. 로그인 화면 ( 데스크탑, 모바일 공통 )

방 번호 입력부분 랜덤 버튼 클릭시 랜덤 UUID 생성 후 자동으로 서버에 중복확인 요청

랜덤 대신 수동으로 직접 입력도 가능

2. 화상 채팅 화면 ( 모바일 )

3. 텍스트 채팅 화면 ( 모바일 )

WebRTC DataChannel을 통해 텍스트 기반 통신 활용

우측 상단 버튼을 통해 해당 화면 진입시 PIP모드가 가능한 환경일경우 PIP 모드 실행

4. 화상, 텍스트 채팅 화면 ( 데스크탑 )

SPA 프론트엔드 빌드

npm install
npm run build

현재 폴더 구조는 client/와 server/로 분리되어 있습니다.

• client/src/WebRTC.ts
• client/public
• client/dist
• server/app.js
• server/db.js
• server/schema.sql

Capacitor Android 앱 동기화

npm install
npm run build:android
npm run cap:open:android

---

Web RTC Chat Server

HTTPS, WSS, TURN, STUN 서버를 제공하는 Node.js express 통합 서버

1. HTTPS ( 웹 페이지 제공 / 443번 포트 사용)

1-1. HTML, JS, CSS 파일 요청 처리

1-2. PWA ( Progessive Web App ) 적용을 위한 manifest.json 파일 요청 처리

1-3. 추가 PWA asset ( 앱 아이콘, 스크린샷 등 ) 파일 요청 처리

1-4. .well-known 내부 파일 요청 처리

2. WSS ( 방 생성 및 참가, 해당 방의 Web RTC Peer간 사전정보 및 기타 정보 교환 제공 / 443번 포트 사용)

2-1. Room 사용자들의 WebRTC SDP ( Session Description Protocol : offer / answer / candidate ) 교환

2-2. 기타 정보 ( login, logout, randomCheck ) 교환

{type, from, to, data} 형태로 메세지를 보내고 받음

예시)
offer) => to 방의 모든 사용자
{ type: 'offer',     from: 'my-sessionId', to: '',                 data: 'WebRTC offer' }

answer) => to 방의 특정 사용자
{ type: 'answer',    from: 'my-sessionId', to: 'target-sessionId', data: 'WebRTC answer' }

candidate) => to 방의 특정 사용자
{ type: 'candidate', from: 'my-sessionId', to: 'target-sessionId', data: 'WebRTC candidate' }

3. STUN ( P2P방식 연결을 위한 클라이언트의 공인IP 확인을 제공하는 서버 / 3478번 포트 사용)

4. TURN ( P2P방식 연결이 불가능할경우 WebRTC 패킷 데이터를 직접 중계하는 서버 / 3478번 포트 사용 )

^{※STUN 서버는 클라이언트 측에서 Google의 STUN 서버를 우선 사용}

Server 실행

^{( /SSL 폴더에 cert.pem, privkey.pem 파일이 필요합니다. - HTTPS 서버용 키 / 별도 발급 필요 )}

npm install
node server/app.js

회원 백엔드 초기화

Google OAuth, 회원 DB, 지문등록은 백엔드에서 다음 순서로 준비합니다.

1. .env.example을 기준으로 .env 작성
2. MySQL에 schema.sql 적용
3. Google Cloud Console에서 OAuth 클라이언트 생성
4. GOOGLE_REDIRECT_URI, WEBAUTHN_RP_ID, WEBAUTHN_ORIGIN을 실제 도메인으로 설정
5. SESSION_COOKIE_NAME, SESSION_TTL_DAYS를 설정

cp .env.example .env
mysql -u root -p < server/schema.sql
node server/app.js

회원 인증 API

• GET /auth/google/start Google OAuth 로그인 시작
• GET /auth/google/callback Google code 교환 후 회원 생성 또는 갱신, session cookie 설정
• GET /auth/me session cookie 기준 현재 회원 조회
• POST /auth/logout 현재 session cookie 만료

지문등록 API

서버는 원본 지문을 저장하지 않습니다. WebAuthn credential만 저장합니다.

• POST /auth/webauthn/register/options session cookie 필요
• POST /auth/webauthn/register/verify session cookie 필요 request body는 브라우저/앱에서 생성한 WebAuthn registration credential 전체 JSON