3달 전 · 익명 님의 새로운 댓글
채팅 애플리케이션에서 Redis 메시지 저장과 RabbitMQ 전송을 안전하게 처리하려면 어떻게 해야하나요?
안녕하세요. 현재 백엔드 개발자를 지망하는 대학생입니다.. 예전에 Springboot를 활용해서 개발한 채팅 애플리케이션 프로젝트를 리팩토링하는 과정에서 문제가 발생하여 질문 드립니다. 아래와 같은 아키텍처 애플리케이션을 구현했습니다. - MySQL: 채팅방 정보(채팅방 이름, 참여 인원수 등등), 사용방 정보 데이터 저장. - Redis: 채팅 메시지 데이터 저장 - RabbitMQ: 채팅 메시지를 전송하기 위한 메시지 브로커 STOMP over WebSocket을 활용해서 클라이언트에서 메시지를 pub해서 메시지 브로커인 RabbitMQ를 거쳐서 구독한 클라이언트에게 메시지(채팅)을 전송하도록 구현했습니다. 그런데 문제가 발생하는 로직이 있습니다. [채팅방 가입 로직] 1. @Transactional 내부에서 MySQL에 채팅방 데이터 저장. (해당 유저가 채팅방에 가입한 것을 저장) 2. Redis에 "User가 채팅방에 들어왔습니다."라는 메세지를 저장. 3. 해당 메시지를 RabbitMQ로 전송. (`rabbitTemplate.convertAndSend(...)`) 이런 상황에서 Redis나 RabbitMQ에서 문제가 발생해서 하나라도 정상적으로 완료되지 않으면 문제가 발생합니다. Redis 서버에 문제가 생겨서 채팅 메시지를 정상적으로 저장하지 않더라도 RabbitMQ를 통해 메시지가 전송되고, RabbitMQ 서버에 문제가 생겨서 정상적으로 전송되지 않더라도 Redis에 채팅 메시지가 저장이 됩니다. 이러한 문제를 해결하기 위해서 2PC, SAGA 패턴, Outbox 패턴 등등을 알아봤고, 그 중 가장 괜찮다고 생각했던 패턴이 Outbox 패턴이었습니다. 근데 또 어려움이 생겼는데, Outbox 패턴을 사용하기 위해 Pulling 기법을 사용 하자니 Redis에 무리가 생길 것 같고, 트랜잭션 로그 테일링 패턴을 사용 하기에는 Redis가 이를 제대로 지원하지 않아 구현이 굉장히 어려워진다는 문제가 생겼습니다. 그래서 MySQL을 Outbox 저장소로 사용할까 고민도 해보았는데, MySQL을 사용하면 속도 면에 불리해지지 않을까라는 생각이 또 들었습니다. 이러한 문제를 어떻게 해결하면 좋을까요...? 제가 궁금한점은 다음과 같습니다. 1. Redis를 활용하는 프로젝트에서 MySQL을 Outbox 저장소로 사용하는 것은 좋지 않은 방법일까요? 2. Outbox 패턴이 최선일까요? 현업에서는 이러한 문제를 어떤 식으로 해결하는지 궁금합니다.
개발자
#spring
#rabbitmq
#redis
#mysql
#transaction
답변 1
댓글 1
조회 144
일 년 전 · 김연호 님의 답변 업데이트
JMeter Websocket테스트 질문드립니다
JMeter로 Websocket 테스트를 구현해야 하는 상황인데 테스트 진행하는 도중 아래 에러가 나서 찾아보니 Single Write Sampler에 Data 인코딩 문제로 추측만 되고 있습니다... Failed to parse TextMessage payload=[SEND desti..], byteCount=242, last=true] in session ujvhyrid. Sending STOMP ERROR to client. org.springframework.messaging.simp.stomp.StompConversionException: Frame must be terminated with a null octet JMeter Sampler 인코딩 UTF-8로 설정하는건 찾아서 해봤는데 그래도 안되네요...ㅠㅠ 정말로 인코딩 문제인지 혹시 동일한 경험이 있으신 분이 계실까요? 구글링을 해도 자료를 못찾겠고.. 사내에 해당 지식을 가지신 분도 전무하셔서 너무 답답해서 질문남겨봅니다....
개발자
#jmeter
#websoket
답변 1
댓글 0
조회 299
일 년 전 · 박건우 님의 새로운 댓글
WebSocket과 WebRTC를 함께 사용한 프로젝트 배포 질문드려요!
현재 websocket(socket io)과 webrtc(peerjs)를 함께 사용한 프로젝트를 구현했습니다. 배포 관련 궁금한 점이 있어서 질문드립니다! 두가지 기술 전부 애플리케이션 내에서 큰 비중을 차지하는데 통상적으로 이 둘을 같은 서버에 배포하나요?? 아니면 따로 따로 배포해야 할까요??
개발자
#webrtc
#websocket
#react
답변 1
댓글 1
조회 129
2년 전 · 백승훈 님의 답변 업데이트
Spring WebSocket 통신 중 HttpOnly 쿠키에 저장된 JWT 토큰 접근 문제
안녕하세요, Spring과 React를 활용하여 실시간 채팅 기능을 구현 중인 학생입니다. 현재 저희 시스템은 사용자가 로그인을 성공하면, JWT 토큰을 생성하여 이를 HttpOnly 쿠키에 저장하고 있습니다. 이후 해당 토큰을 이용해서 사용자의 인증 및 인가를 처리합니다. 그리고 웹소켓을 화룡해 채팅 기능을 구현하고 있는데, 사용자가 채팅 메시지를 웹소켓을 통해 서버로 전송할 때마다, 해당 사용자의 JWT 토큰을 검사하여 유효한 사용자인지 확인하려고 합니다. 그러나 현재 쿠키가 HttpOnly로 설정되어 있어서, React에서 쿠키에 접근할 수 없습니다. 따라서 웹소켓 메시지를 보낼 때마다 JWT 토큰을 메시지에 포함시키지 못하고 있습니다. 구글링해서 찾아보니 다른 개발자들의 경우 클라이언트에서 헤더에 토큰을 포함하여 서버로 전송하고, 서버에서는 StompHeaderAccessor의 getFirstNativeHeader 메서드를 사용하여 토큰을 받아 사용자 검증을 하는 방식을 주로 사용하는 것 같습니다. 그러나 저희 시스템에서는 이 방식을 사용할 수 없어, 다른 해결 방안을 찾고 있습니다. 현재 제가 생각한 방식은 웹소켓 연결 시 웹소켓 세션에 해당 사용자의 토큰값을 저장하여 채팅 메시지가 서버로 전송될 때마다, 웹소켓 세션에 저장된 토큰값을 검증하는 방식입니다. 만약, 이 방식을 사용한다면 사용자 토큰값의 유효 기간이 끝나면 리프래시 토큰을 사용한 사용자 토큰 재발급 방식은 사용자 웹 브라우저 쿠키에 접근하지 못하니 불가능한가요? HttpOnly 쿠키에 저장된 JWT 토큰을 웹소켓 통신에서 어떻게 활용할 수 있을지 조언해주시면 감사하겠습니다.
개발자
#spring
#websocket
#react
#jwt
답변 1
댓글 0
조회 553
2년 전 · C9C9 님의 질문
플러터에 sockjs
현재 프론트엔드 파트에서 플러터를 이용하여 모바일 개발을 진행하고 있습니다 진행중인 프로젝트에 채팅방 기능이 있는데 플러터에서는 웹소켓을 이용하기 위해서 web_socket_channel 과 같은 패키지를 이용하여 소켓통신을 하는것으로 알고있습니다 그런데 백엔드에서 소켓통신을 할때 스프링부트와 sockjs를 이용하여 소켓통신 서버를 구축하고 해당 채널을 구독하면 메세지를 보내는 구조로 구성해 나갈거라 말해줬습니다. 현재 소켓통신과 관련하여 아무것도 해본적이 없고 플러터에서 웹소켓통신을 하기위해 관련 강의만 몇개 찾아본게 전부라 현재 어떤방식으로 소켓통신이 이루어져야 하는지 감이 오질 않습니다. 1. 백엔드에서 sockjs를 이용하여 프론트엔드 플러터와 통신을 하려 하는데 가능한가요? 2. 가능하다면 어떤 패키지를 사용하여야 하나요? 3. end point를 websocket으로 구독하고 해당 채널에 이벤트를 통해 메시지를 전달해 준다고 하는데 프론트에서는 어떤 처리를 해줘야 하나요?? 아직 부트캠프를 진행중이며 해당 프로젝트의 핵심기능중 하나라 질문남겨봅니다. 프론트에서 어떤 처리를 해줘야 하고 백엔드에서는 각각 어떤 처리를 해야 하는지 궁금합니다.
개발자
#flutter
#spring-boot
#소켓통신
#sockjs
#프론트엔드
답변 0
댓글 0
조회 139
2년 전 · 익명 님의 질문 업데이트
채팅 새로고침시 연결 끊기는 문제
안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------
개발자
#websocket
#stompjs
#채팅
#chatting
#react
답변 0
댓글 0
조회 348
2년 전 · 익명 님의 새로운 댓글
채팅 기능 client 가 null 값이 돼요
하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }
개발자
#react
#chatting
#stompjs
답변 1
댓글 8
조회 242
2년 전 · 익명 님의 질문 업데이트
stompjs, WebSocket을 활용한 채팅에서 subscribe 콜백함수 실행 안 되는 오류
stompjs, WebSocket을 활용한 채팅에서 subscribe 콜백함수 실행 안 되는 오류입니다. 일단 버전은 stompjs 2.3.3 입니다. 채팅 connect와 subscribe 잘 되는 거 확인했고, 다른 chatting 페이지에서 send까지 하면서, 채팅되는 거 확인했는데 onMessageReceived라는 콜백함수가 실행되지 않아요. 그래서 채팅내역을 못 불러오고 있어요.. 도와주세요 ㅠㅠ 아래 사진은 connect, subscribe, send 과정입니다.
개발자
#react
#stompjs
#websocket
답변 0
댓글 0
조회 132
2년 전 · 커리어리 AI 봇 님의 새로운 답변
리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..
안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}
개발자
#채팅
#웹소켓
#채팅기능
답변 2
댓글 0
조회 616
2년 전 · 커리어리 AI 봇 님의 새로운 답변
비동기작업에 사용되는 '링크'가 정확히 뭔가요?
Javascript를 배우고 있습니다. DOM공부를 마치고 ajax로 비동기 데이터 이동을 공부하는데 XMLHttpRequest나 WebSocket등의 사용을 해보고자 구글링과 유튭영상들을 아주 많이 봤는데 요청을 처리할 주소라고해서 링크가 항상 들어가는데 이 링크가 정확히 어떤 링크를 넣어야 하는건지, 링크를 직접 만들 수는 없는건지, 링크의 용량제한이나 구성은 백엔드 배포로만 가능한지 궁금합니다.
개발자
#ajax
#javascript
#node.js
답변 2
댓글 1
추천해요 1
조회 140
2년 전 · 커리어리 AI 봇 님의 새로운 답변
Api로 간단하게 데이터 저장
회사에서 카페24를 사용하는데 저는 퍼블리셔라 개발쪽은 진짜 기초적인것만 할 줄 아는 js초보라 Firebase나 httpxmlrequest, WebSocket 이런거 사용법을 잘몰라서 그러는지 검색해도 영상을 봐도 이해가 너무 어렵더라구요.. 혹시 간단한 예제로 사용자가 데이터 이를테면 문자열을 입력하면 데이터가 저장되어서 목록에 추가되고 새로고침해도 유지되려면 어떻게 해야하나요?
개발자
#javascript
답변 2
댓글 0
추천해요 1
조회 354
3년 전 · 권민수 님의 새로운 답변
사이드 프로젝트에 적용해볼만한 기술이 뭐가 있을까요?
현재 다니고 있는 회사에서는 스프링 + jsp만 하고 있습니다. 그러다가 react + springBoot로 사이드 플젝을 하며 관련 기술들을 좀 익히고 싶은데, 문제는 회사에 사수나 웹 관련 사람들이 없다는 겁니다. 제가 좀 익혀볼만한 기술들이 뭐가 있을지 잘 모르겠습니다. 그래서 구체적으로 뭘 만들지가 잘 그려지지 않네요. 예를 들어 부동산 API와 같은 오픈 API를 이용해서 실거래가를 조회하고 websocket으로 관리자와 상담 및 알림.. 이런 식으로 꼭 최신 기술이 아니더라도 적용해보고 만들면서 공부해보면 좋은 기술들을 이번에 해볼 생각인데, 적용하거나 공부해볼 만한 게 어떤 게 있을까요? 추천 부탁드립니다.
개발자
답변 1
댓글 0
조회 296