BackEnd๐Ÿงต

์›น์†Œ์ผ“ ์ด๋ž€?

hae02y 2023. 10. 28. 18:22
๋ฐ˜์‘ํ˜•

์ด๋ฒˆ์— ์ง„ํ–‰ํ•˜๋Š” 2๊ฐ€์ง€ ํ”„๋กœ์ ํŠธ์—์„œ ์›น์†Œ์ผ“์„ ์ด์šฉํ•ด์„œ ์ฑ„ํŒ…๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์•ผํ•œ๋‹ค. ๊ทธ์ „์— ์›น์†Œ์ผ“์ด ๋ญ”์ง€ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž!

 

์›น์†Œ์ผ“(Web Socket)?

์›น์†Œ์ผ“ ํ”„๋กœํ† ์ฝœ์€ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ†ต์‹ ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•˜๋Š” ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ์—ฌ๊ธฐ์„œ ์ฃผ๋ชฉํ•ด์•ผํ• ์ ์€ ์‹ค์‹œ๊ฐ„์ด๋ผ๋Š” ์ ์ด๋‹ค. HTTP ํ†ต์‹ ์˜ ๊ฒฝ์šฐ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฒฝ์šฐ์—๋งŒ ์„œ๋ฒ„๊ฐ€ ์‘๋‹ตํ•˜๋Š” ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹ ์ด์ง€๋งŒ, ์›น์†Œ์ผ“์€ ์–‘๋ฐฉํ–ฅ, ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์„ ํ•œ๋‹ค.

 

๋˜ํ•œ ์›น์†Œ์ผ“์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ณ„์ธต์—์„œ ๋™์ž‘ํ•˜๋ฉฐ HTTP์™€ ๋‹ค๋ฅด๊ฒŒ ์ƒํƒœ(Stateful) ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ์—ฐ๊ฒฐ์„ ๋งบ๊ธฐ์œ„ํ•ด ํ•œ๋ฒˆ์˜ ํ•ธ๋“œ์…ฐ์ดํฌ๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ณ , ์ดํ›„์— ์ง€์†์ ์œผ๋กœ ์—ฐ๊ฒฐ์„ ๋ณด์žฅํ•œ๋‹ค. ์ด๋Š” ๋งค๋ฒˆ ๋งค์„ธ์ง€ ์ „์†ก์— ์ƒˆ๋กœ์šด ์—ฐ๊ฒฐ์„ ๋งบ์„ ํ•„์š”๊ฐ€ ์—†์–ด ํšจ์œจ์ ์ด๋‹ค.  ์ฆ‰, ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ํ•œ๋ฒˆ์— ์—ฐ๊ฒฐ์„ ๋งบ์œผ๋ฉด ๊ฐ™์€ ์—ฐ๊ฒฐ์„ ํ†ตํ•ด ํ†ต์‹ ์„ ํ•˜๋ฏ€๋กœ TCP ์ปค๋„ฅ์…˜์˜ ๋น„์šฉ์„ ์•„๋‚„์ˆ˜์žˆ๋‹ค.

 

์›น์†Œ์ผ“์€ HTTP์™€ ๊ฐ™์ด HTTP (80 port) , HTTPS (443 port) ์œ„์—์„œ ๋™์ž‘ํ•œ๋‹ค. ์ฒ˜์Œ์˜ ์—ฐ๊ฒฐ์€ HTTP ํ”„๋กœํ† ์ฝœ์„ ์ด์šฉํ•ด ํ•ธ๋“œ์…ฐ์ดํฌ๋ฅผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฐ๊ฒฐ์ด ์ •์ƒ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง€๋ฉด ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ„์˜ WebSocket ์—ฐ๊ฒฐ(TCP/IP ๊ธฐ๋ฐ˜) ์ด ์‹œ์ž‘๋œ๋‹ค. 

 

 

 

๊ทธ๋Ÿผ ์›น์†Œ์ผ“์ด ๋‚˜์˜ค๊ธฐ ์ „์—๋Š” ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์„ ํ–ˆ์„๊นŒ?

 

Polling

ํด๋ง ๋ฐฉ์‹์€ ์ผ์ •ํ•œ ์ฃผ๊ธฐ๋กœ ์„œ๋ฒ„์— request๋ฅผ ๋ณด๋‚ด๋Š” ๋ฐฉ์‹์ด๋‹ค.

