/Zoom

Primary LanguageJavaScript

โœจ Zoom


Zoom Clone using NodeJS, WebRTC and Websockets.


๐Ÿ”ง ์‹คํ–‰๋ฐฉ๋ฒ•

cd Zoom

npm i

npm run dev

๐Ÿ›  ์ฃผ์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ


  • nodemon

    • ํŒŒ์ผ์„ ๊ด€์ฐฐํ•˜๊ณ  ์žˆ๋‹ค๊ฐ€ ๋ณ€๊ฒฝ์ ์ด ๋ฐœ์ƒํ•˜๋ฉด ์ž๋™์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์žฌ์‹œ์ž‘ํ•ด์ฃผ๋Š” ํŽธ๋ฆฌํ•œ ๋„๊ตฌ

  • @babel/core

    • ๋ฐ”๋ฒจ์˜ ํ•ต์‹ฌ ํŒŒ์ผ, ๋ฐ”๋ฒจ์˜ ๋‹ค๋ฅธ ๋ชจ๋“ˆ๋“ค์ด ์ข…์†์„ฑ์„ ๊ฐ€์ง

  • @babel/node

    • ๋ฐ”๋ฒจ์˜ CLI ๋„๊ตฌ ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ์ด์ „ ๋ฒ„์ „์˜ babel-cli ๋กœ๋ถ€ํ„ฐ ๋ถ„๋ฆฌ๋จ

  • @babel/preset-env

    • ๋ฐ”๋ฒจ์˜ preset ์ค‘ ํ•˜๋‚˜๋กœ es6+ ์ด์ƒ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฐ ๋ธŒ๋ผ์šฐ์ €/ ๋…ธ๋“œ ํ™˜๊ฒฝ์— ๋งž๋Š” ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜์‹œ์ผœ์คŒ

    • ์ „์ฒด ์„ค์ • ํŒŒ์ผ์ธ babel.config.js / babel.config.json ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

    • ์ง€์—ญ ์„ค์ • ํŒŒ์ผ์ธ .babelrc ํŒŒ์ผ๊ณผ package.json ์— babel key๋ฅผ ๋„ฃ์–ด์„œ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

    • ์—ฌ๊ธฐ์„œ ์ „์ฒด ์„ค์ •๊ณผ ์ง€์—ญ ์„ค์ •์ด ๊ฒน์น˜๋Š” ์„ค์ •์ด ์กด์žฌํ•  ๊ฒฝ์šฐ ์ง€์—ญ ์„ค์ •์œผ๋กœ ๋ฎ์–ด์ง„๋‹ค. (์‰ฝ๊ฒŒ ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์ง€์—ญ๋ณ€์ˆ˜๋กœ ๋ฎ๋Š”๋‹ค ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.)


  • โญ socket.io

    • Socket.io๋ž€ Websocket์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์‹ค์‹œ๊ฐ„ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

    • ์›น ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ์‹ค์‹œ๊ฐ„ ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” Node.js์˜ ๋ชจ๋“ˆ

    • Socket.io์—์„œ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฉ”์†Œ๋“œ๋“ค์„ ์ œ๊ณต์„ ํ•ด์ฃผ๋Š”๋ฐ emit( ๋ณด๋‚ด๋‹ค ), on(๋ฐ›๋‹ค) , join(๋“ค์–ด๊ฐ€๋‹ค) , leave(๋‚˜๊ฐ€๋‹ค) room(๋ฐฉ์„ ๋งŒ๋“ค์–ด room์— ๋“ค์–ด์žˆ๋Š” ์†Œ์ผ“๋ผ๋ฆฌ ํ†ต์‹ ํ• ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค) ๋“ฑ๋“ฑ ์„ ์ œ๊ณต


var socket = io.connect("์„œ๋ฒ„ ์ฃผ์†Œ");
socket.on("์„œ๋ฒ„์—์„œ ๋ฐ›์„ ์ด๋ฒคํŠธ๋ช…", function (๋ฐ์ดํ„ฐ) {
  // ๋ฐ›์€ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ
  socket.emit("์„œ๋ฒ„๋กœ ๋ณด๋‚ผ ์ด๋ฒคํŠธ๋ช…", ๋ฐ์ดํ„ฐ);
});

io("์ฃผ์†Œ", { ์„ค์ •๋ช…: "์„ค์ •๊ฐ’" }); // ํด๋ผ์ด์–ธํŠธ ์„ค์ •

SocketIo(server, { ์„ค์ •๋ช…: "์„ค์ •๊ฐ’" }); // ์„œ๋ฒ„ ์„ค์ •



  • ๐Ÿ’ก ์ „์ฒด : ํด๋ผ์ด์–ธํŠธ์—์„œ socket.on('์ด๋ฒคํŠธ๋ช…', ์ฝœ๋ฐฑ)๋ฅผ ๋“ฑ๋กํ•ด ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ์˜ค๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๋Š” ํŽ˜์ด์ง€ ์ „๋ถ€๋ฅผ ์˜๋ฏธ
