yeonwoo

client/src/Components/Chat.js

+import axios from 'axios';
 import React, { useState, useEffect } from 'react';
-import { Form, Button, Row } from 'react-bootstrap';
+import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
+import { isAuthenticated } from '../utils/auth';
+import catchErrors from '../utils/catchErrors';
 
 
 function Chat(props) {
+  const [user, setUser] = useState('')
+  const [error, setError] = useState('')
+  const [disabled, setDisabled] = useState(true)
+  const [hidden, setHidden] = useState(false)
+
+  const userId = isAuthenticated()
+  async function getProfile(userId) {
+    try {
+      const response = await axios.get(`/users/${userId}`)
+      setUser(response.data)
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
+
+
+
   // let defaultname=''
   let defaultname = sessionStorage.getItem('name');
 
@@ -13,6 +34,7 @@ function Chat(props) {
     e.preventDefault()
     setInner(e.target.value)
     console.log(e.target.value)
+    setDisabled(false)
   }
 
   function sendMsgCH(e) {
@@ -20,35 +42,80 @@ function Chat(props) {
     props.setSingleChat(inner)
     props.sendMsg(e)
     setInner('')
+    setDisabled(true)
+    console.log(chat)
   }
+  useEffect(() => {
+    getProfile(userId)
+  }, [userId])
 
   useEffect(() => {
     setChat([...chat, props.singleChat])
+    console.log('UseEffect singlechat', chat)
+    // check()
   }, [props.singleChat])
 
   useEffect(() => {
     setChat([...chat, props.recievedMsg])
+    console.log('UseEffect recievechat', chat)
   }, [props.recievedMsg])
 
+
+  // function check() {
+  //   // if (chat[chat.length-1].user ===chat[chat.length-2].user){  //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교
+  //   if (chat.length === 2) {
+  //     setHidden(false)
+  //   } else {
+  //     setHidden(true)
+  //   }
+  //   console.log(hidden)
+  // }
+  const time = new Date().toLocaleTimeString()
   return (
 
-    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
-      <h2>현재 {props.roomName} 입니다.</h2>
+    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
+      <h2>현재 {props.roomName} 입니다.{chat.length}</h2>
+      {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
       {      chat.map((value, index) => (
-        <Row key={index} className='ml-3'>
-          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+        <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>
             </Row>
-      ))}
+          </Col>
+        </Row>
+      ))
+      }
+      {/* 내가 보낸 메세지 띄우기 */}
+      {      chat.map((value, index) => (
+        <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>
+
+      ))
+      }
+
+
+
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
-        <Form.Group>
-          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
-        </Form.Group>
-        <Button variant="primary" type="submit">
+        <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
+          <Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
+          <Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
             전송
           </Button>
+        </Form.Group>
+
       </Form>
-    </div>
+    </div >
 
 
   );

client/src/Pages/HomePage.js

@@ -85,15 +85,14 @@ function Home() {
 
   useEffect(() => {
     socket.on("sendedMSG", (msg) => {
-      console.log(msg)
+      console.log('sendedMsg = ', msg)
       setRecievedMsg(msg)
     })
   }, [])
-  //   socket.on('broadcast', (msg) => {
-  //     console.log(msg)
-  //     setSingleChat(msg)
-  //   })
-  // }, [singleChat])
+  socket.on('broadcast', (msg) => {
+    console.log(msg)
+    setSingleChat(msg)
+  })
 
   return (
     <>

client/src/Pages/ProfilePage.js

@@ -76,20 +76,6 @@ function ProfilePage() {
         getProfile(userId)
     }, [userId])
 
-
-    //     const [img, setImg] = useState('')
-    // function bbb(e) {
-    //     const { name } = e.target
-    //     let reader = new FileReader();
-    //     reader.onload = function (e){
-    //         console.log(e.target.result)
-    //         // setImg(e.target.result)
-    //         // setProfileimg
-    //         // console.log(user,name)
-    //         setUser({...user, [name]: e.target.result})
-    //     };
-    //     reader.readAsDataURL(e.target.files[0])
-    //  )
     return (
         <>
             <Menu />
@@ -98,8 +84,6 @@ function ProfilePage() {
                     <Col sm={4}>
                         <Row className='justify-content-center'>
                             {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />}
-                            {/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle hidden={!hidden}/> */}
-                            {/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */}
                           </Row>
                         <Row className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">
@@ -109,17 +93,6 @@ function ProfilePage() {
                                 </Form.Group>
                             </Form>
                         </Row>
-                        {/* 
-{img?<Image src={img}/> : <h2>아직입니다.</h2>}
-                        <Row className='ml-3 mt-3 justify-content-center'>
-                            <Form className="d-flex">
-                                <Form.Group>
-                                    <Form.Label>프로필 사진 변경</Form.Label>
-                                    <Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
-                                </Form.Group>
-                            </Form>
-                        </Row> */}
-
                     </Col>
                     <Col sm={8}>
                         <Row className='m-5 justify-content-center'>

server/server.js

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