자바스크립트 JS/리액트 React 노드 Node JS 공부일지

노드 js 입문 공부 일지 8. 웹소켓 (실시간 데이터 교환)

Tomitom 2022. 12. 16. 17:44
반응형

 

 

우리가 주소창에서 볼 수 있는 HTTP(Hypertext Transfer Protocol) 는 인터넷으로 데이터를 주고 받는 규약(protocol) 입니다. 즉, HTML을 전송하는 통신 프로토콜을 의미하는 것입니다. 

 

HTTP 는 요청이 있을 때만 반응하는 타입으로 요청이 있을 때만 응답을 주는 방식입니다. 

요청과 응답 이후에는 연결이 해제됩니다. (Stateless 정적인 속성) 

이것과 다른 방식으로 서로 연결된 상태를 유지하는 프로토콜이 있습니다. 

바로 웹 소켓이에요.

 

웹소켓

웹소켓은 서로가 연결된 상태를 유지합니다. 

서로간의 연결을 기반으로 하며, 일정량을 균일하게 주고 받는 것이 아니라 불규칙적인 정보교환이 가능합니다. 

즉, 데이터 송수신을 동시에 처리할 수 있고, 클라이언트와 서버가 서로에게 원할 때 데이터를 주고 받습니다.

통상적인 http 통신이 클라이언트가 요청을 보내야만 서버가 응답을 하는 단방향이라는 것에 비하면  

무척 동적인 움직임으로 연속된 데이터를 빠르게 노출합니다. 

 

서로 연결되지 않은 상태(무상태성)를 유지한 채 요청에 대한 응답만을 주고 받는 HTTP와 달리, 웹소켓은 서로 간의 연결이 이루어진 상태를 유지하는 '핸드쉐이킹' 방식으로 동작합니다. 

웹소켓 방식을 서버에서 구현하면 클라이언트가 이용하고 그것이 채팅과 같은 기능이 됩니다. 

 

 

핸드 쉐이크가 완료되면 프로토콜은 ws로 변경됩니다. 

ws는 경량의 패키지로 웹소켓의 규칙에 맞게 구현한 기능을 제공하는 간편하고 빠르고 안정된 패키지 입니다. 

터미널에 명령어를 입력해서 설치합니다. 

 

npm install ws 

 

앱 내에서 기본적인 설정을 하면 사용 가능합니다.

웹 소켓은 클라이언트와 서버의 상호 작용을 위한 프로토콜로 서버 어플리케이션과 양측에서 관련 설정을 추가해야 합니다. 

 

웹 소켓 프로토콜 특징

 

웹 소켓 프로토콜은 최초 접속시에만 http 프로토콜 위에서 핸드쉐이킹을 하기 때문에 http header를 사용합니다. 

웹 소켓을 위한 별도의 포트가 부여되는 것은 없고 기존 포트에서 사용되며, 

프레임으로 구성된 메세지라는 단위로 송수신 합니다. 

즉, 메세지에 포함될 수 있는 교환 가능한 메세지는 텍스트와 바이너리 뿐입니다. 

우리가 흔히 사용하는 채팅같은 것이에요. 

실시간으로 채팅이나 체스 게임을 하거나 바둑을 두거나 등등 상호교환적인 작용이 필요할 때 주로 쓰입니다. 

 

 

반응형