개발일기

https://github.com/FlashBack102/webrtc-boilerplate GitHub - FlashBack102/webrtc-boilerplateContribute to FlashBack102/webrtc-boilerplate development by creating an account on GitHub.github.com

1. WebRTC의 기본 구성 요소WebRTC웹 브라우저 간에 실시간 통신을 할 수 있게 해주는 오픈 소스 기술이다. 별도의 플러그인 없이 브라우저만으로 미디어 데이터 스트리밍을 주고받을 수 있다.Stun Server사용자가 자신의 공인 IP주소, 포트와 NAT종류를 파악할 수 있도록 해주는 서버로 주로 공유기나 NAT 환경에 이는 사용자가 외부에서 볼 수 있는 정보를 확인하게 해주는 서버이다. NAT 뒤에 있는 기기는 보통 사설 IP를 사용하여 외부 피어가 직접 연결을 하기 힘들다. STUN은 NAT으로 인해 발생하는 연결 문제를 우회하는데 중요한 역할을 한다. 즉 Stun 서버를 통해 자신의 공인 IP와 포트 번호를 파악한 후 그 정보를 다른 피어에게 전달해주는 역할을 하는게 Stun서버이다.Turn..

1. enumerateDevices()enumerateDevices()는 연결된 장치 목록을 배열 형식으로 반환한다.navigator.mediaDevices.enumerateDevices().then((devices) => { console.log('devices: ', devices)})배열 요소에는 deviceId, groupId, kind, label이 포함된다.deviceId: 장치 하나를 고유하게 식별하는 id다. deviceId를 통해 특정 장치를 선택하여 getUserMedia() 메서드를 사용할 수 있다.groupId: 카메라와 마이크가 함께 내장되어 있는 모니터와 같은 물리적 장치를 그룹으로 묶는 id다. 단순히 같은 그룹에 속해있다는 것을 알려주는 값이다.kind: 해당 장치가 어..

btoa()와 atob()는 문자열을 각각 Base64로 인코딩하거나 디코딩할 때 사용하는 javascript의 내장 함수다. btoa(): 문자열을 Base64 인코딩된 문자열로 변환하는 함수이다.let data = { name: 'mango', price: 1000}data = JSON.stringify(data) // object to stringconst encodedData = btoa(data) // encode dataconsole.log('encodedData: ', encodedData)// encodedData: eyJuYW1lIjoibWFuZ28iLCJwcmljZSI6MTAwMH0=btoa()로 Base64 형태로 인코딩하려면 먼저 데이터를 문자열로 변경해야 한다. JSO..

1. Join서버에서만 작동하는 메서드며 연결된 소켓을 특정한 room에 참여시킬 때 사용한다. 하나의 room에만 참여시키는 게 아니라 여러 room에 참여시킬 수 있다.io.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.join('roomA') socket.join('roomB') // 다른 room에도 참여시킬 수 있다.})위와 같이 코드를 작성하면 소켓에 연결되는 모든 클라이언트는 roomA와 roomB라는 room에 속하게 된다. 1-1. Query Parameter 지정소켓에 연결하는 모든 클라이언트를 같은 room이 아닌 조건에 따라 달리 지정하려면 소켓을 연결하는 클라이언트..

1. 기본 내장 이벤트1-1. connection// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id);})// Socket connected: bvZFBsat9v2GBCJYAAAJ클라이언트가 서버에 연결되면 발생하는 이벤트다. 연결되면 클라이언트의 socket정보를 확인 할 수 있다. 1-2. disconnect// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.on('disconnect', () => { console.log('Socket disconnect..

1. SSE(Server Side Events)SSE는 HTTP기반의 스트리밍 기술이며 Websocket과 다르게 서버에서 클라이언트로 메시지를 보내기만 하면 되는 단방향 통신이 필요할때 사용하기 적합한 기술이다. 즉, 클라이언트가 요청을 하지 않아도 서버에서 자동으로 데이터를 보내야 하는 경우에 사용한다. 만약 클라이언트에서 서버로 요청을 보내야하면 RestAPI를 사용하여 요청을 보내면 SSE의 단점을 보완하여 사용할 수 있다.// Clientconst eventSource = new EventSource('url...')new EventSource를 사용하여 클라이언트에서 SSE 연결을 시작하게 할 수 있다. 입력된 url로 클라이언트가 GET요청을 보내게 되고 서버는 text/event-strea..

URLSearchParams는 URL의 쿼리 문자열을 다룰 때 주로 사용하며 보통 window.location.search와 같이 사용한다. window.location.search는 현재 브라우저의 쿼리 문자열을 출력한다.console.log(window.location.search)// 예상 출력) ?id=123&fruit=mango현재 주소가 localhost?id=123&fruit=mango 라면 ? 뒤에 붙은 쿼리 문자열만 출력한다. 이를 URLSearchParams와 함께 사용하여 특정 키를 가져오도록 할 수 있다.const params = new URLSeacrhParams(window.location.search)console.log( params.get('id') ) // 123conso..