io.emit("์ด๋ฒคํŠธ๋ช…", ๋ฐ์ดํ„ฐ);

io.sockets.emit("์ด๋ฒคํŠธ๋ช…", ๋ฐ์ดํ„ฐ);



  • ๐Ÿ’ก ๋„ค์ž„์ŠคํŽ˜์ด์Šค : ์ „์ฒด์—๊ฒŒ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๋Š” ๊ฒƒ์€ ์‚ฌ์‹ค / ๋„ค์ž„์ŠคํŽ˜์ด์Šค์—๊ฒŒ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๋Š” ๊ฒƒ์ž„. ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ๋ฐ”๊พธ๋ ค๋ฉด ์„œ๋ฒ„์—์„œ๋Š” of ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉ
const chat = io.of('/chat');
chat.on('connection', (socket) => {
  ...
});

ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š” ์—ฐ๊ฒฐ ์‹œ ์ฃผ์†Œ๋ฅผ ๋ฐ”๊ฟ”์ค˜์•ผํ•จ. ์ฃผ์†Œ ๋’ค์— ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ๋ถ™์—ฌ์คŒ

io.connect("์ฃผ์†Œ/chat", ์„ค์ •);

์ด๋ ‡๊ฒŒ ํ•˜๋Š” ์ด์œ ๋Š” ํ•„์š”ํ•œ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋งŒ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๊ธฐ ์œ„ํ•จ




  • ๐Ÿ’ก ๋‚˜๋ฅผ ์ œ์™ธํ•œ ์ „์ฒด

๋‚˜๋ฅผ ์ œ์™ธํ•œ ์ „์ฒด์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์ž„. io๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  socket ์•ˆ์— ์žˆ๋Š” broadcast ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉ

socket.broadcast.emit("์ด๋ฒคํŠธ๋ช…", ๋ฐ์ดํ„ฐ);



  • ๐Ÿ’ก ํŠน์ •์ธ

ํŠน์ • ํ•œ ์‚ฌ๋žŒ์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Œ. ๊ท“์†๋ง๊ฐ™์€ ๊ฒƒ์ด๋‚˜ 1๋Œ€1 ์ฑ„ํŒ…์„ ๊ตฌํ˜„ํ•  ๋•Œ ์‚ฌ์šฉ

io.to(์†Œ์ผ“์•„์ด๋””).emit('์ด๋ฒคํŠธ๋ช…' ๋ฐ์ดํ„ฐ);

์ž์‹ ์˜ ์†Œ์ผ“์•„์ด๋””๋Š” socket.id๋ฅผ ํ†ตํ•ด ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ด๋ ค๋ฉด ๊ทธ ์‚ฌ๋žŒ์˜ ์†Œ์ผ“ ์•„์ด๋””๊ฐ€ ํ•„์š”ํ•œ๋ฐ ์ด ๋•Œ๋Š” ๋ฐ์ดํ„ฐ์— ์ž์‹ ์˜ ์†Œ์ผ“ ์•„์ด๋””๋ฅผ ๋„ฃ์–ด ์ „๋‹ฌํ•ด์ค˜์„œ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ž์‹ ์—๊ฒŒ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.




  • ๐Ÿ’ก ํŠน์ • ๊ทธ๋ฃน

ํŠน์ • ๊ทธ๋ฃน์—๊ฒŒ๋„ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Œ. ๋Œ€์‹  ์‚ฌ๋žŒ๋“ค์„ ๊ทธ ๊ทธ๋ฃน์— ๋จผ์ € ๋“ค์–ด์•ผ๊ฐ€ ํ•จ. ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ณด๋‹ค๋Š” ์ž‘์€ ๊ฐœ๋…์ž„. ๋„ค์ž„์ŠคํŽ˜์ด์Šค ์•ˆ์— ๊ทธ๋ฃน์„ ๋งŒ๋“œ๋Š” ์…ˆ

socket.join(๋ฐฉ์˜ ์•„์ด๋””); // ๊ทธ๋ฃน์— ๋“ค์–ด๊ฐ€๊ธฐ
socket.leave(๋ฐฉ์˜ ์•„์ด๋””); // ๊ทธ๋ฃน ๋– ๋‚˜๊ธฐ

๋ฐฉ์˜ ์•„์ด๋””๋Š” ๋‹จ์ˆœํžˆ ๋ฌธ์ž์—ด์ผ ๋ฟ์ด๋ผ์„œ ์•„๋ฌด ๊ฑฐ๋‚˜ ์ƒ์„ฑํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด ๋ฐฉ์˜ ์•„์ด๋””๊ฐ€ 'room01'์ผ ๊ฒฝ์šฐ ๋‘ ๋ช… ์ด์ƒ์ด 'room01'์— joinํ•˜๋ฉด ๊ทธ๋ฃน ์ฑ„ํŒ…์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”์„ธ์ง€๋Š” ๊ทธ๋ฃน ์ „์ฒด์—๊ฒŒ ๋ณด๋‚ด๋Š” ๋ฐฉ์‹๊ณผ ๋‚˜๋ฅผ ์ œ์™ธํ•œ ๊ทธ๋ฃน ์ „์ฒด์—๊ฒŒ ๋ณด๋‚ด๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค.

