refactor: 채팅 파티션 구분

Plick-pop-in · Jul 27, 2024 · 81f1218 · 81f1218
1 parent 7818ff1
commit 81f1218
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/component/live/Chat.js b/src/component/live/Chat.js
@@ -32,7 +32,7 @@ const Chat = () => {
                         </div>
                     </div>
                     <div style={{ marginLeft: "40px", marginTop: "33px"}}>
-                        <ChatScreen key={Date.now()} /> {/* 새로운 키 값 전달 */}
+                        <ChatScreen roomId={chatboxname} key={Date.now()} /> {/* 새로운 키 값 전달 */}
                     </div>
                 </div>
             </div>

diff --git a/src/component/live/ChatScreen.js b/src/component/live/ChatScreen.js
@@ -4,19 +4,19 @@ import { useSelector } from 'react-redux';
 import ChatMessage from "./ChatMessage";
 import "./css/ChatScreen.css";
 
-const ChatScreen = ({ key }) => {
+const ChatScreen = ({ roomId }) => {
     const [messages, setMessages] = useState([]);
     const [client, setClient] = useState(null);
-    const loginInfo = useSelector(state => state.loginSlice); // Redux store에서 로그인 정보 가져오기
-    const [inputMessage, setInputMessage] = useState(""); // inputMessage 상태 추가
+    const loginInfo = useSelector(state => state.loginSlice);
+    const [inputMessage, setInputMessage] = useState("");
 
     useEffect(() => {
         if (client && client.connected) {
             client.deactivate();
         }
 
         const newClient = new Client({
-            brokerURL: "ws://plick.shop:8080/ws", // WebSocket 주소
+            brokerURL: "ws://plick.shop:8080/ws",
             debug: function (str) {
                 console.log(str);
             },
@@ -29,7 +29,8 @@ const ChatScreen = ({ key }) => {
             console.log("웹소켓 연결 성공");
             setClient(newClient);
 
-            newClient.subscribe('/sub/public', (message) => {
+            // 각 채팅방에 대한 고유 주제를 구독
+            newClient.subscribe(`/sub/chat/room/${roomId}`, (message) => {
                 handleMessage(message);
             });
         };
@@ -45,7 +46,7 @@ const ChatScreen = ({ key }) => {
                 newClient.deactivate();
             }
         };
-    }, [key]);
+    }, [roomId]); // roomId가 변경될 때마다 useEffect 다시 실행
 
     useEffect(() => {
         console.log("렌더링된 messages 상태: ", messages);
@@ -68,10 +69,10 @@ const ChatScreen = ({ key }) => {
 
             console.log("보내는 메시지: ", chatMessage);
             client.publish({
-                destination: '/pub/chat.sendMessage',
+                destination: `/pub/chat/${roomId}/sendMessage`, // 각 채팅방에 맞는 주제에 메시지 전송
                 body: JSON.stringify(chatMessage),
             });
-            setInputMessage(""); // 메시지 전송 후 input 비우기
+            setInputMessage("");
         } else {
             console.error("STOMP 연결 실패");
         }
@@ -104,15 +105,16 @@ const ChatScreen = ({ key }) => {
                         className="chat-input-box"
                         type="text"
                         placeholder="메시지를 입력하세요."
-                        value={inputMessage} // inputMessage 값 바인딩
-                        onChange={(e) => setInputMessage(e.target.value)} // input 값 변경 시 inputMessage 업데이트
-                        onKeyDown={handleKeyDown} // Enter 키 이벤트 핸들러 추가
+                        value={inputMessage}
+                        onChange={(e) => setInputMessage(e.target.value)}
+                        onKeyDown={handleKeyDown}
                     />
                     <button
                         className="chat-input-button"
                         aria-label="전송"
                         onClick={sendMessage}
                     >
+                        전송
                     </button>
                 </div>
             </div>