웹소켓 WebSocket 사용 방법 정리

웹소켓 API는 사용자의 브라우저와 서버 간의 양방향 통신을 가능하게 하는 기술입니다. 웹소켓 API를 사용하면 업데이트를 위해 클라이언트에 정기적으로 요청을 전송하는 서버 폴(poll) 없이도 서버와 메시지를 주고 받을 수 있습니다.

웹소켓 사용 방법

webSocket 객체를 통해 서버와 웹소켓 연결을 위한 API 생성과 관리를 진행할 수 있습니다. 웹소켓을 구성하려면 다음과 같이 WebSocket() 생성자(constructor)를 사용할 수 있습니다.

// 웹소켓 연결
const socket = new WebSocket('ws://localhost:8080')

// 연결 확인
socket.addEventListener('open', function(event)) {
    socket.send('Hello Server!');
});

// 메시지 수신
socket.addEventListener('message', function(event)) {
    console.log('Message from server ', event.data);
});

HTTP와 웹소켓 차이

웹소켓은 HTTP와 호환 가능하지만 두 프로토콜의 구조는 무척다릅니다.

 

HTTP와 REST에서 클라이언트는 수많은 URL을 통해 애플리케이션과 상호작용합니다. 서버는 HTTP URL, 메소드, 헤더를 기반으로 요청을 처리합니다.

 

반면, 웹소켓에는 보통 초기 접속을 위한 하나의 URL만 존재하는 경우가 많으며, 모든 애플리케이션 메시지가 동일한 TCP 연결에서 처리됩니다.

 

HTTP는 사전 설정된 통신 규약을 따르는 프로토콜이지만, 웹소켓은 이러한 제약을 해결하는 새로운 프로토콜 솔루션입니다.

웹소켓 활용 예시

웹소켓을 사용하면 웹페이지를 동적이고 인터랙티브하게 만들 수 있습니다. 웹소켓은 언제 사용하는 것이 좋을까요?

 

예를 들어 보겠습니다. 뉴스나 메일, 소셜 미디어 피드는 동적인 업데이트를 필요로 하지만, 몇 분 정도는 지연되도 괜찮을 수 있습니다. 반면, 게임이나 금융 앱과 같은 경우에는 실시간 업데이트가 필수적일 것입니다.

 

전자와 같이 업데이트 주기가 상대적으로 길거나 메시지 크기가 작은 경우, HTTP 스트리밍이나 폴링이 효과적일 수 있습니다. 반면, 후자의 경우처럼 낮은 지연, 빠른 주기, 큰 메시지를 처리하려는 경우에는 웹소켓이 적합할 수 있습니다. 통신에 있어 고려해야 할 사항은 속도 뿐만 아니라 메시지의 크기입니다.

 

정리하자면, 대부분의 경우에는 웹소켓을 사용하지 않고, Ajax와 HTTP 스트리밍 및 폴링을 통해 간결하고 효과적인 솔루션을 찾을 수 있습니다. 그러나 빠른 업데이트 및 큰 메시지의 처리가 필요한 경우에는 웹소켓을 사용한 실시간 통신을 적용할 수 있습니다.

 

참고 자료

• https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9
• https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
• https://docs.spring.io/spring-framework/docs/5.0.4.RELEASE/spring-framework-reference/web.html#websocket
• https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df91988788