Peerjs: ์—ฐ๊ฒฐ ํ›„

์— ๋งŒ๋“  2019๋…„ 06์›” 25์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: peers/peerjs

์šฐ์„ : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ด๋ฒคํŠธ ํƒ€์ด๋ฐ์— ๋Œ€ํ•œ ์ œ ์ง€์‹์ด ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ œ๊ฐ€ ์š”์ฒญํ•œ ๋‚ด์šฉ์ด ๋ถ„๋ช…ํ•ด ๋ณด์ธ๋‹ค๋ฉด ์‚ฌ๊ณผ๋ฅผ ๋ฐ›์•„์ฃผ์„ธ์š”.

ํ”ผ์–ด A๊ฐ€ DataConnection.on('connection', function() {...}) ๋ฅผ ํ†ตํ•ด ๋‹ค๋ฅธ ํ”ผ์–ด B์˜ ์—ฐ๊ฒฐ์„ ์ฒ˜๋ฆฌํ•  ๋•Œ ํ•ด๋‹น ์—ฐ๊ฒฐ์€ ํ•ธ๋“ค๋Ÿฌ ๋‚ด์—์„œ ์ค€๋น„๋œ ๊ฒƒ์ž…๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋ฐ˜ํ™˜๋œ ํ›„ ์™„์ „ํžˆ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚ด ๋ง์€: ์ด ์ฝ”๋“œ์—์„œ์ฒ˜๋Ÿผ A๊ฐ€ B์—๊ฒŒ ๋ฐ์ดํ„ฐ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

peerA.on('connection', function(c) {
    // do something
    c.send("Welcome! (will this message ever got delivered?)");
    // do something else
});

๋งŒ์•ฝ ์ด๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด 'afterconnection' ์ด๋ฒคํŠธ๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ์ข‹์ง€ ์•Š์„๊นŒ์š”? ์•„๋‹ˆ๋ฉด ๋‹ค์Œ ์ฝ”๋“œ๊ฐ€ ์ž‘๋™ํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋ฉ๋‹ˆ๊นŒ?

peerA.on('connection', function(c) {
    // do something
    setTimeout(function() {
        c.send("Welcome! (will this message ever got delivered?)");
    }, 0);
});

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

  1. v1๊ณผ ๊ฐ™์€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ˆ„๊ฐ€ ์—ฐ๊ฒฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ๊ตฌ๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋„ค! ๋ฐฉ๊ธˆ ๊ทธ ๊ธฐ๋Šฅ์„ ๊ณ„ํš์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฌ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. AudioContext๋ฅผ ํ†ตํ•ด ์ผ๋ถ€(๋กœ์ปฌ) ์˜ค๋””์˜ค ์ฒ˜๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ์›๊ฒฉ ๋ฐ ๋กœ์ปฌ ์ŠคํŠธ๋ฆผ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” ํ—ค๋“œ์…‹์˜ L ์ฑ„๋„์—์„œ ํ”ผ์–ด B๋ฅผ ๋“ฃ๊ณ  R ์ฑ„๋„์—์„œ C๋ฅผ ๋“ฃ๊ณ  ๊ฐ๊ฐ์˜ ๋ณผ๋ฅจ์„ ๋…๋ฆฝ์ ์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ํ”ผ์–ด A๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  B์™€ C ๋ชจ๋‘ ๋งˆ์ดํฌ๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๋Š”์ง€ ์ง€์†์ ์œผ๋กœ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ธฐ ์œ„ํ•ด ๋งˆ์ดํฌ์— ์—ฐ๊ฒฐ๋œ vu-๋ฏธํ„ฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ ์ด ๊ธฐ๋Šฅ์„ ๋ถ€๋ถ„์ ์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์œผ๋ฉฐ ์œ ์ง€ํ•ด์•ผ ํ•จ).

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

์ŠคํŠธ๋ฆผ์„ ๋ณด๋‚ด๊ธฐ ์ „์— ์ฒ˜๋ฆฌํ•œ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ๊ตฌํ˜„๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  1. ๋ฐ์ดํ„ฐ ์ฑ„๋„์„ ํ…Œ์ŠคํŠธํ•˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๋ฏธ๋””์–ด ์ฑ„๋„๊ณผ ๋™์ผํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ ์—ฐ๊ฒฐ์—์„œ onDataStream์ด ์‹คํ–‰๋˜๋Š” ๊ฐ ํ”ผ์–ด ๊ฐ„์˜ 1-1 ์—ฐ๊ฒฐ? ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์‹œ์ง€๋Š” ๊ฐ ํ”ผ์–ด์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ „์†ก๋ฉ๋‹ˆ๊นŒ?

