Amada Coding Club

[WebSocket] 웹소켓에 대해 알아보자 본문

Front-End/React

[WebSocket] 웹소켓에 대해 알아보자

아마다회장 2022. 11. 22. 13:47

그분과 함께하는 차빼주세요나 이번 졸업 프로젝트나 기능에 채팅 기능이 들어간다. 

그래서 채팅 기능을 연습하려고 리액트 채팅 구현을 찾아보니 웹소켓을 이용해서 채팅 기능을 구현한다고 나와있었다.

웹소켓이란 무엇일까?

https://choseongho93.tistory.com/266

 

[웹소켓] WebSocket의 개념 및 사용이유, 작동원리, 문제점

오늘은 웹소켓에 대해 알아보겠습니다. ● 웹소켓(WebSocket)의 배경 : 인터넷이 나오고 HTTP를 통해서 서버로부터 데이터를 가져오기 위해서는 오로지 URL을 통한 요청이 유일한 방법이었습니다. 때

choseongho93.tistory.com

이분의 내용을 참고했다.

 

우리가 인터넷에서 HTTP를 이용해서 서버에 데이터를 가지고 오기 위해선 요청을 통해 데이터를 받아야 했다.

일반적인 상황에선 상관 없겠지만,  실시간으로 데이터를 업데이트 해야 하는 상황에서는 계속 서버에 데이터를 요청해야 하기 때문에 번거롭고 자원 낭비가 발생할 수 있다. 이 문제를 해결하기 위해 웹소켓이 탄생했다.

 

웹소켓은 HTML5 버전에 출시된 기술로 HTTP와 같은 프로토콜의 일종이다.

Transport Protocol의 일종으로 서버와 클라이언트 간의 양방향 소통을 효율적으로 지원하는 구조이다.

웹소켓을 통해 브라우저는 서버가 직접 보내는 데이터를 받아들일 수 있고 사용자가 다른 웹사이트로 이동하거나 새로고침 하지 않더라도(요청을 하지 않더라도) 최신 데이터를 받을 수 있게 도와준다.

 

즉, 채팅, 게임과 같이 실시간 양방향 소통이 이루어지는 환경을 효과적으로 구현할 수 있다.

 

웹소켓은 어떻게 작동할까?

우선 서버와 클라이언트간의 웹소켓 연결은 HTTP를 통해 이루어진다

웹소켓 연결이 잘 이루어졌다면 일정 시간이 지나 HTTP연결은 자동으로 끊어지고 서버와 클라이언트 간의 웹소켓(TCP기반)연결이 이루어진다.

웹소켓은 아주 간단한 기능만을 제공해주기 때문에 대부분 socket.io와 같은 오픈 소스 라이브러리를 많이 사용하고

메시지 포맷도 STOMP와 같은 프로토콜을 통해 이용한다

다음에 socket.io를 이용한 간단한 리액트 채팅방 구현을 해보겠다.

 

문제점은?

문제점으론 구현이 복잡해지고 트래픽에 과부하가 일어나고 HTML5이기 때문에 오래된 브라우저에선 지원하지 않는다는 단점이 있다. 그런데 실시간을 구현하는데 구현이 복잡해지고 과부하 문제는 필연적이라고 생각한다.