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/admin-ui
- Socket.IO ๊ด๋ฆฌ UI๋ฅผ ์ฌ์ฉํ์ฌ Socket.IO ๋ฐฐํฌ ์ํ์ ๋ํ ๊ฐ์๋ฅผ ๋ณผ ์ ์์
- โญ WebRTC(Peer2Peer)
-
express
- ์น ๋ฐ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ผ๋ จ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฐ๊ฒฐํ๊ณ ์ ์ฐํ Node.js ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ
-
localtunnel
- ๋ก์ปฌ ์๋ฒ์ ๋ํ ๋ณด์ ์ก์ธ์ค ์์ฑ, ์ด๋์๋ ์ํ๋ ์ฌ๋์๊ฒ ์ก์ธ์ค ํ ์ ์์
-
pug
-
ํ ํ๋ฆฟ ์์ง
-
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ HTML์ ๋ ๋๋งํ ์ ์๊ฒ ํด์ค
-
-
ws
-
์น ์์ผ์ ์ค์๊ฐ ์๋ฐฉํฅ ๋ฐ์ดํฐ ์ ์ก์ ์ํ ๊ธฐ์ ๋ก์, ws ํ๋กํ ์ฝ ์ฌ์ฉํ์ฌ ํต์
-
์ต์ ๋ธ๋ผ์ฐ์ ๋ ๋๋ถ๋ถ ์น ์์ผ์ ์ง์ํ๋ฉฐ, ๋ ธ๋๋ ws๋ Socket.IO๊ฐ์ ํจํค์ง๋ฅผ ํตํด ์น ์์ผ ์ฌ์ฉ ๊ฐ๋ฅ
-