Programming/JavaScript & TypeScript

WebSocket과 Socket.IO

Bonita SY 2020. 10. 26. 19:34
728x90
반응형

WebSocket

- 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜

- 2011년 IETF에 의해 RFC6455로 표준화

- 웹 IDL의 웹소켓 API는 W3C에 의해 표준화

- 클라이언트가 요청을 해서 응답을 받는 방식이 아닌, 서버가 내용을 클라이언트에게 보내는 표준화된 방식을 제공

- 연결이 유지된 상태에서 메시지들을 오갈 수 있게 허용

-- HTTP 폴링과 같은 반이중방식에 비해 더 낮은 부하를 사용하여, 웹 브라우저와 서버간의 통신 가능

-- 서버와의 실시간 데이터 전송 용이

- 양방향 대화 방식 (클라이언트 <-> 서버)

- 통신은 TCP 포트 80, 443(TLS 암호화 연결의 경우)를 통해 수행

- 방화벽을 통해 인터넷 연결을 차단하늩 일부 환경에 도움이 됨

- 대부분의 브라우저 (크롬, 엣지, 익스플로러, 파이어폭스, 사파리, 오페라)에서 지원

 

 

WebSocket

HTTP Protocol

공통점

- OSI 모델의 7계층에 위치

- 4계층의 TCP에 의존

차이점

- HTTP 포트 80과 443 위에 동작하도록 설계

- HTTP 프록시 및 중간 층을 지원하도록 설계

- HTTP 프로토콜과 호환 (호환하기 위해서는 HTTP 'Upgrade' 헤더를 사용해서 프로토콜을 변경해야함)

- 전이중통신

- TCP 위에서 메시지 스트리밍 가능

- 'ws://', 'wss://'(암호화 통신) 라는 URI 스키마(Scheme)을 사용

- 단방향 메세지 교환 규칙

- 요청-응답 관계 방식

 

프로토콜 핸드셰이크

- 웹 소켓을 연결하기 위해 클라이언트 웹소켓 핸드셰이크 요청을 보내면, 서버는 핸드셰이크 응답을 반환

 

클라이언트의 핸드셰이크 요청

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

서버의 핸드셰이크 응답

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

 

Socket.IO

- 실시간, 양방향 및 이벤트 기반 통신을 가능하게 함

- 모든 플랫폼, 브라우저, 장치에서 작동

- 안정성과 속도에 포커싱(Focus)

- JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술

- NPM

- MIT 라이센스

 

출처

https://socket.io/#examples

https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93

https://d2.naver.com/helloworld/1336

 

 

728x90
반응형