์˜ˆ, ์—ฐ๊ฒฐ๋œ ํ”ผ์–ด๋‹น ํ•˜๋‚˜์”ฉ ์›์‹œ dataChannels๋ฅผ ์ˆ˜์‹ ํ•ฉ๋‹ˆ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ธฐ๋Šฅ๊ณผ๋„ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

  1. ํ”ผ์–ด ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค๋Š” ์†Œ์‹์„ ๋“ฃ๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ wss://broker.peerjs.com ์€ ๋ฌด์—‡์„ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

PeerJS๋Š” ์ดˆ๊ธฐ ์‹ ํ˜ธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ์ฑ„๋„์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ PeerServer๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹  ๋ชจ๋“  ๋กœ์ง์ด PeerJS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด์—์„œ ๋งŒ๋“ค์–ด์ง€๋ฉฐ MQTT ๋ธŒ๋กœ์ปค๋งŒ ์žˆ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์—ฌ์ „ํžˆ ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€๋งŒ MQTT๋Š” ํ‘œ์ค€ ํ”„๋กœํ† ์ฝœ์ด๋ฏ€๋กœ ๋ธŒ๋กœ์ปค๋ฅผ ์„ค์ •ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ(์˜ˆ: v1)์— ์•„๋ฌด๊ฒƒ๋„ ์ €์žฅ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์™„์ „ํžˆ ํ™•์žฅ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  7 ๋Œ“๊ธ€

ํ•ธ๋“ค๋Ÿฌ์—์„œ ์‚ฌ์šฉํ•  ์ค€๋น„๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. "์—ฐ๊ฒฐ ์‹œ์ž‘" ์ด๋ฒคํŠธ๋Š” ๊ทธ๋‹ค์ง€ ์œ ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ๊ฒฝ์šฐ์— ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ๊ฐœ๋ฐœ ์ค‘์ธ ํ”„๋กœ์ ํŠธ์—์„œ ํ•œ ๊ฐ€์ง€ ๋ฌธ์ œ๋Š” ์›์น˜ ์•Š๋Š” ์—ฐ๊ฒฐ์„ ํ”ผํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ•™์ƒ, ์—ฐ์‚ฌ, ๊ต์‚ฌ์˜ ์„ธ ๊ฐ€์ง€ ์—ญํ• ์ด ์žˆ์Šต๋‹ˆ๋‹ค(ํ”ผ์–ด๋ฅผ ๋“ฑ๋กํ•  ๋•Œ ์˜ต์…˜ ๋ฐฐ์—ด์—์„œ ์—ญํ• ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ํ”Œ๋ž˜๊ทธ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค). ์„ ์ƒ๋‹˜์€ ์ž์‹ ์ด ์•Œ๊ณ  ์žˆ๋Š” ์ž์‹ ์˜ ์•„์ด๋””๋กœ ์„œ๋ฒ„์— ์ ‘์†ํ•˜์—ฌ ๋ฐœํ‘œ์ž์™€ ํ•™์ƒ์„ ๊ธฐ๋‹ค๋ฆฝ๋‹ˆ๋‹ค. ๋ชจ๋‘ ์—ฐ๊ฒฐ๋˜๋ฉด ์ถ”๊ฐ€ ์—ฐ๊ฒฐ์„ ํ”ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
v2.0.0์—์„œ ๊ตฌํ˜„ํ•œ ๊ฑฐ๋ถ€๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•ด์•ผ ํ•˜์ง€๋งŒ API์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ƒ๋‹นํžˆ ๊ณผ๊ฒฉํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์˜ˆ, ์ƒˆ ๋ฒ„์ „์€ ์‹œ์žฅ ๋ฒ„์ „์ž…๋‹ˆ๋‹ค(์ค‘๋‹จ, ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ ์—†์Œ). ์ด์ „ API๋Š” ์ƒ๋‹นํžˆ ํ˜ผ๋ž€์Šค๋Ÿฝ๊ณ  ์ฝ”๋“œ์—๋Š” 2013๋…„ ์ฒซ ๋‚ ๋ถ€ํ„ฐ ๋งŽ์€ ๋ ˆ๊ฑฐ์‹œ ํŠธ๋ฆญ์ด ์žˆ์–ด ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋ธŒ๋ ˆ์ดํ‚น ์ฒด์ธ์ง€์ด๋ฏ€๋กœ ์ด์ „ ๋ฒ„์ „์„ ๊ณ„์† ์ง€์›ํ•  ๊ฒƒ์ด๋ฏ€๋กœ v1์—์„œ ๊ฑฐ๋ถ€์˜ ์ผ๋ถ€ ๋ฐฉ๋ฒ•์„ ๊ตฌํ˜„ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์–ด์จŒ๋“  ์•„์ฃผ ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋ฉด v2๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์•ˆ์ •์„ฑ์ด ํ–ฅ์ƒ๋˜๊ณ  PeerServer๋ฅผ ํ˜ธ์ŠคํŒ…ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

