ZOOM 클론 코딩 (WebRTC, WebSocket) - 1

: [ Dev / Socket ]

킹갓제네럴노마드코더의 무료 강의를 공부하며 작성하는 포스트입니다. 노마드코더에게 감사하십시오. 휴먼

headerimg

http VS WebSoket

http와 webSoket은 둘 다 통신 protocol 이다.
http는 한번의 request와 response로 이루어져 있고 Back-End는 이 한번의 과정이 끝나면 User를 잊어버린다. 이 것을 stateless라고 부른다. 또한 서버는 항상 request가 있어야지만 메시지를 보낼 수 있다. 항상 1번의 답변(response)만 할 수 있다.

여담으로 이런 점을 방지하려고 쿠키나 토큰을 계속 같이 넣어 호출해서 로그인한 User가 누군지 알아내는 방식이 많이 사용된다.


WebSocket은 조금 다르다. 서버에게 처음 request를 보내어 연결하는 요청을 하고 서버는 Accept하게 되면 연결이 성립(establish)된다고 한다.
연결된 상태에서는 양방향 통신(br-directional)이기 때문에 서버는 유저가 누구인지 알고 있고 먼저 통신을 보낼 수도 있게 된다.

대중적으로 생각하면 당연히 인터넷에 연결 되어 있는 셈이니 WebSocket 방식이 당연해 보인다.

Zoom 클론 코딩 준비!

이번 프로젝트는 이 websocket 통신을 이용해서 만든다! 그럼 Zoom을 만들어보자

프로젝트 init

  1. npm init -y
  2. npm i express
  3. npm i nodemon -D
  4. npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

위 패키지 설치후 프로젝트 구조는 위 처럼 생성

nodemon.json

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

babel.config.json

{
  "presets": ["@babel/preset-env"]
}

src/server.js

import express from 'express';

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + "/public"))

app.get('/', (req, res) => res.render('home'))
app.get('/*', (req, res) => res.redirect('/'));

const handleListen = () => {
  console.log('listen http://localhost:2201');
};

app.listen(2201, handleListen);

src/views/home.pug

doctype
html(lang='ko')
  head
    meta(charset='utf-8')
    title myZoom
    link(rel="stylesheet" href="https://unpkg.com/mvp.css")
  body
    header
      h1 myZoom 
    main
      h2 thanks for nomadcoder!!

    script(src='/public/js/app.js')

src/public/js/app.js

console.log("hello world~")

© 2018. All rights reserved.