WebRTC 및 Node 등 스터디

WebRTC 특징

웹에서 사용할 수 있는 P2P 기술

• 기본적으로 별도의 서버를 사용하지 않으므로 두 피어가 연결 방법을 공유하기 위한 가상의 신호 서비스인 Signalling 사용
• 클라이언트가 동일 로컬 네트워크가 아닌 이상 다이렉트 소켓을 사용할 수 없는 경우(P2P연결불가)가 많으므로, 릴레이 서버인 TURN 서버를 사용
• UDP 기반

• 1:1 , 1:N, N:N 응용서비스 개발 모두 가능

1:1 - 카카오 보이스톡

1:N - 방송서비스 (대량 접속 환경에선 P2P 성격은 버려짐)

N:N - 화상회의형서비스

WebRTC 어려움

• 관련 기술 문서 부족
• UDP기반의 RTP프로토콜로 품질 불확실성
• 고난이도의 미디어 처리

강의 : https://nomadcoders.co/noom

줌 클론코딩

WebSockets, SocketIO, WebRTC

요구사항 :

ExpressJS, app.get(), Pug, JS

Node v14.17.3 이상

pug

: html을 조금 더 세련되게 쓸 수 있는 템플릿 언어. express 뷰 엔진

node.js

__filename 은 현재 실행 중인 파일 경로

__dirname 은 현재 실행 중인 폴더 경로

위는 CommonJS 모듈내에서만 동작하며 ES모듈에서는 동작안하므로 아래 코드 추가 필요

import path from 'path';
const __dirname = path.resolve();

“Uncaught SyntaxError: Cannot use import statement outside a module” 에러시 package.json에 아래 코드 추가

 "type": "module",

express내에서 템플릿 엔진을 사용하려면
app.set으로 설정

https://expressjs.com/ko/guide/using-template-engines.html

Express와 함께 템플리트 엔진 사용

nodemon 특정 경로 파일 수정할때는 재시작되지 않도록 설정하려면 nodemon.js에 ignore 추가

{
    "ignore": ["src/public/*"],
    "exec": "babel-node src/server.js"
}

바벨은 그 자체로 아무것도 하지 않으므로 플러그인을 사용해야한다.

babel foundation에서는 plugin들을 포함한 번들파일을 포함한 preset을 제공하며 (plugin 자동 설치) "@babel/preset-env"는 공식적인 기본 프리셋이다.

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

WebSocket - Web API | MDN

webSocket에는 아래와 같이 자유롭게 어트리뷰트를 추가하고 설정할 수 있다.

 socket["nickname"] = parsedMsg.payload;

SocketIO

소켓IO는 웹소켓의 일부분이 아니다. 대부분의 브라우저가 웹소켓을 지원하지만 미지원인 경우 롱폴링(long polling) 으로 연결이 이뤄진다.

*클라이언트가 서버에 있는 정보를 요청하면 지정한 시간동안 연결을 열어둔다. 서버에 정보가 없으면 클라이언트가 요청한 정보가 생길 때 까지 또는 지정한 시간이 끝날 때까지 해당 요청을 열어둔다. 지정 시간이 끝나면 클라이언트는 서버에 있는 정보를 다시 요청한다. 코멧은 서버가 클라이언트로 뭔가를 송신할 수 있을때까지 HTTP 응답 완료를 지연시킨다. 이 기법을 'GET' 또는 '미결 POST(pending -POST) 라고 부른다.