React-Flask 서버에서 페이지 이동 시 socketio.emit을 통한 메세지 전송이 클라이언트에서 받아지지 않음

Question

React-Flask 서버를 개발 중 페이지를 이동했을 때 socketio.emit을 통해 보낸 메세지가 클라이언트에게 보내지지 않습니다./list에서 /loading 페이지로 이동될 경우 이런 오류가 발생합니다.ListPage.jsx에서 /loading 페이지로 이동하는 코드는 다음과 같습니다. useEffect(() => { // Listen for refresh signal from server socket.on('refresh', () => { console.log("Refresh signal received from server"); window.location.reload(); // Refresh the page }); return () => { socket.off('refresh'); // Clean up event listener on component unmount }; }, []);LoadingPage.jsx 전체 코드는 다음과 같습니다.import React, { useEffect, useState } from 'react'; import Menu from './Menu.jsx'; import { io } from 'socket.io-client'; const socket = io('http://localhost:5000'); const LoadingPage = () => { const [loadingText, setLoadingText] = useState("다운로드중"); useEffect(() => { socket.on('connect', () => { console.log('Connected to WebSocket server'); }); socket.on('done', () => { console.log("Done signal received from server"); window.location.href = "/list"; }); socket.on('disconnect', () => { console.log('Disconnected from WebSocket server'); window.location.href = "/list"; }); return () => { socket.off('done'); socket.off('connect'); socket.off('disconnect'); }; }, []); useEffect(() => { const interval = setInterval(() => { setLoadingText(prev => { if (prev === "다운로드중...") { return "다운로드중"; } else { return prev + "."; } }); }, 500); // 500ms마다 업데이트 return () => clearInterval(interval); // 컴포넌트 언마운트 시 interval 정리 }, []); return (

{loadingText}

with Waktaverse Music, Waktaverse Reaction Collection

); }; export default LoadingPage;3일동안 고민해봐도 답이 나오지않아 여기 올려봅니다.

월급은나의빛 · Answer

ListPage 와 LoadingPage 가 각각 socker을 만드는 게 이상해 보입니다. 최상위단에서 socket을 만들고 모든 페이지가 공유해야 하는 것 아닌가요.

React-Flask 서버에서 페이지 이동 시 socketio.emit을 통한 메세지 전송이 클라이언트에서 받아지지 않음

1개의 답변

Q&A 목록