D

client/src/Components/Chat.js

@@ -3,7 +3,8 @@ import { Form, Button, Row } from 'react-bootstrap';
 
 
 function Chat(props) {
-  let defaultname = sessionStorage.getItem('name');
+  let defaultname=''
+  // let defaultname = sessionStorage.getItem('name');
 
   function handleChange(e) {
     e.preventDefault()
@@ -24,7 +25,7 @@ function Chat(props) {
       <h2>현재 {props.roomName} 입니다.</h2>
       {      props.chatmsg.map((value, index) => (
         <Row key={index} className='ml-3'>
-          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+          {props.roomName}에서 {props.namelist}님이 보낸 메세지 : {value}
         </Row>
       ))}
 

client/src/Pages/HomePage.js

@@ -13,7 +13,10 @@ import { io } from "socket.io-client";   //모듈 가져오기
 
 const socket = io();
 
+
 function Home() {
+  const [namelist, setNamelist] = useState([])
+
   const [username, setUsername] = useState('defaultUser')
 
   const [show, setShow] = useState(false);
@@ -35,11 +38,13 @@ function Home() {
 
   const sendMsg = (e) => {
     e.preventDefault()
+    const name = sessionStorage.getItem('name')
     console.log('sendMsg', inner)
     console.log(roomName)
     socket.emit("chat", {
       roomName: roomName,
-      msg: inner
+      msg: inner,
+      name : name
     });
   }
 
@@ -53,8 +58,11 @@ function Home() {
       console.log('msg', msg)
       console.log('inner :', inner)
 
-      setChatmsg([...chatmsg, msg])
+      setChatmsg([...chatmsg, msg[0]])
       console.log('useeffect2', chatmsg)
+      console.log(msg[1])
+      setNamelist([...namelist, msg[1]])
+      console.log(namelist)
     })
     console.log('useeffect2', chatmsg)
   }, [chatmsg])
@@ -75,7 +83,7 @@ function Home() {
           </Tabs>
         </Col>
         <Col style={{ padding: "0" }}>
-          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} setInner={setInner} chatmsg={chatmsg} roomName={roomName} /> : null}
+          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} setInner={setInner} chatmsg={chatmsg} roomName={roomName} namelist={namelist}/> : null}
 
           <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
             생성

client/src/Pages/ProfilePage.js

@@ -27,7 +27,7 @@ function ProfilePage() {
 
     async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
         const userid = sessionStorage.getItem('userId')
-        const response = await axios.post(`/users/${userid}`, { 'email': userid })
+        const response = await axios.post(`/users/${userid}`, { '_id': userid })
         setUser(response.data)
     }
 
@@ -81,6 +81,7 @@ function ProfilePage() {
     }
     useEffect(() => {
         getLoginedUser()
+        console.log(user)
     }, [])
 
     return (

server/server.js

@@ -30,7 +30,7 @@ io.on("connection", (socket) => { // 기본 연결
 
   socket.on('chat', (data) => {
     console.log(`chat실행 :`, data.roomName, data.msg)
-    io.to(data.roomName).emit('broadcast', data.msg); //roomName에 존재하는 모든 소켓들에게 
+    io.to(data.roomName).emit('broadcast', [data.msg, data.name]); //roomName에 존재하는 모든 소켓들에게 
   })
 
   socket.on('disconnect', () => {