๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Web Development/Back-end

HTTP VS Socket

๐Ÿ“Œ HTTP VS SOCKET ๋น„๊ต

HTTP ํ†ต์‹ 

  • ์ •์˜ : ์„œ๋ฒ„ - ํด๋ผ์ด์–ธํŠธ๊ฐ„ ํ†ต์‹ ํ•˜๊ธฐ์œ„ํ•œ ํ‘œ์ค€ ํ”„๋กœํ† ์ฝœ์ด๋‹ค. Request → Response ๊ตฌ์กฐ๋กœ ํ†ต์‹ ํ•˜๋ฉฐ ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹  ๋ฐฉ์‹์ด๋‹ค. Http์˜ ๋Œ€ํ‘œ์ ์ธ ํŠน์„ฑ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.
    • Connectionless - ๋น„์—ฐ๊ฒฐ์„ฑ ํŠน์„ฑ
      • ๋ชจ๋“  ์—ฐ๊ฒฐ์— ๋Œ€ํ•˜์—ฌ ์—ฐ๊ฒฐ์‹œ๋„ ↔ ํ•ด์ œ ๊ณผ์ •(Preflight Request & Response)์„ ๊ฑฐ์น˜๋ฉฐ ํ†ต์‹ ์„ ๊ฑฐ์นœ๋‹ค.
      • ํ†ต์‹ ์ด ์ข…๋ฃŒ๋˜๋ฉด ์—ฐ๊ฒฐ์„ ๋Š๋Š”๋‹ค.
        • ์ด๋ฅผํ†ตํ•ด ์—ฐ๊ฒฐ์œ ์ง€ ๋ฆฌ์†Œ์Šค ๋น„์šฉ์„ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ๋‹ค.
        • ํ•˜์ง€๋งŒ ๋งค ํ†ต์‹ ๋งˆ๋‹ค Preflight Request & Response ๊ณผ์ •์„ ๊ฑฐ์น˜๋ฉฐ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋ฐœ์ƒ.
        • ์ด์—, KeepAlive๋ผ๋Š” ์˜ต์…˜์ด ๋“ฑ์žฅ.
          • KeepAlive๋Š” ์ผ์ • ์‹œ๊ฐ„(์ง€์ •๋œ ์‹œ๊ฐ„) ๋™์•ˆ ํ†ต์‹ ์ด ์—†์„ ๊ฒฝ์šฐ ํŒจํ‚ท์„ ์ฃผ๊ธฐ์ ์œผ๋กœ ๋ณด๋‚ด ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐฉ์‹. ๋‹จ, ๋ฉ”๋ชจ๋ฆฌ ์ ์œ ์œจ์ด ๋†’์•„์ง€๋Š” ๋‹จ์ ์ด ์กด์žฌ.
    • Stateless
      • Connectionless๋กœ ์ธํ•ด ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ๋ฅผ ์‹๋ณ„ํ•  ์ˆ˜ ์—†๋‹ค.
      • ๋•Œ๋ฌธ์— JWT Token๋“ฑ์œผ๋กœ ์„œ๋ฒ„๋Š” ์œ ์ €์‹๋ณ„์ด ๊ฐ€๋Šฅํ–ˆ๋‹ค. ๋งค๋ฒˆ ์ƒˆ๋กœ์šด ์ธ์ฆ ๊ณผ์ •์„ ๊ฑฐ์นจ.

