junbin2 2024. 12. 8. 14:18

WebSocket

IETF(๊ตญ์ œ ์ธํ„ฐ๋„ท ํ‘œ์ค€ํ™” ๊ธฐ๊ตฌ)

- HTTP ํ”„๋กœํ† ์ฝœ์˜ ์ตœ์‹ ํ™” ๋ฐ ์—…๋ฐ์ดํŠธ ์ž‘์—…์€ IETF(Internet Engineering Task Force)**๊ฐ€ ์ฃผ๋„ํ•˜๊ณ  ์žˆ๋‹ค.

- IETF ์‚ฐํ•˜ HTTP Working Group์€ HTTP์˜ ๊ฐœ์„ ๊ณผ ํ‘œ์ค€ํ™”๋ฅผ ๋‹ด๋‹นํ•˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๋ฒ„์ „๊ณผ ๊ด€๋ จ ๊ธฐ์ˆ ๋“ค์ด ์ •์˜๋˜๊ณ  ๋ฐฐํฌ๋˜๋ฉฐ, ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋Ÿฌํ•œ HTTP ํ‘œ์ค€์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ, ์ƒˆ๋กœ์šด ํ‘œ์ค€์— ๋งž์ถฐ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋˜๊ฒŒ ๋œ๋‹ค.

 

์ด๋Ÿฌํ•œ, IETF์—์„œ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์˜ ํ•„์š”์„ฑ์„ ๋А๊ปด WebSocket ํ”„๋กœํ† ์ฝœ์„ ๋งŒ๋“ค์—ˆ๊ณ , HTTP ํ”„๋กœํ† ์ฝœ ๊ธฐ๋ฐ˜์œผ๋กœ ์—ฐ๊ฒฐ์„ ์„ค์ • ํ•˜๊ณ , ์ดํ›„์— WebSocket ํ”„๋กœํ† ์ฝœ๋กœ ์ „ํ™˜๋˜์–ด ์‹ค์‹œ๊ฐ„ ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

 

HTTP -> WebSocket ์ „ํ™˜ ๊ณผ์ •

1. HTTP ์š”์ฒญ ํ—ค๋”์— Upgrade: websocket๊ณผ Connection: Upgrade์„ ํฌํ•จํ•ด์„œ WebSocket ์—ฐ๊ฒฐ ์š”์ฒญ

GET /chat HTTP/1.1
Host: example.com
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: http://example.com

2. ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ์„ ๋ฐ›์•„ WebSocket ์—…๊ทธ๋ ˆ์ด๋“œ ์š”์ฒญ ์ˆ˜๋ฝ ๋ฐ HTTP 101 ์ƒํƒœ ์ฝ”๋“œ๋กœ ์‘๋‹ต

- ์ด๋•Œ, Upgrade: websocket๊ณผ Connection: Upgrade ํ—ค๋”๊ฐ€ ํฌํ•จ๋˜์–ด ์‘๋‹ต์ด ๊ฐ€๊ฒŒ ๋จ.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: dGhlIHNhbXBsZSBub25jZQ==

3. ์ด๋ ‡๊ฒŒ HandShack๊ฐ€ ๋๋‚œ ๋’ค WebSocket ํ”„๋กœํ† ์ฝœ๋กœ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ†ต์‹ ์„ ํ•˜๊ฒŒ ๋จ.

์—ฐ๊ฒฐ์ด ์™„๋ฃŒ๋˜๋ฉด ๋” ์ด์ƒ HTTP๋Š” ์‚ฌ์šฉ๋˜์ง€ ์•Š์œผ๋ฉฐ, WebSocket ํ”„๋กœํ† ์ฝœ๋กœ ํ†ต์‹ ์„ ํ•˜๊ฒŒ ๋œ๋‹ค.

์‰ฝ๊ฒŒ ๋งํ•ด, ์›๋ž˜ HTTP ๋ฉ”์‹œ์ง€ ํ˜•ํƒœ๋กœ ๋ณด๋‚ด๋˜ ๋ฐ์ดํ„ฐ๋ฅผ WebSocket ๋ฉ”์‹œ์ง€ ํ˜•ํƒœ๋กœ ๋ณด๋‚ด๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

- ํ•ด๋‹น WebSocket ๋ฉ”์‹œ์ง€ ํ˜•ํƒœ๋Š” WebSocket ํ”„๋ ˆ์ž„์ด๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค.

 

์„œ๋ฒ„๋Š” ์†Œ์ผ“ ์„ธ์…˜์„ ์ƒ์„ฑํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์˜ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ฒŒ ๋œ๋‹ค( ์ฆ‰, ์œ ์ง€ํ•˜๊ฒŒ ๋จ (Stateful) )

 