setTimeout, setInterval ๋“ฑ์„ ์‚ฌ์šฉํ•ด์„œ ์ผ์ • ์ฃผ๊ธฐ๋กœ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๋ฐฉ์‹์ธ๋ฐ, ์ด๋Š” ๋ถˆํ•„์š”ํ•œ request์™€ connection์„ ์ƒ์„ฑํ•ด์„œ ์„œ๋ฒ„์— ๋ถ€๋‹ด์„ ์ค€๋‹ค. ๋˜ํ•œ ์š”์ฒญ์ฃผ๊ธฐ๊ฐ€ ์งง์•„์ง€๊ฒŒ ๋˜๋ฉด ๋ถ€ํ•˜๊ฐ€ ์ฆ๊ฐ€ํ•˜๊ฒŒ๋˜๊ณ , ์ผ์ •ํ•œ ์ฃผ๊ธฐ๋ฅผ ๋‘๊ณ  ํ†ต์‹ ์„ ํ•˜๋ฏ€๋กœ ์™„๋ฒฝํ•œ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ณด๊ธฐ ํž˜๋“ค๋‹ค. ๊ทธ๋ฆฌ๊ณ  HTTP ๊ธฐ๋ฐ˜์˜ ํ†ต์‹ ์ด๊ธฐ ๋•Œ๋ฌธ์— Request, Response ํ—ค๋”๊ฐ€ ํฌ๋‹ค.

 

ํด๋ง ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ

1. ์‘๋‹ต์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ›์„ ํ•„์š”๊ฐ€ ์—†์„๋•Œ

2. ๋‹ค์ˆ˜์˜ ์‚ฌ์šฉ์ž๊ฐ€ ๋™์‹œ์— ์‚ฌ์šฉํ• ๋•Œ

3. facebook ์›น์ฑ„ํŒ…, google๋ฉ”์‹ ์ € ๋“ฑ

 

Long Polling

๋กฑํด๋ง ๋ฐฉ์‹์€ ํด๋ง๊ณผ ๋น„์Šทํ•˜๊ฒŒ ์ผ์ •ํ•œ ์ฃผ๊ธฐ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด์ง€๋งŒ, ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต์„ ๋ฐ”๋กœ ์ „๋‹ฌํ•˜์ง€ ์•Š๋Š” ๋ฐฉ์‹์ด๋‹ค.

์š”์ฒญ์„ ๋ณด๋ƒˆ์„๋•Œ, ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต์„ ๋ฐ”๋กœ ๋ณด๋‚ด์ง€์•Š๊ณ  ํŠน์ •ํ•œ ์ด๋ฒคํŠธ๋‚˜ ํƒ€์ž„์•„์›ƒ์ด ๋ฐœ์ƒํ• ๋•Œ ์‘๋‹ต์„ ์ „๋‹ฌํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์‘๋‹ต์„ ๋ฐ›์€ ํด๋ผ์ด์–ธํŠธ๋Š” ๋‹ค์‹œ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ์ ์„ ๋ณผ๋•Œ Polling๋ณด๋‹ค ๋ถˆํ•„์š”ํ•œ ์š”์ฒญ์„ ๋ณด๋‚ด์ง€์•Š์•„ ์ข‹์•„๋ณด์ด์ง€๋งŒ, Long Polling๋„ ๋™์‹œ์ ์ธ ์š”์ฒญ๊ณผ ์‘๋‹ต์ด ์ƒ๊ธฐ๋ฉด ๋ถ€ํ•˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฐฉ๋ฒ•๋„ HTTP ๊ธฐ๋ฐ˜์˜ ํ†ต์‹ ์ด์—ฌ์„œ ํ—ค๋”๊ฐ€ ํฌ๋‹ค.

 

 Streaming

์ŠคํŠธ๋ฆฌ๋ฐ ๋ฐฉ์‹์€ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„๋•Œ ์‘๋‹ต์„ ์ฃผ๋Š”๋ฐ, ์ด๋Ÿฌํ•œ ์‘๋‹ต์„ ์™„๋ฃŒ์‹œํ‚ค์ง€ ์•Š๊ณ  ๊ณ„์† ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

Long Polling์— ๋น„ํ•ด ์‘๋‹ต๋งˆ๋‹ค ๋‹ค์‹œ ์š”์ฒญ์„ ํ•˜์ง€์•Š์•„ ํšจ์šธ์ ์ด์ง€๋งŒ, ์—ฐ๊ฒฐ์‹œ๊ฐ„์ด ๊ธธ์–ด์ง€๋ฉด ์œ ํšจ์„ฑ๊ด€๋ฆฌ๊ฐ€ ํž˜๋“ค์–ด์ง„๋‹ค. ๋˜ํ•œ HTTP ๊ธฐ๋ฐ˜์˜ ํ†ต์‹ ์ด์—ฌ์„œ ํ—ค๋”์˜ ํฌ๊ธฐ๊ฐ€ ํฌ๋‹ค.

 

์›น ์†Œ์ผ“ ํŠน์ง•

