초보 개발자

우리가 offer와 answer를 가지고 그걸 받는 걸 모두 끝냈을 때!! peer to peer 연결의 양쪽에서 icecandidate라는 이벤트를 실행하기 시작한다. ice candidate는 Internet Connectivity Establishment(인터넷 연결 생성)이다. 브라우저가 서로 소통할 수 있게 해주는 방법이다. 다수의 candidate(후보)들이 각각의 연결에서 제안되고 서로의 동의 하에 하나를 선택한다. RTCIceCandidate - Web API | MDN (mozilla.org) RTCIceCandidate - Web API | MDN RTCIceCandidate 인터페이스는 WebRTC API의 한 종류로서, RTCPeerConnection을 구축 할 때 사용되기도하는 I..

webRTC는 peer to peer방식이다. 소켓의 경우 front -> back 으로 메시지를 보내고 back -> front로 다시 보내는 과정을 거쳤다. 메시지를 보내기 위해서는 서버가 반드시 필요하다. 하지만 webRTC는 사람과 사람간의 소통이므로 서버를 거쳐 소통하는 것이아닌 직접 소통하는 것이라 훨씬 빠르고 유용하다. 하지만 처음에 정보를 전달할 때는 서버의 도움이 필요하다. 이번에는 webRTC를 배워볼 것이다. 가장 처음에 우리는 방에 들어가면 나를 제외한 사람들에게 welcome이라는 이벤트를 준다. 그러면 우리는 nickname arrived를 출력하도록 하였다. 바로 이 때가 RTC process를 시작해도 될 때이다. 이제부터 peer A를 먼저 실행 시킨 브라우저로 표현하고 p..

wetube 클론코딩을 하면서 잠깐 사용해 본적이 있었는데 다시 사용할 기회가 생겨서 좋았다. 먼저 우리는 zoom 클론코딩 중이기 때문에 카메라가 나와야 할 것이다. 따라서 카메라를 띄우고, 음소거를하고, 끄고, 카메라를 고를 수 있는 작업을 해볼 것이다. 먼저 가장 중요한 getMedia 함수를 만들어 주었다. 이 함수는 처음에는 인자 없이 실행되고 그 다음부터는 실행될 때는 인자가 있어야 한다. 잘 이해가 안되겠지만 설명을 한번 들어보면 이해가 될 수도 있다. 먼저 initcon selcon이 있는데 initialConstraint 와 selectedConstraint를 줄여서 저렇게 지정하였다. Constraint가 무엇이냐면 기본적으로 video : true, audio: true와 같이 지정할..

Adapter는 기본적으로 다른 서버들 사이에 실시간 어플리케이션을 동기화 해준다. 우리는 서버의 메모리에서 Adapter를 사용하고 있다. 우리가 서버를 종료하고 다시 시작할 때 모든 room과 message와 socket은 사라진다. 지금 많은 client로부터의 connection들을 메모리에 저장하고 있다. 만약 서버를 2개 3개만들어도 같은 memory pool을 공유하지 않는다. 같은 대화창을 보고 있더라도 실제로는 다른 서버에서 연결되어 있을 수 있다. 만약 우리가 Adapter를 쓰지 않는다면 서버 A에 있는 client가 서버B에 있는 client에게 메시지를 보내고싶다면 불가능하다 서버가 분리되어 있기 때문에 따라서 Adapter를 써줘야한다. 서버A client -> 서버A -> 서버..

기본적으로 user는 이미 방에 혼자 들어가있다. 그 방의 이름은 user의 socket id와 같다. 우리는 기본적으로 방에 입장하려고 한다. socket.join을 사용하는데 만약 방이 없다면 방을 만들고 방이 있다면 그 방에 들어가는 방식이다. home.pug 먼저 div#room 속 form을 하나 더 만들어 준다. app.js 새로 만든 room을 처음에 숨겨주고. roomName은 일단 정해지지 않았기에 let으로 정의만해주었다. 그리고 showForm 함수를 통해서 welcome form이 지워지고 다시 roomForm이 나타나도록 하는 함수를 만들어주었다. 그리고 전과 마찬가지로 welcomeForm의 input의 값과 enter_event를 emit으로 백엔드에 전달해주고 콜백함수에는 h..

전 시간까지 만들었던 것을 다 지우고 socketIO를 설치하여 다시 만들어 보려고한다. front-end와 back-end 둘다 socket IO를 설치해주어야한다. 먼저 backend에서는 npm i socket.io 이렇게 해주면 되고. 이렇게 서버를 똑같이 실행시키고 localhost:3000/socket.io/socket.io.js에 들어가면 이러한 것이 딸려나오는 것이 확인된다. home.pug에도 다음과같이 추가해주자 전에 webSocket API는 브라우저에 설치되어 있었지만 socketIO는 아니기때문이다. 저 순서도 중요하다. pug에 설치를 해주어야 아래 script에서 설치된 기능을 사용할 수 있다. 즉 순서가 바뀌어버리면 설치가 안된 상태이기 때문에 app.js는 socketio의..

먼저 home.pug에 채팅창 비슷하게 form을 만들어준다. app.js에서 폼에서 전송하면 서버에 메시지를 보내고 입력창을 비워주는 작업을 해주었다. 그리고 서버에서는 받은 메시지를 다시 브라우저에게 보내주었다. 브라우저에서 채팅을 입력하면 콘솔창에 바로 되돌아 온다. Chrome Edge둘다 된다. 여기서 중요한 점이 있다. Edge와 서버사이에 websocket이 있고, Chrome과 서버사이에 websocket이 있다. 이 두개는 아직 연결되어있지 않다. 우리가 각 브라우저에서 메시지를 보냈을 때 다른 브라우저로 넘어가는 것이 아니라 메아리 처럼 각 서버와 브라우저 둘이서만 주고 받고있다. 난 다른 사람과 이야기를 하고 싶다!! 그러므로 이 문제를 해결해야 한다. 서버에 fake database..

브라우저가 이미 webSocket 클라이언트에 대한 implemention을 가지고 있다. (심지어 IE조차!!) backend를 연결해주는 webSocket은 이미 저번시간에 준비해 두었다 btn.addEventListener('event',fn) wss.on('event',fn) wss에서도 event와 fn을 받을 수 있다. frontend의 click 하면 fn이 호출되는 것과 같다. callback으로 socket을 받는다. 이 socket은 연결된 어떤 사람이라고 생각하자. 연결된 브라우저와의 contact라인이다. socket을이용하면 메세지 주고 받기를 할 수 있다. 이 것을 어딘가에 저장해야한다. 먼저 console로 찍어보자. 연결이 되면 콘솔창에 socket이 나타날 것이다. app...