0118value두번찍히는현상

client/src/Components/Chat.js

@@ -25,15 +25,24 @@ function Chat(props) {
     setChat([...chat, props.singleChat])
   }, [props.singleChat])
 
+  useEffect(() => {
+    setChat([...chat, props.recievedMsg])
+  }, [props.recievedMsg])
+
   return (
 
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
       <h2>현재 {props.roomName} 입니다.</h2>
-      {      chat.map((value, index) => (
-        <Row key={index} className='ml-3'>
-          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
-        </Row>
-      ))}
+      {      chat.map((value, index) => {
+        if (Boolean(value)) {
+          // console.log(`value=${value}=`)
+          return <Row key={index} className='ml-3'>
+            {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+          </Row>
+        } else {
+          return null
+        }
+      })}
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
         <Form.Group>
@@ -49,4 +58,5 @@ function Chat(props) {
   );
 }
 
+
 export default Chat;

client/src/Components/OpenList.js

@@ -19,7 +19,7 @@ function OpenList(props) {
       {list.map((list, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
-            <h2>{list.room}</h2>
+            {list.room}
           </ListGroup.Item>
         </ListGroup>
       )}

client/src/Pages/HomePage.js

@@ -27,6 +27,7 @@ function Home() {
     const [error, setError] = useState('');
 
     const [singleChat, setSingleChat] = useState('')
+    const [recievedMsg, setRecievedMsg] = useState('')
     const [roomName, setRoomName] = useState('')
 
     const handleClose = () => setShow(false);
@@ -74,11 +75,20 @@ function Home() {
             roomName: roomName,
             msg: singleChat
         })
-        socket.on('broadcast', (msg) => {
+    }, [singleChat])
+    
+    
+    useEffect(() => {
+        socket.on("sendedMSG", (msg) => {
             console.log(msg)
-            setSingleChat(msg)
+            setRecievedMsg(msg)
         })
-    }, [singleChat])
+    }, [])
+
+    // socket.on('broadcast', (msg) => {
+    //     console.log(msg)
+    //     setSingleChat(msg)
+    // }, se)
 
     return (
         <>
@@ -95,7 +105,7 @@ function Home() {
                     </Tabs>
                 </Col>
                 <Col style={{ padding: "0" }}>
-                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null}
+                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomName={roomName}/> : null}
 
                     <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                         <Button variant="primary" onClick={handleShow} size="lg" block>

server/controllers/user.controller.js

@@ -43,10 +43,6 @@ const signup = async (req, res) => {
         res.status(500).send('회원가입 에러발생하였습니다.')
     }
 }
-const hello = async (req, res) => {
-    let users = await User.find().select('name nickname email _id').exec()
-    return res.json(users)
-}
 
 const logineduser = async (req, res) => {
     try {
@@ -59,12 +55,12 @@ const logineduser = async (req, res) => {
 const changenick = async (req, res) => {
     try {
         const newnick = req.body.nickname
-        await User.update({ 'username': req.body.username }, { 'nickname': newnick })
+        await User.updateOne({ 'username': req.body.username }, { 'nickname': newnick })
     } catch (error) {
         alert('올바르지 못한 접근입니다.')
     }
 }
 
 
-export default { signup, hello, logineduser, changenick }
+export default { signup, logineduser, changenick }
 // {} : 객체로 return함
\ No newline at end of file

server/routes/user.routes.js

@@ -6,7 +6,6 @@ const router = express.Router()
 
 router.route('/users/signup')
     .post(userCtrl.signup)
-    .get(userCtrl.hello)
 
 router.route(`/users/:userId`)
     .post(userCtrl.logineduser)

server/server.js

@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결
     socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
   });
 
-  socket.on('chat', (data)=>{
-    io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게 
-  })
+  // socket.on('chat', (data)=>{
+  //   io.to(data.roomName).emit('chat',data.msg); //roomName에 존재하는 모든 소켓들에게 
+  // })
+
+  socket.on('chat', (data) => {
+    socket.broadcast.emit('sendedMSG', data.msg ); // everyone gets it but the sender
+  });
 
   socket.on('disconnect', () => {
     console.log('disconnected from server id=', socket.id)