์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•์„ ๋Œ€์ฒด ํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜์˜จ ํ”„๋กœํ† ์ฝœ์ด ์›น์†Œ์ผ“ ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ๊ทธ๋Ÿผ ์ข€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด์ž. ์›น์†Œ์ผ“ ํ”„๋กœํ† ์ฝœ์˜ ์‚ฌ์–‘์€ ws(websocket) , wss(websocket secure) ์ด๋ ‡๊ฒŒ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. wss๋Š” ๋ฐ์ดํ„ฐ ๋ณด์•ˆ์„ ์œ„ํ•ด SSL์„ ์ ์šฉํ•œ ํ”„๋กœํ† ์ฝœ์ด๋‹ค. 

 

์›น์†Œ์ผ“์˜ ์†๋„๋Š” HTTP์˜ Post๋ณด๋‹ค ๋น ๋ฅด๋ฉฐ, ์ตœ์ดˆ์— ์š”์ฒญ์‹œ์— ๋ฐ˜๋“œ์‹œ Get ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ”„๋ ˆ์ž„์œผ๋กœ ๊ตฌ์„ฑ๋œ ๋ฉ”์„ธ์ง€๋ผ๋Š” ๋…ผ๋ฆฌ์ ์ธ ๋‹จ์œ„๋ฅผ ์†ก์ˆ˜์‹ ํ•œ๋‹ค. ์ด๋•Œ ๋ฉ”์„ธ์ง€์— ํฌํ•จ๋  ์ˆ˜ ์žˆ๋Š” ๊ตํ™˜ ๊ฐ€๋Šฅํ•œ ๋ฉ”์„ธ์ง€๋Š” ํ…์ŠคํŠธ์™€ ๋ฐ”์ด๋„ˆ๋ฆฌ ๋‘๊ฐœ ๋ฟ์ด๋‹ค.

 

์›น์†Œ์ผ“์˜ ํ•œ๊ณ„

1. ์›น์†Œ์ผ“์€ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์— ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š”๋‹ค.

์›น์†Œ์ผ“์€ HTML5 ์ดํ›„์— ๊ณต๊ฐœ๋˜์—ˆ๋‹ค. ์ฆ‰, HTML5 ์ด์ „์˜ ๊ธฐ์ˆ ๋กœ ๊ตฌํ˜„๋œ ์›น์„œ๋น„์Šค์—์„œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š์„์ˆ˜๋„์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜์˜จ๊ฒƒ์ด Sokcet.io , SockJS ๋“ฑ ์ด๋‹ค. ์ด๋Š” HTML5 ์ด์ „์˜ ๊ธฐ์ˆ ๋กœ ๊ตฌํ˜„๋œ ์„œ๋น„์Šค์—์„œ ์›น์†Œ์ผ“์„ ์‚ฌ์šฉํ• ์ˆ˜์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”๋ฐ ์‹ค์ œ๋กœ๋Š” ์›น์†Œ์ผ“์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ  ์›น์†Œ์ผ“์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์œ„์—์„œ ์„ค๋ช…ํ–ˆ๋˜ ๋ฐฉ๋ฒ•์„ ์›น์†Œ์ผ“๊ณผ ๊ฐ™์ด ์‹ค์‹œ๊ฐ„ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. 

 

2. ์›น์†Œ์ผ“์€ ๋ฌธ์ž์—ด๋งŒ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

 

์ด๋ฅผ ์œ„ํ•ด STOMP(Simple Text Oriented Messaging Protocol)์ด ๋“ฑ์žฅํ•œ๋‹ค. STOMP๋Š” ๋ฉ”์„ธ์ง€ ์ „์†ก์„ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ํƒ„์ƒํ•œ ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ๋ฉ”์„ธ์ง€ ๋ธŒ๋กœ์ปค๋ฅผ ์‚ฌ์šฉํ•ด ๋ฉ”์„ธ์ง€๋ฅผ Pub / Sub (๋ฐœํ–‰ ๋ฐ ๊ตฌ๋…) ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ• ์ˆ˜์žˆ๋‹ค. STOMP ํ”„๋กœํ† ์ฝœ์€ websocket ์œ„์—์„œ ๋™์ž‘ํ•˜๋ฉฐ, ๋ฉ”์„ธ์ง€์˜ ํ—ค๋”์— ๊ฐ’์„ ์ค„์ˆ˜์žˆ์–ด ํ—ค๋” ๊ฐ’์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ†ต์‹ ์‹œ ์ธ์ฆ์ฒ˜๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๊ณ , STOMP ์ŠคํŽ™์— ์ •์˜ํ•œ ๊ทœ์น™๋งŒ ์ž˜์ง€ํ‚ค๋ฉด ์—ฌ๋Ÿฌ ์–ธ์–ด ํ”Œ๋žซํผ๊ฐ„ ๋ฉ”์„ธ์ง€๋ฅผ ์ƒํ˜ธ์šด์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

 

 

 

๋ฐ˜์‘ํ˜•