채팅방 분리, 브로드캐스팅, 불필요한거 삭제

.gitignore

 node_modules
-package-lock.json
+package-lock.json
\ No newline at end of file
+
+uploads
\ No newline at end of file

client/src/Components/Chat.js

@@ -32,12 +32,12 @@ function Chat(props) {
   return (
 
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
-      <h2>현재 {props.roomName} 입니다.</h2>
+      <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
       {      chat.map((value, index) => {
         if (!(value=='')) {
           // console.log(`value=${value}=`)
           return <Row key={index} className='ml-3'>
-            {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+            {defaultname}님이 보낸 메세지 : {value}
           </Row>
         } else {
           return null

client/src/Components/ChatForm.js

-import React, { useState } from 'react';
-import { Form, Row, Col, Button } from 'react-bootstrap'
-
-function ChatForm(props) {
-    const INIT_SAYING = ''
-    const [saying, setSaying] = useState(INIT_SAYING);
-
-    function handleChange(event) {
-        const { name, value } = event.target
-        setSaying(value)
-        console.log(saying)
-    }
-
-    function handleSubmit(event) {
-        event.preventDefault()
-        // const response = await axios.post('chat/makeChat', chatR)
-        props.setSingleChat()
-        setSaying(INIT_SAYING)
-    }
-
-    return (
-        <Form onSubmit={handleSubmit}>
-            <Row>
-                <Col>
-                    <Form.Group>
-                        <Form.Control name='chat' type='text' onChange={handleChange}>chat</Form.Control>
-                    </Form.Group>
-                </Col>
-                <Col>
-                    <Form.Group>
-                        <Button type="submit">send</Button>
-                    </Form.Group>
-                </Col>
-            </Row>
-        </Form>
-    )
-}
-
-export default ChatForm
\ No newline at end of file

client/src/Components/ClosedList.js

 import React, { useState, useEffect } from 'react'
-import { ListGroup, Row, Col } from 'react-bootstrap';
+import { ListGroup } from 'react-bootstrap';
 import axios from 'axios'
 
 function ClosedList(props) {
@@ -10,32 +10,24 @@ function ClosedList(props) {
     getClosedList();
   }, []);
 
-  const userId = sessionStorage.getItem('userId');
-
   async function getClosedList() {
     const userid = sessionStorage.getItem('userId')
-    console.log('id가져오기', userid)
     let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
-    console.log('가져온거', res)
     setList(res.data)
   }
 
   function enterChatRoomCH(e) {
-    console.log(e.target.name)
-    console.log(e.target)
-    const roomName = e.target.name
-    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
-    props.setRoomName(roomName)
-   
-  }
+    const roomCode = e.target.name
+    props.enterChatRoom(roomCode)
+    props.setRoomCode(roomCode)
 
-  //user.hasOwnProperty('이름');
+  }
 
   return (
     <div>
       {list.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomName}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
             {item.roomName}
           </ListGroup.Item>
         </ListGroup>

client/src/Components/EnterRoom.js

 import React, { useState } from 'react'
 import axios from 'axios';
-import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
+import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors'
 
 

client/src/Components/OpenList.js

@@ -11,15 +11,14 @@ function OpenList(props) {
 
   async function getOpenList() {
     let res = await axios.get('/room/openlist')
-    console.log('가져온거o', res)
     setOpenlist(res.data)
   }
 
 
   function enterChatRoomCH(e) {
-    const roomName = e.target.name
-    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
-    props.setRoomName(roomName)
+    const roomCode = e.target.name
+    props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    props.setRoomCode(roomCode)
     // props.clearChat()
   }
 
@@ -27,7 +26,7 @@ function OpenList(props) {
     <div>
       {openlist.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomName}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
             {item.roomName}
           </ListGroup.Item>
         </ListGroup>

client/src/Components/PrivateRoute.js

-//로그인 한 사람만 route로 이동할 수 있도록 함
 import React from 'react'
 import { Redirect, Route } from 'react-router-dom'
 import { isAuthenticated } from '../utils/auth'
 
 function PrivateRoute({path, children}) {
     if (isAuthenticated()) {
-        //로그인이 됬을 시 정상적으로 작동
         return (
             <Route path={path}>
                 {children}
             </Route>
         )
     } else {
-        //로그인이 되지 않았을 시 로그인페이지로 이동
         return (
             <Redirect to='./login' />
         )

client/src/Pages/HomePage.js

@@ -20,11 +20,9 @@ function Home() {
     //소켓
     const [singleChat, setSingleChat] = useState('')
     const [recievedMsg, setRecievedMsg] = useState('')
-    const [roomName, setRoomName] = useState('')
     const [roomCode, setRoomCode] = useState('')
 
     //방참가
-    const [roomId, setRoomId] = useState('')
 
     const handleCloseModal = () => setShowModal(false);
     const handleShowModal = () => setShowModal(true);
@@ -36,7 +34,7 @@ function Home() {
 
 
     //SOCKET 관련 시작
-    function enterChatroom(rName) {    //방 입장하기
+    function enterChatRoom(rName) {    //방 입장하기
         socket.emit('joinRoom', rName)
         console.log(`joinRoom : ${rName} 입장`)
     }
@@ -48,7 +46,7 @@ function Home() {
     useEffect(() => {
         if (!(singleChat == '')) {
             socket.emit("chat", {
-                roomName: roomCode,
+                roomInfo: roomCode,
                 msg: singleChat
             })
             setSingleChat([''])
@@ -70,15 +68,15 @@ function Home() {
                 <Col className="list" md={5}>
                     <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
                         <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList enterChatRoom={enterChatRoom} setRoomName={setRoomName}/>
+                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
                         </Tab>
-                        <Tab eventKey="open" title="공개방" >
-                            <OpenList enterChatRoom={enterChatRoom} setRoomName={setRoomName}/>
+                        <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} roomName={roomName} /> : null}
+                    {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>
@@ -92,7 +90,7 @@ function Home() {
                 </Col>
             </Row>
             <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
-            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatroom} handleCloseEnter={handleCloseEnter} />
+            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} />
         </>
     );
 }

client/src/Pages/ProfilePage.js

 import React, { useState, useEffect } from 'react'
 import Menu from '../Components/Menu';
-import { Image, Button, Container, Form, Row, Col, Dropdown } from 'react-bootstrap';
+import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
 import { BrowserRouter as Link } from 'react-router-dom';
 import axios from 'axios'
 import catchErrors from '../utils/catchErrors'
@@ -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 />

client/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
-import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import reportWebVitals from './reportWebVitals';
 import SignUpPage from './Pages/SignUpPage';
 import ProfilePage from './Pages/ProfilePage';

server/server.js

@@ -21,16 +21,15 @@ io.on("connection", (socket) => { // 기본 연결
   console.log("socket connect ok", socket.id)
 
   socket.on('joinRoom', (data)=>{ // joinRoom을 클라이언트가 emit했을 때
-    let roomName=data;
-    socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
+    console.log('join_data확인',data)
+    let roomInfo=data;
+    socket.join(roomInfo); //클라이언트에서 data에 적힌 room으로 참여시킴
   });
 
-  // 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
+    console.log('roomname확인', data)
+    socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로
+  
   });
 
   socket.on('disconnect', () => {
@@ -39,8 +38,6 @@ io.on("connection", (socket) => { // 기본 연결
   
 });
 
-// app.use(express.json())
-//이부분을 body 파싱함
 app.use(bodyParser.json());
 app.use(cors());