[Client] / #39 / fix: Chat socket.io fix

src/GamePages/InGame.js

@@ -17,7 +17,7 @@ const socket = io.connect('http://localhost:4000', {
   path: '/socket.io',
 });
 
-export default function InGame({ accessToken, isLogIn, loginCheck }) {
+export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   const [resultPopup, setResultPopup] = useState(false);
   const [IsOpen, SetIsOpen] = useState(true);
   const [presenter, setPresenter] = useState({ nickname: '', id: '' });
@@ -52,7 +52,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
 
   // ! Chat
   const socketRef = useRef();
-  const [state, setState] = useState({ message: '', name: '김코딩' });
+  const [state, setState] = useState({ message: '', name: userInfo.nickname });
   // ! App.js 에서 유저이름 name에 넣으면 됨 !
 
   const [chat, setChat] = useState([]);
@@ -108,10 +108,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   };
 
   const onMessageSubmit = (e) => {
-    // * 메세지 보낼때
     e.preventDefault();
     const { name, message } = state;
-    socket.emit('send message', name, message);
+    socketRef.current.emit('message', { name, message });
     setState({ message: '', name });
   };
 
@@ -171,7 +170,11 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
 
   useEffect(() => {
     // * 메세지
-    renderChat();
+    socketRef.current = socket;
+    socketRef.current.on('message', ({ name, message }) => {
+      setChat([...chat, { name, message }]);
+    });
+    // return () => socketRef.current.disconnect();
   }, [chat]);
 
   useEffect(() => {

src/MyPages/MyPage.js

@@ -3,19 +3,19 @@ import { withRouter } from 'react-router-dom';
 import SearchUser from './components/SearchUser';
 import Header from './components/Header';
 import ChangePsw from './components/ChangePsw';
-
+import axios from 'axios';
 import Character1 from '../images/Character1.png';
 import Character2 from '../images/Character2.png';
 import Character3 from '../images/Character3.png';
 import Character4 from '../images/Character4.png';
 
 function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
   const PhotoData = [Character1, Character2, Character3, Character4];
- 
+
   const [isOpen, setIsOpen] = useState(false);
   const [isPhotoBoxOpen, setIsPhotoBoxOpen] = useState(false);
-  const { nickname, email, profile_image, comment, id } = userInfo
-  const defaultImageNum = profile_image === null ? 0 : profile_image
+  const { nickname, email, profile_image, comment, id } = userInfo;
+  const defaultImageNum = profile_image === null ? 0 : profile_image;
   const [nowPhoto, setPhoto] = useState(PhotoData[defaultImageNum]);
   const ChangeInputPhoto = function (photo) {
     // e.preventDefault();
@@ -46,22 +46,20 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
     };
   });
 
-
-
-  const MyPageSaveData= async () =>{
-    const PhotoNum = PhotoData.findIndex(nowPhoto)
-    const SavePhoto = await axios.post(`http://localhost:4000/mypage/${id}/profile`,
-    {
-      authorization: accessToken,
-      new_profile: PhotoNum
-    },
-    {
-      headers: { 'Content-Type': 'application/json' },
-      Credentials: 'include',
-    })
-  }
-
-
+  const MyPageSaveData = async () => {
+    const PhotoNum = PhotoData.findIndex(nowPhoto);
+    const SavePhoto = await axios.post(
+      `http://localhost:4000/mypage/${id}/profile`,
+      {
+        authorization: accessToken,
+        new_profile: PhotoNum,
+      },
+      {
+        headers: { 'Content-Type': 'application/json' },
+        Credentials: 'include',
+      }
+    );
+  };
 
   return (
     <div>