Zoom_clone_coding
This is Zoom clone coding repository.
- Lecture by Nomad Coders
- Lecture : 줌 클론 코딩
- Link : https://nomadcoders.co/
사전 지식
- Express
- Pug
- app.get()
- (req,res)
- Nodemon : 프로젝트를 살펴보고 변경사항이 있을 시 서버를 재시작해주는 프로그램
- Babel : 작성한 코드를 일반 Node.js 코드로 컴파일
- MVP CSS
- Socket.io => WebSocket의 부가기능이 아닌 WebSocket도 활용하여 다양한 프로토콜을 이용한 실시간 클라이언트 서비스 구현을 도와주는 프레임워크 혹은 라이브러리이다. => 즉, 단순 WebSocket의 확장이 아님
- 또한 Socket.io를 이용하면 기존의 소켓통신을 더욱 간편하게 할 수 있고, 굉장히 탄력적이여서 WebSocket 연결이 끊어지더라도 연결을 유지하는 다른 대안책도 존재한다.
- 프론트(브라우저)와 백엔드 모두에서 설치(추가)해야 한다.
서버 설정(server.js)
- Pug로 view Engine 설정
- Express에 template이 어디 있는지 지정
- public url을 생성해서 유저에게 파일을 공유
- home.pug를 render 해주는 route handler 를 만듬
결과물
구현 기능
번외
- 외부 모바일에서도 접속할 수 있도록 해보기
-
npm i localtunnel => 내 서버를 전세계와 공유할 수 있게 해줌 => 항시 무료가 아님 일시적 무료임
-
npm i -g localtunnel
-
lt --port 3000
번외 2
- 문제가 생김 내 컴퓨터랑 폰이 같은 wifi에 있지 않으면 에러가 발생함
- STUN 서버라는 것이 필요하다
- STUN서버는 컴퓨터가 공용 IP를 찾게 해준다.
- 즉 서로 다른 네트워크를 사용하고 싶다면 STUN서버를 통해 공용 IP를 얻어야함
번외 3 => DataChannel
- 이미지, 파일, 텍스트, 게임 업데이트 패키지등을 실시간으로 공유할 수 있다.
- Data Channel은 더 멋있다.
- socket.io없이도 채팅을 만들 수 있고
- 비디오 게임도 만들 수 있다.
- 즉, peer-to-peer를 구현할 수 있는 더 멋진 방법
- 이미지나 파일을 서버없이도 서로 전송할 수 있다.
- 그것이 바로 데이터 채널이다.
번외 4 => peer가 많아질수록 느려지는 문제
- webRTC가 안좋을 수 있는 몇가지 조건이 있다.
- 많은 다중 사용자가 있는 경우에는 느려질 여지가 있다.
- 왜냐하면 네트워크는 모든 peer들이 연결되어 있기 때문이다.
- 이런 경우는 Mash 구조의 네트워크를 구축한 경우이다. (현재 상태)
- 그래서 몇몇 회사는 SFU라는 것을 사용한다. (Selective Forwarding Unit)
- 이 경우는 보내는 측에서 스트림을 한번만 업로드 하면된다.
- 단, SFU 서버에 의존적이다.
- 만일 호스트가 4명인경우에 SFU의 경우에도 각각의 호스트가 자기의 것을 제외한 3개의 스트림을 다운로드 받아야한다. 하짐나 이 스트림들은 다르다.
- 그 이유는 SFU가 모두로부터 스트림을 받는데 서버가 스트림들을 압축한다. 그리고 이서버는 누가 이방의 호스트이고, 누가 말하고 있는지 누가 스크린을 공유하고 있는지 누가 발표를 하고 있는지 알 수 있다.
- 그러니까 내가 발표하지 않고 듣기만 하고 있는 상태라면 그 때 이 서버는 내 스트림을 압축한다. 그래서 사람들이 스트림을 다운로드할때 질이 좀 안좋은 스트림을 다운로드 한다.
- 이건 엄청 멋진것이다. 이전 방식으로는 우리가 최고사양의 스트림을 다운로드하거나 업로드했다. 서버가 있는 SFU에서는 우리가 서버에 업로드하면 서버는 다른 사람들에게 저사양의 스트림을 제공한다.
- 누가 말하고 있느냐에 따라 다를 수 있다.
- 스크린을 공유하고 있거나 발표하고 있는 사람의 화면이라면 서버는 좀 더 좋은 사양으로 제공한다.
- 그러니까 사람들이 업로드하는 그 똑같은 스트림을 다운로드 하지는 않는다.
- 우리는 저사양의 스트림을 다운로드하게 된다.
- 그래서 Datachannel 이 멋지다.
- Datachannel을 하면 매시방식의 네트워크를 할지 SFU를 사용할지 고민하지 않아도 된다.
- 왜냐면 Datachannel은 그저 텍스트이기 때문이다.
- 그래서 업로드와 다운로드하는게 엄청 빠르다.
- 모든 문제는 오디오와 비디오를 다룰때 발생한다.
- Datachannel 을 사용하면 그물망 구조를 가져도 좋다(메세지의 경우에는)
- 즉, 결과적으로 오디오나 비디오를 전송하려면 SFU를 사용하는게 좋다.
- 채팅 혹은 동시편집의 경우에는 Datachannel을 사용하는 것이 좋다.