v2์—์„œ๋Š” ์•„์ง ๊ฑฐ์ ˆ์ด ์™„๋ฃŒ๋˜์ง€ ์•Š์•˜์ง€๋งŒ v2 ๊ฐœ๋ฐœ์— ์ง‘์ค‘ํ•˜๊ณ  ์žˆ์–ด ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ๊ณง ์ค€๋น„๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹น์‹ ์ด v2์— ๋Œ€ํ•ด ์ œ๊ณตํ•œ ์˜ˆ์ œ๋ฅผ ๋ณด์•˜๊ณ  ์ •๋ง ์ธ์ƒ์ ์ž…๋‹ˆ๋‹ค: ๋ช‡ ์ค„์˜ ์ฝ”๋“œ๋กœ ๊ฐ„๋‹จํ•œ ์ผ๋Œ€์ผ ์ฑ„ํŒ…! ๋˜ํ•œ ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ์•ฝ๊ฐ„ ์ˆ˜์ •ํ–ˆ๋Š”๋ฐ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋ฐฉ์— ์ฐธ์—ฌํ•  ๋•Œ๋งˆ๋‹ค ๊ฐ ํ”ผ์–ด์—์„œ onRemoteStream์ด ์‹คํ–‰๋˜์–ด ๋Œ€์—ญํญ์ด ์ง€์›ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๋ฏธ๋””์–ด ์—ฐ๊ฒฐ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™€์šฐ!!!

๋ช‡ ๊ฐ€์ง€ ์งˆ๋ฌธ:

  1. v1๊ณผ ๊ฐ™์€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ˆ„๊ฐ€ ์—ฐ๊ฒฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ๊ตฌ๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
  2. AudioContext๋ฅผ ํ†ตํ•ด ์ผ๋ถ€(๋กœ์ปฌ) ์˜ค๋””์˜ค ์ฒ˜๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ์›๊ฒฉ ๋ฐ ๋กœ์ปฌ ์ŠคํŠธ๋ฆผ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” ํ—ค๋“œ์…‹์˜ L ์ฑ„๋„์—์„œ ํ”ผ์–ด B๋ฅผ ๋“ฃ๊ณ  R ์ฑ„๋„์—์„œ C๋ฅผ ๋“ฃ๊ณ  ๊ฐ๊ฐ์˜ ๋ณผ๋ฅจ์„ ๋…๋ฆฝ์ ์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ํ”ผ์–ด A๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  B์™€ C ๋ชจ๋‘ ๋งˆ์ดํฌ๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๋Š”์ง€ ์ง€์†์ ์œผ๋กœ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ธฐ ์œ„ํ•ด ๋งˆ์ดํฌ์— ์—ฐ๊ฒฐ๋œ vu-๋ฏธํ„ฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ ์ด ๊ธฐ๋Šฅ์„ ๋ถ€๋ถ„์ ์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์œผ๋ฉฐ ์œ ์ง€ํ•ด์•ผ ํ•จ).
  3. ๋ฐ์ดํ„ฐ ์ฑ„๋„์„ ํ…Œ์ŠคํŠธํ•˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๋ฏธ๋””์–ด ์ฑ„๋„๊ณผ ๋™์ผํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ ์—ฐ๊ฒฐ์—์„œ onDataStream์ด ์‹คํ–‰๋˜๋Š” ๊ฐ ํ”ผ์–ด ๊ฐ„์˜ 1-1 ์—ฐ๊ฒฐ? ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์‹œ์ง€๋Š” ๊ฐ ํ”ผ์–ด์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ „์†ก๋ฉ๋‹ˆ๊นŒ?
  4. ํ”ผ์–ด ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค๋Š” ์†Œ์‹์„ ๋“ฃ๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ wss://broker.peerjs.com ์€ ๋ฌด์—‡์„ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