Socket ํ†ต์‹ 

  • ์ •์˜ : ์œ„ HTTP ํ†ต์‹ ๋ฐฉ์‹์—์„œ๋Š” 1:1 Request ↔ Response ๋ฐฉ์‹์œผ๋กœ ํ†ต์‹ ํ–ˆ๋‹ค๋ฉด, Socketํ†ต์‹ ์—์„œ๋Š” ๋‘๊ฐœ ์ด์ƒ์˜ ํ”„๋กœ์„ธ์Šค ๊ฐ„์— ์‹ค์‹œ๊ฐ„(์—ฐ๊ฒฐ์œ ์ง€) ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ํ†ต์‹ ๋ฐฉ์‹์œผ๋กœ TCP์™€ UDP๋ฅผ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    • TCP Socket
      • Three Hand Shake๋ฅผ ๊ฑฐ์น˜๋ฏ€๋กœ ๋ฐ์ดํ„ฐ ์˜ค๋ฅ˜ ๋ฐ ์ „์†ก ์ฒ˜๋ฆฌ ํ๋ฆ„์ œ์–ด๋ฅผ ๋ณด์žฅํ•œ Socket ํ†ต์‹ 
      • ์–‘๋ฐฉํ–ฅ ๋ฐ”์ดํŠธ ์ŠคํŠธ๋ฆผ ์ „์†ก, ์—ฐ๊ฒฐ ์ง€ํ–ฅ
      • ๋Œ€๋Ÿ‰์˜ ๋ฐ์ดํ„ฐ ์ „์†ก์— ์ ํ•ฉ
    • UDP Socket
      • ๋น„์—ฐ๊ฒฐํ˜• ์†Œ์ผ“
      • ๋ฐ์ดํ„ฐ ํฌ๊ธฐ์— ์ œํ•œ์ด ์กด์žฌ
      • ์ „๋‹ฌ ๋ณด์žฅ X
      • ์ฃผ๋กœ ์‹ค์‹œ๊ฐ„ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ •๋ณด์ „์†ก์— ์ ํ•ฉํ•˜๋‹ค. (Ex> Video, ์Œ์„ฑ)
    • Socket์„ ์ƒ์„ฑํ•˜๊ณ  → ํŠน์ • ํฌํŠธ์— ๋ฐ”์ธ๋”ฉํ•˜๊ณ  Listening์„ ์œ ์ง€ํ•œ๋‹ค.
    • ์ด์— ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š” Connect()๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  → ์„œ๋ฒ„๋Š” ์—ฐ๊ฒฐ์— ๋Œ€ํ•˜์—ฌ Acceptํ•œ๋‹ค.
    • ์ดํ›„ Socket์„ ํ†ตํ•ด ํ†ต์‹ ์„ ์ง„ํ–‰ํ•œ๋‹ค.
      • socket.emit(”eventName”, “Message”); - ๋ฉ”์„ธ์ง€๋ฅผ ์ „์†กํ•˜๋Š” ์—ญํ• ์„ ํ•จ.
      • socket.on(”eventName”); - ๋ฉ”์„ธ์ง€๋ฅผ ๋ฐ›๋Š” ์—ญํ• ์„ ํ•จ.
    • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ข…๋ฃŒํ•˜๊ฑฐ๋‚˜ Socket์„ ๋‹ซ์Œ์œผ๋กœ์จ ํ†ต์‹ ์ด ์ข…๋ฃŒ.๋™์ž‘๋ฐฉ์‹

  • ๋‹จ์ˆœ์š”์•ฝ ๐Ÿคฉ
    • Socket ๊ด€ ํŒŒ์ดํ”„๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž - Socket ์ƒ์„ฑ
    • ์ด ํŒŒ์ดํ”„๋ฅผ ๊ท€๋ฅผ ๋Œ€๊ณ  ๋“ฃ๊ณ ์žˆ๋‹ค - socket.on
    • ์—ฌ๊ธฐ์— ๋Œ€๊ณ  ์†Œ๋ฆฌ๋ฅผ ์งˆ๋Ÿฌ ๋ง์„ํ•œ๋‹ค. - socket.emit
    • BroadCast 1: N

 

๐Ÿ“Œ ์•Œ๊ณ ๊ฐ€์ž Polling !

  • Polling ์ด๋ž€ ?
    • Real Time ์„ ์œ„ํ•œ ๊ธฐ๋ฒ•์œผ๋กœ ์ผ์ • ์ฃผ๊ธฐ๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„ Request ↔ Response๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ๋ฐฉ์‹.
    • ๋ฌธ์ œ์ 
      • åํด๋ง ์ฃผ๊ธฐ๊ฐ€ ์งง์„ ์ˆ˜๋ก ํŒจํ‚ท๊ตํ™˜์ด ๋งŽ์ด ์ผ์–ด๋‚˜๋ฏ€๋กœ ๋‹น์—ฐํžˆ ์„œ๋ฒ„๋ถ€ํ•˜๋ฌธ์ œ๋ฐœ์ƒ.
      • ์ด์— ๋กฑํด๋ง ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•ด์„œ (์ฃผ๊ธฐ๋ฅผ ๊ธธ๊ฒŒํ•จ) ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ฃผ๊ธฐ๊ฐ€ ๊ธธ์ˆ˜๋ก ์‹ค์‹œ๊ฐ„์„ฑ ์‚ฌ๋ผ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์—ฌ์ „ํžˆ ์กด์žฌํ•จ.
    •