240305 TIL - 2차 프로젝트(고도화 | 채팅방 생성, 특정 채팅방만 구독)

채팅방 생성

프론트엔드에서 문의하기 버튼을 눌렀을 때, 숙소 id를 담아 POST 요청해서 채팅방이 생성되도록 했다.

백엔드에서는 받은 숙소 id에서 얻은 호스트 정보를 가지고 채팅방 데이터를 저장했다.
그리고 생성된 채팅방 id를 응답으로 보내서 프론트엔드에서 해당 id의 채팅방으로 라우팅하게 했다.

특정 채팅방만 구독

useEffect(() => {
	const socket = new SockJS(`${process.env.NEXT_PUBLIC_BASE_URL}/chat`);
	const client = Stomp.over(socket);
	client.connect({}, (frame) => {
		console.log('Connected: ' + frame);
		client.subscribe(`/topic/messages/${id}`, (message) => {
			console.log('Received: ' + message.body);
			setMessages((prevMessages) => [...prevMessages, JSON.parse(message.body)]);
		});
	});
	setStompClient(client);
}, []);

const sendMessage = () => {
	if (stompClient && stompClient.connected) {
		const chatMessage = {
			content: message,
			type: 'CHAT',
		};
		stompClient.send(`/app/chat.sendMessage/${id}`, {}, JSON.stringify(chatMessage));
		setMessages((prevMessages) => [...prevMessages, chatMessage]);
		setMessage('');
	}
};

→ 프론트엔드 코드

@MessageMapping("/chat.sendMessage/{roomId}")
public void sendMessage(final @DestinationVariable String roomId, final Message message) {
		messagingTemplate.convertAndSend(String.format("/topic/messages/%s", roomId), message);
}

→ 백엔드 코드

A 채팅방에서 보낸 메시지가 다른 채팅방에서도 뜨면 안 되는데, 어제 코드는 그 처리를 안 해줘서 모든 채팅방에서 메시지를 볼 수 있었다.

채팅방 id를 가지고 특정 그 채팅방에만 메시지를 전달하고 또 구독할 수 있도록 했다.