πŸ“–
aug-note
  • 1️⃣ frontend
    • HTML / CSS
      • Simentic Tag
      • Flex
      • Grid
      • class vs id
      • Attribute vs Property
      • form
      • Tailwind
        • base, utility, component, layer
        • tailwind.config
    • React
      • Next.js
        • Next.js 15
        • Tanstack Query with Next.js
      • Library
        • react-hook-form
      • React vs Next.js
      • React Hooks
      • Redux
      • Life Cycle
      • Ref
      • Suspense
      • Hydration
      • Virtual DOM
      • Component
      • library / framework
  • 2️⃣ Flutter
    • Widget
    • pubspec.yaml
  • 3️⃣ Language
    • JavaScript
      • TypeScript
        • Generic
        • Interface, Type Alias
        • Utility Type
        • tsconfig.json
        • Schema vs Type
        • Type Guard
        • Tuple
      • JS Variables
      • Event loop
      • Arrow function
      • Ajax
      • async await
      • blocking / non-blocking
      • sync/async
      • Closure
      • Execution Context
      • Lexical Scope
      • this
      • Truthy / Falsy
      • Event
      • package manager
        • npm
        • yarn
    • Dart
      • Variables
      • Factory
  • 4️⃣ Computer Science
    • Network
      • OSI 7 Layer
      • TCP / IP
      • DNS
      • UDP
      • Load Balancing
      • http / https
      • CORS
    • OS
      • Computer Structure
      • Operating System
      • CPU Scheduling
      • Process
      • Memory Structure
      • Interrupt
      • Compile
    • Web
      • API
      • webpack
      • Barbel
      • DOM
      • SEO
      • Web Storage
      • Session / JWT
      • SSR / CSR
      • SSG
      • Web Socket
      • SPA
    • Data Structure
      • Linear Data Structure
      • Non-Linear Data Structure
    • Design Pattern
      • Flux
      • Observer
      • BFF
    • Software Engineering
      • TDD
      • OOP
    • Cloud Computing
      • K8S
  • 5️⃣ BlockChain
    • BlockChain
    • Mining
    • Smart Contract
Powered by GitBook
On this page
  1. 4️⃣ Computer Science
  2. Web

Web Socket

μ΄λ²ˆμ— μ§„ν–‰ν•˜κ²Œ 될 ν”„λ‘œμ νŠΈμ—μ„œ μ›Ή μ†ŒμΌ“μ„ μ‚¬μš©ν•  μ˜ˆμ •μΈλ°, 그전에 μ›Ή μ†ŒμΌ“μ΄ 무엇인지 μ•Œμ•„λ³΄μž.

μ›Ή μ†ŒμΌ“μ΄λž€ ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„λ₯Ό μ—°κ²°ν•˜μ—¬ μ‹€μ‹œκ°„μœΌλ‘œ μ–‘ λ°©ν–₯ 톡신 ν•  수 μžˆλ„λ‘ ν•˜λŠ” ν”„λ‘œν† μ½œμ΄λ‹€.

μš°λ¦¬κ°€ 잘 μ•Œκ³  μžˆλŠ” ν”„λ‘œν† μ½œμ˜ λŒ€ν‘œμ  μ˜ˆμ‹œκ°€ HTTP인데, μ–΄λ–€ 차이점이 μžˆλŠ”μ§€ μ‚΄νŽ΄λ³΄μž.

ν”„λ‘œν† μ½œ ( Protocol) : 데이터 톡신을 μ›ν™œν•˜κ²Œ ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ 톡신 κ·œμ•½μ„ μΌμ»«λŠ”λ‹€.

기쑴의 HTTP톡신은 statelessν•œ 단 λ°©ν–₯ 톡신이닀. HTTPμ—μ„œλŠ” ν΄λΌμ΄μ–ΈνŠΈ -> μ„œλ²„λ‘œ μš”μ²­μ„ 보내면 μ„œλ²„ -> ν΄λΌμ΄μ–ΈνŠΈλ‘œ 응닡을 보내쀀닀.

즉, ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μš”μ²­ν•˜μ§€ μ•ŠμœΌλ©΄ μ„œλ²„ μΈ‘μ—μ„œ 데이터λ₯Ό μ‘λ‹΅ν•˜μ§€ μ•Šκ³  statelessν•˜κΈ°μ—, ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ ν•œλ²ˆμ— μš”μ²­ν•΄μ•Ό ν•˜λŠ” 데이터가 λ§Žλ‹€.

λ”°λΌμ„œ μš”μ²­μ˜ μˆ˜κ°€ λ§Žμ•„μ§€λ©΄ μžμ—°μŠ€λ ˆ 응닡이 μ˜€λŠ” μ‹œκ°„μ΄ 길어지기 λ•Œλ¬Έμ— ν•„μš”ν•  λ•Œ μš”μ²­μ„ 보내고 응닡을 ν•΄μ•Ό ν•˜λŠ” μ„œλΉ„μŠ€λ₯Ό κ΅¬ν˜„ν•  λ•Œ μ‚¬μš©λœλ‹€.

κ·Έλ ‡λ‹€λ©΄ ꡬ글 Docs처럼 μ‹€μ‹œκ°„μœΌλ‘œ μ—¬λŸ¬ μ‚¬μš©μžλ“€μ΄ μ΄μš©ν•΄μ•Ό ν•˜λŠ” μ„œλΉ„μŠ€μ—λŠ” μ–΄λ–»κ²Œ ν•΄μ•Ό ν• κΉŒ? μ§€μ†μ μœΌλ‘œ μ„œλ²„μ— μš”μ²­μ„ λ³΄λ‚΄λŠ” 방법이 μžˆμ„ 수 μžˆκ² μ§€λ§Œ, μ„œλ²„μ— λΆ€ν•˜κ°€ 많이 걸리게 λœλ‹€.

Polling : μ„œλ²„μ— 일정 주기둜 μš”μ²­μ„ λ³΄λ‚΄λŠ” 것

Long Polling : μ„œλ²„μ— μš”μ²­μ„ 보내

μ—¬κΈ°μ„œ ν•„μš”ν•œ 것이 λ°”λ‘œ μ›Ή μ†ŒμΌ“μ΄λ‹€.

μ›Ή μ†ŒμΌ“μ˜ 큰 νŠΉμ§• 쀑 ν•˜λ‚˜κ°€ μ–‘ λ°©ν–₯ 톡신이닀.

즉, ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ λ³„λ„μ˜ μš”μ²­μ„ ν•˜μ§€ μ•Šμ•„λ„ μ„œλ²„ μΈ‘μ—μ„œ 데이터λ₯Ό 보내쀄 수 μžˆλ‹€λŠ” 것이닀.

λ˜ν•œ HTTP와 λ‹€λ₯΄κ²Œ μš”μ²­ μ‹œμ—λ§Œ μ—°κ²°λ˜μ–΄ μžˆλŠ” 것이 μ•„λ‹ˆλΌ μ§€μ†μ μœΌλ‘œ 연결이 λ˜μ–΄μžˆμ–΄ λΆˆν•„μš”ν•œ μ—°κ²° νŠΈλž˜ν”½μ„ ν”Όν•  수 μžˆλ‹€.

PreviousSSGNextSPA

Last updated 11 months ago