Chatting (no profile)

client/src/Components/Chat.js

@@ -8,6 +8,10 @@ import catchErrors from '../utils/catchErrors';
 function Chat(props) {
   // let defaultname = sessionStorage.getItem('name');
 
+  const [name, setName] = useState([''])
+  const [sender, setSender] = useState([])
+  const [senderimg, setSenderimg] = useState('')
+
   const [inner, setInner] = useState([''])
   const [chat, setChat] = useState([])   //object로 key는 보낸사람 value는 메세지
   const [disabled, setDisabled] = useState(true)
@@ -33,26 +37,49 @@ function Chat(props) {
 
   function sendMsgCH(e) {
     e.preventDefault()
+
+    setName(sessionStorage.getItem('name'))
+    
+    props.setSingleUser(sessionStorage.getItem('name'))
     props.setSingleChat(inner)
+
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
     console.log(chat)
+
+
+
   }
   useEffect(() => {
     getProfile(userId)
   }, [userId])
 
   useEffect(() => {
+    setSender([...sender, props.singleUser])
+    console.log('UseEffect singleUser', sender)
+    
     setChat([...chat, props.singleChat])
-    console.log('UseEffect singlechat', chat)
-    // check()
-  }, [props.singleChat])
+    // console.log('UseEffect singlechat', chat)
+    
+
+    console.log('Chat에 Sing있는 name = ', name, props.singleUser)
+
+
+
+  }, [props.singleChat, props.singleUser])
 
   useEffect(() => {
+    setSender([...sender, props.recievedUser])
+    console.log('UseEffect RecievedUser', sender)
+    console.log('Chat에 Reci있는 name = ', name)
+
     setChat([...chat, props.recievedMsg])
-    console.log('UseEffect recievechat', chat)
-  }, [props.recievedMsg])
+    // console.log('UseEffect recievechat', chat)
+
+    // setName('')
+
+  }, [props.recievedMsg, props.recievedUser])
 
   const time = new Date().toLocaleTimeString()
   return (
@@ -61,46 +88,39 @@ function Chat(props) {
       {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
       {chat.map((value, index) => {
         if (!(value == '')) {
-          return (
-            <Row key={index} className='m-1 ml-3' >
-              <Col xs={2}>
-                {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
-              </Col>
-              <Col xs={8}>
-                <Row><strong>{user.nickname}의 {index}</strong></Row>
-                <Row className='d-flex flex-wrap-nowrap'>
-                  <Col className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Col>
-                  <Col className='ml-4'>{new Date().toLocaleTimeString()}</Col>
+
+          if (!(sender[index] === sessionStorage.getItem('name'))) {
+            return (
+              <Row key={index} className='m-1 ml-3' >
+                <Col xs={2}>
+                  {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
+                </Col>
+                <Col xs={8}>
+                  <Row><strong>{sender[index]} {index}</strong></Row>
+                  <Row className='d-flex flex-wrap-nowrap'>
+                    <Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
+                    <Col className='ml-1'>{time}</Col>
+                  </Row>
+                </Col>
+              </Row>
+            )
+          }else{
+            return (
+              <Row key={index} className='m-1 justify-content-end'>
+                <Row className='d-flex flex-wrap-nowrap' >
+                  <Col className='mr-1'>{user.nickname}님 {time}</Col>
+                  <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
                 </Row>
-              </Col>
-            </Row>
-          )
-        } else {
-          return null
-        }
-      })
-      }
-      {/* 내가 보낸 메세지 띄우기 */}
-      {chat.map((value, index) => {
-        if (!(value == '')) {
-          return (
-            <Row key={index} className='m-1 mr-4 justify-content-end'>
-              <div className='d-flex flex-wrap-nowrap' >
-                <Row className='mr-4'>{time}</Row>
-                <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
-              </div>
-            </Row>
-          )
+              </Row>
+            )
+          }
+
         } else {
           return null
         }
       })
       }
-
-
-
-
-
+     
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
         <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>

client/src/Pages/HomePage.js

@@ -13,88 +13,98 @@ import EnterRoom from "../Components/EnterRoom"
 const socket = io();
 
 function Home() {
-    const [showModal, setShowModal] = useState(false);
-    const [showEnter, setEnter] = useState(false);
-    const [chat, setChat] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [showEnter, setEnter] = useState(false);
+  const [chat, setChat] = useState(false);
 
-    //소켓
-    const [singleChat, setSingleChat] = useState('')
-    const [recievedMsg, setRecievedMsg] = useState('')
-    const [roomCode, setRoomCode] = useState('')
+  //소켓
+  const [singleChat, setSingleChat] = useState('')
+  const [recievedMsg, setRecievedMsg] = useState('')
+  const [roomCode, setRoomCode] = useState('')
 
-    //방참가
+  const [singleUser, setSingleUser] = useState('')
+  const [recievedUser, setRecievedUser] = useState('')
 
-    const [roomName, setRoomName] = useState('')
+  //방참가
 
-    const handleCloseModal = () => setShowModal(false);
-    const handleShowModal = () => setShowModal(true);
-    const handleCloseEnter = () => setEnter(false);
-    const handleShowEnter = () => setEnter(true);
-    const handleChato = () => setChat(true);
-    const handleChatc = () => setChat(false);
+  const [roomName, setRoomName] = useState('')
 
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
+  const handleCloseEnter = () => setEnter(false);
+  const handleShowEnter = () => setEnter(true);
+  const handleChato = () => setChat(true);
+  const handleChatc = () => setChat(false);
 
 
-    //SOCKET 관련 시작
-    function enterChatRoom(rName) {    //방 입장하기
-        socket.emit('joinRoom', rName)
-        console.log(`joinRoom : ${rName} 입장`)
-    }
 
-    const sendMsg = (e) => {
-        e.preventDefault()
-    }
+  //SOCKET 관련 시작
+  function enterChatRoom(rName) {    //방 입장하기
+    socket.emit('joinRoom', rName)
+    console.log(`joinRoom : ${rName} 입장`)
+  }
+
+  const sendMsg = (e) => {
+    e.preventDefault()
+  }
 
-    useEffect(() => {
-        if (!(singleChat == '')) {
-            socket.emit("chat", {
-                roomInfo: roomCode,
-                msg: singleChat
-            })
-            setSingleChat([''])
-        }
-    }, [singleChat])
-
-
-    useEffect(() => {
-        socket.on("sendedMSG", (msg) => {
-            console.log(msg)
-            setRecievedMsg(msg)
-        })
-    }, [])
-
-    return (
-        <>
-            <Menu />
-            <Row className="mr-0">
-                <Col className="list" md={5}>
-                    <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
-                        <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
-                        </Tab>
-                        <Tab eventKey="open" title="공개방" onClick={handleChato}>
-                            <OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
-                        </Tab>
-                    </Tabs>
-                </Col>
-                <Col style={{ padding: "0" }}>
-                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
-
-                    <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                        <Button variant="primary" onClick={handleShowModal} size="lg" block>
-                            생성
+
+  useEffect(() => {
+    if (!(singleChat == '')) {
+      socket.emit("chat", {
+        roomInfo: roomCode,
+        msg: { msg: singleChat, sender: singleUser },
+      })
+      //setSingleChat([''])
+    }
+  }, [singleChat, singleUser])
+
+
+  useEffect(() => {
+    socket.on("sendedMSG", (msg) => {
+      console.log('홈페이지 센드', msg.msg, '이름은', msg.sender)
+      setRecievedUser(msg.sender)
+      setRecievedMsg(msg.msg)
+      console.log('SENDEDMSG REC= ', recievedUser)
+
+    })
+  }, [])
+
+
+
+
+  return (
+    <>
+      <Menu />
+      <Row className="mr-0">
+        <Col className="list" md={5}>
+          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
+            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
+              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
+            </Tab>
+            <Tab eventKey="open" title="공개방" onClick={handleChato}>
+              <OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
+            </Tab>
+          </Tabs>
+        </Col>
+        <Col style={{ padding: "0" }}>
+          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
+
+          <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+            <Button variant="primary" onClick={handleShowModal} size="lg" block>
+              생성
                         </Button>
 
-                        <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
-                            참가
+            <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
+              참가
                         </Button>
-                    </div>
-                </Col>
-            </Row>
-            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
-            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName}/>
-        </>
-    );
+          </div>
+        </Col>
+      </Row>
+      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
+      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName} />
+    </>
+  );
 }
 
 export default Home;

server/server.js

@@ -28,10 +28,10 @@ io.on("connection", (socket) => { // 기본 연결
 
   socket.on('chat', (data) => {
     console.log('roomname확인', data)
-    socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로
-  
+    socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로  
   });
 
+
   socket.on('disconnect', () => {
     console.log('disconnected from server id=', socket.id)
   })