작성
·
672
0
안녕하세요 현재 웹 소켓 중 StompJS를 사용해서 채팅 기능을 구현 중이고 저는 프론트엔드(리액트)를 담당하고 있습니다.
현재 publish 메서드를 두 번 사용하는데 1번은 db에 저장하기 위해, 나머지 1번은 실시간 전송을 위해 사용합니다. 그런데 메시지를 실시간으로 주고 받는 건 되는데 DB에 저장이 안되는 상황입니다..
그리고 이 코드가 완전히 안되는 건 아니라고 생각이 드는건 전날만 해도 DB 저장과 실시간 대화가 다 되었었다는 것입니다.. 제가 혹시 뭔가 잘못 건드린 부분이 있다거나 문제가 되는 부분을 알 수 있을까 해서 올려봅니다.. 물론 서버나 DB의 문제가 있을 수도 있다고 생각하지만 웹 소켓이 완전 처음이라서 이런 사용 방식이 맞는지도 궁금합니다..!
추가로 StompJs.Client의 debug로는 두 요청이 다 보내지는 로그가 뜨긴 하는 것 같아서 사진 첨부합니다!
// 메세지 보내기 버튼 클릭 시
const sendMessageButtonClick = async () => {
if (message.length > 0) {
console.log('message', message);
setHasInputError(false);
// 메시지 보내기
// 이미 연결된 WebSocket이 있다면 메시지 전송
if (webSocketClient && webSocketClient.connected) {
// 특정 채팅방으로 메시지 전송
webSocketClient.publish({
destination: '/app/' + roomId.id, // 채팅방 주소,
body: JSON.stringify({
// userId랑 메시지 내용만 보내기 - 서버에서 정해줌
userId: userId,
message: message
})
});
webSocketClient.publish({
destination: '/topic/room/' + roomId.id, // 채팅방 주소,
body: JSON.stringify({
chatId: Math.random(),
localTime: new Date(),
msg: message,
responseDto: {
id: userId,
nickname: userId
}
})
});
setMessage(''); // 메시지 초기화
}
} else {
setHasInputError(true);
}
};
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
웹 소켓을 이용한 채팅 기능 구현 시 StompJS를 통한 DB 저장 문제로 어려움을 겪고 계시군요, 프린이님. 프론트엔드 부분에서 메시지 전송 로직은 잘 작성하신 것 같습니다. 문제가 되는 부분은 웹 소켓 서버의 구성이나 채팅 메시지를 DB에 저장하는 로직의 문제일 수 있습니다.
우선, StompJS를 이용해 메시지를 전송하는 구조는 맞습니다. 하지만 두 개의 다른 destination(/app/
과 /topic/room/
)으로 메시지를 보내는데, 이들이 어떻게 처리되는지가 중요합니다. 보통 /app/
으로 보내는 메시지는 서버에서 처리하여 DB에 저장하는 로직으로 연결되고, /topic/room/
은 서버를 통해 실시간으로 다른 클라이언트에 전송하기 위한 경로입니다.
DB에 메시지가 저장되지 않는 경우, 아래와 같은 몇 가지 가능성을 확인해볼 수 있습니다.
서버 측 코드 변경: 전날까지 정상 작동했다면, 서버 측 코드에서의 변동사항을 확인해보세요. 특히, /app/
경로에 대한 메시지 핸들러가 정상적으로 메시지를 DB에 저장하는 로직을 수행하는지 검토해야 합니다.
DB 연결 상태 확인: 서버가 DB와 성공적으로 연결되어 있는지 확인하세요. 또한, DB에 대한 권한이나 상태에 변경사항이 없는지도 확인이 필요합니다.
예외 처리 로그 확인: 서버에 예외 처리와 관련된 로그를 남겨두었다면 해당 로그를 통해 문제가 발생한 원인을 파악할 수 있습니다.
네트워크 상태 확인: 서버 또는 DB가 외부 네트워크에 위치한다면 네트워크 상태나 방화벽 설정을 검토하세요.
이외에도 클라이언트와 서버 간의 메시지 포맷의 미스매치, 서버의 메모리 초과나 기타 서버 자원 문제 등 다양한 원인이 있을 수 있습니다.
Spring Boot에서 웹 소켓을 사용하는 경우, spring-boot-starter-websocket
모듈을 사용하여 쉽게 접근하실 수 있고, Spring Framework의 웹 소켓 지원 섹션을 참고하시면 도움이 될 것입니다. 추가적으로 Spring Boot의 메시징 지원에 대한 다른 정보는 여기에서 확인하실 수 있습니다.
해당 문제를 해결하기 위해서는 서버의 메시지 핸들러 코드와 DB 저장 로직을 다시 한번 점검해보시길 권장드립니다.