io.to(๋ฐฉ์˜ ์•„์ด๋””).emit('์ด๋ฒคํŠธ๋ช…', ๋ฐ์ดํ„ฐ); // ๊ทธ๋ฃน ์ „์ฒด
socket.broadcast.to(๋ฐฉ์˜ ์•„์ด๋””).emit('์ด๋ฒคํŠธ๋ช…', ๋ฐ์ดํ„ฐ); // ๋‚˜๋ฅผ ์ œ์™ธํ•œ ๊ทธ๋ฃน ์ „์ฒด



  • ๐Ÿ’ก ๊ทธ๋ฃน์˜ ๋ชฉ๋ก๊ณผ ๊ทธ๋ฃน ์•ˆ์˜ ์†Œ์ผ“๋“ค์„ ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ•
io.adapter.rooms;
io.of(๋„ค์ž„์ŠคํŽ˜์ด์Šค).adapter.rooms;
socket.adapter.rooms;

ํ•œ๊ฐ€์ง€ ํŒ์„ ๋“œ๋ฆฌ์ž๋ฉด, ์œ„์˜ ๋ฐฉ๋ฒ•๋Œ€๋กœ ์ฐธ์—ฌ ์ธ์› ์ˆ˜๋‚˜ ๋ฐฉ์˜ ์ˆ˜๋ฅผ ๊ตฌํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ์•ˆ์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„ ์ƒ์—์„œ ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด ๋ฐฉ์˜ ์•„์ด๋””๋ฅผ ๋ชจ์•„๋‘๋Š” ๊ฒƒ์ด ํŽธํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐฉ ์•ˆ์—๋Š” ์ฐธ์—ฌํ•œ ์‚ฌ๋žŒ๋“ค์˜ ์†Œ์ผ“ ์•„์ด๋””๋ฅผ ๋„ฃ์–ด๋‘๊ณ ์š”.

[
{ \_id: 'room01', members: ['zero_id', 'aero_id']},
{ \_id: 'room02', members: ['nero_id', 'hero_id']},
]

์ด๋Ÿฐ ์‹์œผ๋กœ์š”. ์„œ๋ฒ„๊ฐ€ ๊บผ์ง€์ง€ ์•Š๋Š” ์ด์ƒ ์ € ๋ฐฐ์—ด์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์ฒ˜๋Ÿผ ๋™์ž‘ํ•  ๊ฒ๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ์„œ๋ฒ„์˜ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‚ ์•„๊ฐˆ ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์—๋Š” ์ € ๋ถ€๋ถ„์„ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ์—ฐ๊ฒฐํ•˜์—ฌ ๋ฐฉ์˜ ๋ชฉ๋ก๊ณผ ๋ฉค๋ฒ„๋ฅผ ์˜๊ตฌ์ ์œผ๋กœ ์ €์žฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Socket.io ๋” ์•Œ์•„๋ณด๊ธฐ


  • @socket.io/admin-ui

    • Socket.IO ๊ด€๋ฆฌ UI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Socket.IO ๋ฐฐํฌ ์ƒํƒœ์— ๋Œ€ํ•œ ๊ฐœ์š”๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Œ

  • โญ WebRTC(Peer2Peer)

[Peer2Peer]


  • express

    • ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ์ผ๋ จ์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฐ„๊ฒฐํ•˜๊ณ  ์œ ์—ฐํ•œ Node.js ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ

  • localtunnel

    • ๋กœ์ปฌ ์„œ๋ฒ„์— ๋Œ€ํ•œ ๋ณด์•ˆ ์•ก์„ธ์Šค ์ƒ์„ฑ, ์–ด๋””์„œ๋“  ์›ํ•˜๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์Œ

  • pug

    • ํ…œํ”Œ๋ฆฟ ์—”์ง„

    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ HTML์„ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์คŒ


  • ws

    • ์›น ์†Œ์ผ“์€ ์‹ค์‹œ๊ฐ„ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ์ „์†ก์„ ์œ„ํ•œ ๊ธฐ์ˆ ๋กœ์„œ, ws ํ”„๋กœํ† ์ฝœ ์‚ฌ์šฉํ•˜์—ฌ ํ†ต์‹ 

    • ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋Š” ๋Œ€๋ถ€๋ถ„ ์›น ์†Œ์ผ“์„ ์ง€์›ํ•˜๋ฉฐ, ๋…ธ๋“œ๋Š” ws๋‚˜ Socket.IO๊ฐ™์€ ํŒจํ‚ค์ง€๋ฅผ ํ†ตํ•ด ์›น ์†Œ์ผ“ ์‚ฌ์šฉ ๊ฐ€๋Šฅ