[Node js Project - 4] Zoom Clone with Node JS

<본 블로그는 Traversy Media 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> Build a Zoom Clone with Node JS for Beginners

 

🌏 개발 환경 설정

npm init

npm i express uuid ejs

npm install -D nodemon

 

🏠 package.json

{
  "name": "zoomclone",
  "version": "1.0.0",
  "description": "- nodejs init - first view init - create a room id - add ability to view our own video - add ability to allow others to stream their video - add styling - add ability to create message - add mute button - add stop video button",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "nodemon": "^2.0.22",
    "peer": "^1.0.0",
    "peerjs": "^1.4.7",
    "socket.io": "^4.6.2",
    "uuid": "^9.0.0"
  }
}

🌏 Socket.io

: node.js 기반 실시간 웹 애플리케이션 지원 라이브러리

 

🏠 클라이언트 -> 서버

: 클라이언트가 서버에게 전송한 메시지 수신

io.on
// 현재 접속되어 있는 클라이언트로부터 메시지를 수신하려면 on 메소드 사용
// 'connection' : socket.io의 기본 이벤트, 사용자가 웹사이트에 접속하면 자동으로 발생하는 이벤트

 

🏠 서버 -> 클라이언트

: 서버가 클라이언트에게 메시지 전송

io.emit
// 서버가 현재 접속해있는 모든 클라이언트에게 이벤트 전달

socket.emit
// 서버쪽에서 event를 발생시키는 함수
// 서버에서 이벤트 발생시키면 클라이언트 페이지의 해당 이벤트 리스너에서 처리
// 해당 소켓을 통해 클라이언트에게 메시지 전송

 

🌏 WebRTC

: 통신 표준으로, 웹 브라우저간 실시간 영상/음성/데이터 통신을 가능

: 즉 별도의 플러그인이나 프로그램이 필요 없음

: WebRTC는 P2P 구조로 되어있으며, 기기간 통신하기 때문에 서버의 성능이 크게 필요하지 않음

 

🏠 PeerJS

: WebRTC를 쉽게 사용하기 위해 만들어진 wrapper

: ID만 지정해주면 손쉽게 P2P 연결을 처리

npm install peer

 

🌏 줌 기능

🏠 웹캠 구현하기

🏠 새로운 User 추가하기

// server.js
// 현재 접속되어 있는 클라이언트로부터 메시지를 수신
io.on("connection", (socket) => {
  socket.on("join-room", (roomId) => {
    socket.join(roomId);
    socket.broadcast.to(roomId).emit("user-connected");
  });
});

나는 저기 broadcast 의 위치를 바궜더니 되었다. (유튜브 고대로 따라하니 에러 생겼음 ㅠㅡㅠ)

 

🏠 ID만 지정해주면 손쉽게 P2P 연결을 처리

 

🏠 줌 레이아웃 예쁘게 꾸미기

 

🏠 줌에서 chat 하기

 

무슨일이지 왜 나느 두개 안떠???