Vibe.ai
article thumbnail
λ°˜μ‘ν˜•

μ΄λ²ˆμ— μ§„ν–‰ν•˜λŠ” 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 μŠ€νŽ™μ— μ •μ˜ν•œ κ·œμΉ™λ§Œ μž˜μ§€ν‚€λ©΄ μ—¬λŸ¬ μ–Έμ–΄ ν”Œλž«νΌκ°„ λ©”μ„Έμ§€λ₯Ό μƒν˜Έμš΄μš© κ°€λŠ₯ν•˜λ‹€.

 

 

 

 

λ°˜μ‘ν˜•
profile

Vibe.ai

@hai02y

ν¬μŠ€νŒ…μ΄ μ’‹μ•˜λ‹€λ©΄ "μ’‹μ•„μš”β€οΈ" λ˜λŠ” "κ΅¬λ…πŸ‘πŸ»" ν•΄μ£Όμ„Έμš”!