- 네트워크에서 두 컴퓨터 간의 ‘실시간 양방향 통신’을 제공하는 기술을 의미합니다. 양방향 통신은 송신자 측이 데이터를 수신할 수도 있으며, 수신자 측이 데이터를 송신할 수 있는 구조를 가집니다.
- 두 컴퓨터 간에는 '특정 IP 주소와 포트번호'의 조합으로 네트워크 간의 연결을 수행하며, 수신자(클라이언트)는 데이터를 요청하면 송신자(서버)에서는 요청에 대한 응답을 제공해 주는 '클라이언트-서버' 모델을 사용하여 데이터를 송수신할 수 있습니다. - 소켓 통신은 'TCP'와 'UDP'라는 두 가지 주요 프로토콜을 사용할 수 있습니다. - 이러한 프로토콜을 통해 웹 서버, 이메일 서버, 데이터베이스 서버 등 다양한 응용 프로그램에서 사용되며, 실시간 통신, 스트리밍, 온라인 게임 등에서도 사용됩니다.
💡 STOMP(Simple or Streaming Text Oriented Messaging Protocol) - 텍스트 기반의 메시징 프로토콜을 의미합니다. 클라이언트와 메시지 브로커 간의 통신을 간단하고 효율적으로 수행할 수 있도록 설계되었습니다. 이는 WebScoket에서 쉽게 메시지를 주고받을 때 사용이 됩니다. - 해당 프로토콜은 Websocket을 사용하여 클라이언트와 서버 간의 메시지 교환을 구조화하고 표준화하는 데 사용됩니다.
- sockjs-client : WebSocket의 대체 라이브러리로, 브라우저와 웹 서버 간의 로우 레벨 크로스-브라우저 JavaScript 객체를 생성합니다. - @stomp/stompjs : STOMP(Simple Text Oriented Messaging Protocol)는 메시징 프로토콜로, @stomp/stompjs는 이를 JavaScript에서 구현한 클라이언트 라이브러리입니다.
💡컴포넌트 구성 : StompComponent.tsx - 구성한 Spring Boot WebSocket에 최초 연결을 하고 Endpoint를 통해 Sub(구독), Pub(게시)를 통해 실시간 데이터 통신을 수행합니다. 1. stompHandler.connect()
- STOMP의 소켓에 연결을 시도합니다. - onConnect로 웹 소켓 연결이 완료되면 채팅방을 입장시켜 줍니다.(setIsEnterChat) - client.subscribe를 통해서 SUB_ENDPOINT(/sub/message)로 특정 메시지에 대한 수신을 구독(Sub)합니다. - client.activate()를 통해서 구성한 client를 활성화합니다.
2. stompHandler.sendMessage()
- 채팅방에서 입력한 값을 웹 소켓으로 전송(Pub)합니다. - 생성된 Client가 존재하고 연결이 되어 있으며, 전송하려는 메시지가 있을 때 동작을 수행합니다. - wsClient.publish를 통해서 PUB_ENDPOINT(/pub/messages)로 특정 메시지를 전송(Pub)합니다.
3. stompHandler.disconnect()
- STOMP의 소켓의 연결을 종료합니다. - 채팅방 입장을 종료합니다(setIsEnterChat) - wsClient.deactivate()를 통해서 구성한 client를 비 활성화 합니다.
import React, { useEffect, useState } from'react';
import { Client, IFrame, IMessage } from'@stomp/stompjs';
import SockJS from'sockjs-client';
interface MessagesType {
sender: string; // 보내는 주체
content: string; // 보내는 메시지
}
const StompComponent = () => {
const SERVER_URL = '<http://localhost:8081/ws-stomp>'; // STOMP 연결 엔드포인트const PUB_ENDPOINT = '/pub/messages'; // 메시지를 전송하기 위한 엔드포인트const SUB_ENDPOINT = '/sub/message'; // 메시지를 수신하기 위한 엔드포인트// STOMP가 연결되고 생성한 Client를 관리하는 상태 관리const [wsClient, setWsClient] = useState<Client>();
// 채팅방 입장 여부const [isEnterChat, setIsEnterChat] = useState<boolean>(false);
// 채팅에서 누적되는 데이터를 관리합니다.const [messages, setMessages] = useState<MessagesType[]>([]);
// 사용자의 구분을 짓기 위해 임시로 발급한 사용자 아이디const [userId, setUserId] = useState(Math.random().toString(36).substr(2, 9));
// 채팅에서 보내지는 데이터를 관리합니다.const [messageObj, setMessageObj] = useState<MessagesType>({
content: '',
sender: userId,
});
/**
* STOMP를 연결하고 라이프사이클을 관리하는 Handler
*/const stompHandler = (() => {
return {
/**
* STOMP 연결을 시도합니다.
* @returns
*/connect: () => {
// [STEP1] 연결 시 Client 객체를 생성합니다.const client = new Client({
webSocketFactory: () =>new SockJS(SERVER_URL),
reconnectDelay: 5000,
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
// [STEP2] 웹 소켓 연결onConnect: (conn: IFrame) => {
console.log('[+] WebSocket 연결이 되었습니다.', conn);
setIsEnterChat(true); // 채팅방 입장여부 상태를 변경// [WebSocket - Subscribe] 특정 엔드포인트로 메시지를 수신합니다.
client.subscribe(SUB_ENDPOINT, (message: IMessage) => {
const receiveData = JSON.parse(message.body);
setMessages((prevMessages) => [
...prevMessages,
{
content: receiveData.content,
sender: receiveData.sender,
},
]);
});
},
// 웹 소켓 연결 종료onWebSocketClose: (close) => {
console.log('[-] WebSocket 연결이 종료 되었습니다.', close);
},
// 웹 소켓 연결 에러onWebSocketError: (error) => {
console.error('[-] 웹 소켓 연결 오류가 발생하였습니다.', error);
},
// STOMP 프로토콜 에러onStompError: (frame) => {
console.error('Broker reported error: ' + frame.headers['message']);
console.error('Additional details: ' + frame.body);
},
});
setWsClient(client); // 구성한 Client 객체를 상태 관리에 추가합니다.
client.activate(); // Client를 활성화 합니다.return() => {
stompHandler.disconnect(); // Socket 연결을 종료합니다.
};
},
/**
* 웹 소켓 메시지를 전송합니다.
*/sendMessage: () => {
if (wsClient && wsClient.connected && messageObj.content.trim() !== '') {
// [WebSocket - Publish] 특정 엔드포인트로 메시지를 전송합니다.
wsClient.publish({
destination: PUB_ENDPOINT,
body: JSON.stringify({ ...messageObj, sender: userId }),
});
// 입력한 값을 초기화합니다.
setMessageObj({ content: '', sender: userId });
}
},
/**
* 웹 소켓 연결을 종료합니다.
*/disconnect: () => {
console.log('[-] 웹 소켓 연결을 종료합니다.');
if (wsClient) {
wsClient.deactivate();
setWsClient(undefined);
setIsEnterChat(false);
}
},
};
})();
return (
<divstyle={{}}>
{!isEnterChat ? (
<divstyle={{flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
textAlign: 'center',
}}><h2>Spring Boot WebSocket 채팅방에 오신것을 환영합니다.</h2><buttononClick={stompHandler.connect}>채팅방 입장</button></div>
) : (
<divstyle={{flex:1,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
textAlign: 'center',
}}><h1>STOMP을 이용한 채팅방입니다. </h1><divstyle={{flexDirection: 'row' }}><inputtype='text'value={messageObj.content}onChange={(e) => setMessageObj({ ...messageObj, content: e.target.value })}
/>
<buttononClick={stompHandler.sendMessage}>전송</button></div><divstyle={{display: 'flex',
flexDirection: 'column',
height:300,
backgroundColor: '#f5d682',
border: '1pxsolidred',
margin:20,
}}>
{messages.map((item, index) => (
<h1style={{fontSize:13,
textAlign: 'left',
}}
key={`messages-${index}`}>
{item.sender === userId ? `[ME] ${item.content}` : `[OTHER] ${item.content}`}
</h1>
))}
</div><divstyle={{marginTop:10 }}><buttononClick={stompHandler.disconnect}> 채팅방 나가기 </button></div></div>
)}
</div>
);
};
exportdefault StompComponent;