์ถ”์‹ : ๋ฐฉ๋‹น ์ตœ๋Œ€ ํ”ผ์–ด ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ๋กœ๋“œ๋งต ๊ณ„ํš์„ ์—…๋ฐ์ดํŠธํ•œ ๊ฒƒ์„ ๋ณด์•˜๋Š”๋ฐ, ์ด๊ฒƒ์ด ์ œ๊ฐ€ ์ •๋ง ํ•„์š”๋กœ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค!

  1. v1๊ณผ ๊ฐ™์€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ˆ„๊ฐ€ ์—ฐ๊ฒฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ๊ตฌ๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋„ค! ๋ฐฉ๊ธˆ ๊ทธ ๊ธฐ๋Šฅ์„ ๊ณ„ํš์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฌ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. AudioContext๋ฅผ ํ†ตํ•ด ์ผ๋ถ€(๋กœ์ปฌ) ์˜ค๋””์˜ค ์ฒ˜๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ์›๊ฒฉ ๋ฐ ๋กœ์ปฌ ์ŠคํŠธ๋ฆผ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” ํ—ค๋“œ์…‹์˜ L ์ฑ„๋„์—์„œ ํ”ผ์–ด B๋ฅผ ๋“ฃ๊ณ  R ์ฑ„๋„์—์„œ C๋ฅผ ๋“ฃ๊ณ  ๊ฐ๊ฐ์˜ ๋ณผ๋ฅจ์„ ๋…๋ฆฝ์ ์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ํ”ผ์–ด A๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  B์™€ C ๋ชจ๋‘ ๋งˆ์ดํฌ๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๋Š”์ง€ ์ง€์†์ ์œผ๋กœ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ธฐ ์œ„ํ•ด ๋งˆ์ดํฌ์— ์—ฐ๊ฒฐ๋œ vu-๋ฏธํ„ฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ ์ด ๊ธฐ๋Šฅ์„ ๋ถ€๋ถ„์ ์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์œผ๋ฉฐ ์œ ์ง€ํ•ด์•ผ ํ•จ).

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

์ŠคํŠธ๋ฆผ์„ ๋ณด๋‚ด๊ธฐ ์ „์— ์ฒ˜๋ฆฌํ•œ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ๊ตฌํ˜„๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  1. ๋ฐ์ดํ„ฐ ์ฑ„๋„์„ ํ…Œ์ŠคํŠธํ•˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๋ฏธ๋””์–ด ์ฑ„๋„๊ณผ ๋™์ผํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ ์—ฐ๊ฒฐ์—์„œ onDataStream์ด ์‹คํ–‰๋˜๋Š” ๊ฐ ํ”ผ์–ด ๊ฐ„์˜ 1-1 ์—ฐ๊ฒฐ? ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์‹œ์ง€๋Š” ๊ฐ ํ”ผ์–ด์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ „์†ก๋ฉ๋‹ˆ๊นŒ?

์˜ˆ, ์—ฐ๊ฒฐ๋œ ํ”ผ์–ด๋‹น ํ•˜๋‚˜์”ฉ ์›์‹œ dataChannels๋ฅผ ์ˆ˜์‹ ํ•ฉ๋‹ˆ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ธฐ๋Šฅ๊ณผ๋„ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

  1. ํ”ผ์–ด ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค๋Š” ์†Œ์‹์„ ๋“ฃ๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ wss://broker.peerjs.com ์€ ๋ฌด์—‡์„ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

PeerJS๋Š” ์ดˆ๊ธฐ ์‹ ํ˜ธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ์ฑ„๋„์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ PeerServer๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹  ๋ชจ๋“  ๋กœ์ง์ด PeerJS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด์—์„œ ๋งŒ๋“ค์–ด์ง€๋ฉฐ MQTT ๋ธŒ๋กœ์ปค๋งŒ ์žˆ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์—ฌ์ „ํžˆ ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€๋งŒ MQTT๋Š” ํ‘œ์ค€ ํ”„๋กœํ† ์ฝœ์ด๋ฏ€๋กœ ๋ธŒ๋กœ์ปค๋ฅผ ์„ค์ •ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ(์˜ˆ: v1)์— ์•„๋ฌด๊ฒƒ๋„ ์ €์žฅ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์™„์ „ํžˆ ํ™•์žฅ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ข‹์€ ์†Œ์‹! ๋‚˜๋Š” ํ™•์‹คํžˆ v1์—์„œ v2๋กœ ์ „ํ™˜ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค. ๋งค์šฐ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋†€๋ผ์šด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