실시간 주문 조회

실시간 주문 조회에서는 사용자의 주문이 실시간으로 반영 되어야 한다. 실시간으로 데이터를 주고받기 위해 소켓 통신을 구현해야 했다.

화면 기록 2025-09-05 오전 2.43.44.mov

소켓 통신 구현 방식

현재 ‘실시간 주문 조회’ 페이지에서 사용중인 웹 소켓은 STOMP로만 구현이 되어있다.

STOMP는 Simple Text Oriented Messaging Protocol로서 간단한 문자열 기반의 메시징 프로토콜이다.

웹 소켓은 HTTP 프로토콜을 통해 연결을 설정한 후, 지속적인 연결을 유지하면서 데이터를 주고받을 수 있다. 그러나 웹 소켓의 메시지 형식은 정해져있지 않아 클라이언트-서버 간에 별도로 형식을 합의하여 통신해야 한다.

반면, STOMP는 프레임 형식으로 사전에 정의된 형태로 웹 소켓기반 통신을 진행한다.

STOMP의 요청 프레임 구조는 다음과 같다. 프레임 종류는 [STOMP]Client_Frames, [STOMP]Server_Frames 링크들에서 확인할 수 있다.

COMMAND
header1:value1
header2:value2

Body^@

header, Body에는 원하는 정보(로그인 정보 등..)들을 담아 보낼 수 있다.

실시간 통신 플로우

‘실시간 주문 조회’ 화면에서는 사용자의 실시간 주문 정보들을 받아와야 한다. 그래서 다음과 같은 플로우를 구상해보았다.

1. Client에서 ‘sub/order/{workspaceId}’에 해당하는 정보를 구독(SUBSCRIBE)한다. 이때 Client의 구독 id를 같이 보낸다.

   

2. Server에서는 Client의 id를 기억하고 있다가 새로운 주문이 들어오면 ‘sub/order/{workspaceId}’를 구독하던 구독자들에게 새로운 주문 정보를 담은 메시지(MESSAGE)를 보낸다.

   

3. Client에서는 새로운 주문 정보를 기존 주문 정보들에 추가한다.

   subscription = client.subscribe(`/sub/order/${workspaceId}`, (response) => {
     const orderWebsocket: OrderWebsocket = JSON.parse(response.body);
     const order = orderWebsocket.data;
   	// ...
   	addOrder(order);
   	// ...
   });
   

이렇게 간단하게 원하는 실시간 주문 조회 로직을 구성할 수 있었다!