[개발 지식] Sock.js와 Stomp.js 관계

Sock.js와 Stomp.js를 함께 사용했던 이유와 요즘은 Stomp.js만 사용해도 괜찮은 이유

웹 소켓(WebSocket)은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜이다.
이 과정에서 Sock.js와 Stomp.js라는 라이브러리를 함께 사용하는 것이 일반적이었다.
왜 두 라이브러리를 함께 사용했는지, 그리고 요즘은 Stomp.js만으로도 충분한 이유를 살펴보겠다.

1. Sock.js와 Stomp.js를 함께 사용했던 이유

Sock.js는 웹 소켓을 지원하지 않는 브라우저에서도 폴백(fallback) 메커니즘을 통해 안정적인 통신을 제공하기 위해 사용되었다.
웹 소켓을 직접 지원하지 않는 환경에서는 **XHR(Long Polling)**이나 Iframe 같은 기술로 대체하여 서버와 통신을 유지할 수 있었다.

• Sock.js의 역할: 브라우저가 웹 소켓을 지원하지 않을 때를 대비해 다른 프로토콜로 대체해 안정적인 연결을 보장했다.
• Stomp.js의 역할: **STOMP(Simple Text Oriented Messaging Protocol)**라는 메시지 프로토콜을 구현하여, 클라이언트와 서버 간 메시지 교환을 쉽게 관리했다.
  주로 메시지 브로커와의 통신에서 사용되었다.

두 라이브러리를 함께 사용하면 모든 환경에서 안정적으로 메시지를 주고받을 수 있었다.

2. 요즘은 Stomp.js만 사용해도 괜찮은 이유

현재는 대부분의 최신 브라우저들이 웹 소켓을 기본적으로 지원하고 있다.
웹 소켓이 안정적으로 동작하기 때문에 더 이상 Sock.js의 폴백 메커니즘이 필요하지 않다.
이러한 이유로 Stomp.js만으로도 충분히 웹 소켓 기반의 양방향 통신을 구현할 수 있다.

또한, 웹 소켓이 표준으로 자리 잡으면서 Sock.js의 필요성이 점점 줄어들었고, 개발 복잡성을 줄이기 위해 Stomp.js만 사용하는 경우가 많아졌다.

3. 간단한 예시 코드

Stomp.js만 사용하는 간단한 예시 코드를 살펴보자.

import Stomp from 'stompjs';
import SockJS from 'sockjs-client';

// 웹 소켓 서버 주소
const socket = new SockJS('http://localhost:8080/websocket-endpoint');
const stompClient = Stomp.over(socket);

// 연결 성공 시 호출되는 함수
const onConnected = () => {
    console.log('Connected to WebSocket');
    stompClient.subscribe('/topic/messages', onMessageReceived);
};

// 메시지 수신 시 호출되는 함수
const onMessageReceived = (message) => {
    console.log('Received message:', message.body);
};

// 연결 시도
stompClient.connect({}, onConnected, (error) => {
    console.error('Error:', error);
});

// 메시지 전송 예시
const sendMessage = (message) => {
    stompClient.send('/app/send', {}, JSON.stringify(message));
};

// 사용 예시
sendMessage({ content: 'Hello, WebSocket!' });

이 코드는 Stomp.js를 사용하여 서버와 웹 소켓 연결을 설정하고,
메시지를 보내고 받을 수 있는 기본적인 기능을 보여준다.
과거에는 Sock.js와 Stomp.js를 함께 사용해 연결을 설정했지만,
이제는 Stomp.js만으로도 충분히 통신을 처리할 수 있다.

---

따로 한 번 더 정리해보자면
Stomp.js 만 있어도 STOMP(Simple Text Oriented Messaging Protocol 이라는 메시지 프로토콜을 구현하여,
클라이언트와 서버 간 메시지 교환이 가능한데 Sock.js를 함께 사용했던 것은
당시 웹 소켓을 지원하지 않는 브라우저에서도 폴백 메커니즘을 통해 안정적인 통신은 제공하기 위함이었음.
현재는, 대부분의 최신 브라우저들이 웹 소켓을 기본적으로 제공하기에 사용하지 않음.

그리고 Stomp.js 없이 Sock.js 만으로도 실시간 통신이 가능하지만
각각 단독으로 사용했을 경우 Stomp.js의 속도가 더 빠를 가능성이 높다.
이유는 Stomp.js는 웹 소켓을 사용하면서도 메시지를 효율적으로 처리하기 때문에,
Sock.js가 폴백 메커니즘을 사용할 때보다 빠르다.

따라서, 웹 소켓이 가능하다면 Stomp.js를 사용하는 것이 좋다.