WebSocket์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

HTTP๋กœ ์‹ค์‹œ๊ฐ„์„ ๊ตฌํ˜„ํ•˜๊ธฐ์—๋Š” 3 way handshake๋กœ ๋น„์šฉ์ด ๋„ˆ๋ฌด ๋งŽ์ด ๋“ค๊ธฐ ๋•Œ๋ฌธ์— ์–‘๋ฐฉํ–ฅ์„ ์‚ฌ์šฉํ•ด ์‹ค์‹œ๊ฐ„์„ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜๋ฉด ์š”์ฒญ๊ณผ ์‘๋‹ต์— ๋Œ€ํ•œ ๋น„์šฉ์ด ๋“ค์ง€ ์•Š๋Š” ์žฅ์ ์ด ์žˆ๋‹ค. ๋‹จ์ ์œผ๋กœ๋Š” ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•ด์•ผ ํ•˜๋ฏ€๋กœ, ์„œ๋ฒ„ ์ž์›์„ ๋งŽ์ด ์†Œ๋น„ํ•˜๊ฒŒ ๋  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์ ์ ˆํ•œ ํ”„๋กœํ† ์ฝœ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค.

 

WebSocket ์ด์šฉ์—†์ด AJAX๋ฅผ ํ†ตํ•ด HTTP์—์„œ๋„ ์‹ค์‹œ๊ฐ„์ฒ˜๋Ÿผ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ํ•˜์ง€๋งŒ, HTTP๋Š” ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹  ํ”„๋กœํ† ์ฝœ์ด๋ฉฐ, HTTP ๋ฐฉ์‹์œผ๋กœ ์š”์ฒญ๊ณผ ์‘๋‹ต์„ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ”„๋กœํ† ์ฝœ์˜ ๊ทœ์•ฝ์ธ 3 way handshake ๊ณผ์ •์„ ์ง„ํ–‰ํ•ด์•ผํ•œ๋‹ค. ํ•ด๋‹น ๋ฐฉ์‹์€ ๋งค๋ฒˆ ์š”์ฒญ๋งˆ๋‹ค ์ง„ํ–‰์„ ํ•˜๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ ‡๋‹ค๋Š”๊ฑด, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…์„ ๊ตฌํ˜„ํ•œ๋‹ค ๊ฐ€์ •ํ•˜๋ฉด ๋งค ์ฑ„ํŒ…์š”์ฒญ ๋งˆ๋‹ค 3 way handshake๋ฅผ ํ•ด์•ผํ•œ๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋˜๊ณ , ๊ทธ๋ ‡๋‹ค๋ฉด 3 way handshake์— ๋Œ€ํ•œ ์ถ”๊ฐ€์ ์ธ ๋น„์šฉ์ด ์ง€์†์ ์œผ๋กœ ๋“ ๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋œ๋‹ค.

์ด๋Ÿฌํ•œ ๋ถ€๋ถ„ ๋•Œ๋ฌธ์— ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…์„ ์œ„ํ•ด HTTP์—์„œ ์—…๊ทธ๋ ˆ์ด๋“œ ๋œ WebSocket์ด ๋‚˜์™”์œผ๋ฉฐ, WebSocket์„ ํ†ตํ•ด ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์„ ํ•˜๊ฒŒ ๋˜๋ฏ€๋กœ ํ•œ ๋ฒˆ์˜ 3 way handshake๋ฅผ ํ†ตํ•ด ์—ฐ๊ฒฐ ์ง€์†์„ ๋ณด์žฅํ•˜๊ฒŒ ๋œ๋‹ค. ์ถ”๊ฐ€์ ์ธ ๋น„์šฉ์ด ๋“ค์ง€ ์•Š๋Š”๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

 

 

 

 

WebSocket ๊ฐ€์ด๋“œ

1. websocket.org / ์›น ์†Œ์ผ“ ๋ฐฐ๊ฒฝ ์ง€์‹

https://websocket.org/guides/road-to-websockets/

 

The Road to WebSockets

A look at how web technologies evolved since the inception of the World Wide `Web``, culminating with the emergence of WebSockets, a vastly superior improvement on HTTP for building realtime web apps.

websocket.org

2. MDN web docs

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

 

WebSocket - Web API | MDN

WebSocket ๊ฐ์ฒด๋Š” WebSocket ์„œ๋ฒ„ ์—ฐ๊ฒฐ์˜ ์ƒ์„ฑ๊ณผ ๊ด€๋ฆฌ ๋ฐ ์—ฐ๊ฒฐ์„ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์†ก์ˆ˜์‹  API๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

developer.mozilla.org