soo0115

client/package.json

@@ -13,6 +13,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "socket.io-client": "^3.0.5",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

client/src/Components/Chat.js

-import React from 'react';
-import { Form, Button } from 'react-bootstrap';
+import React, { useState, useEffect } from 'react';
+import { Form, Button, Row } from 'react-bootstrap';
 
 
 function Chat(props) {
+  const [inner, setInner] = useState([''])
+  const [chat, setChat] = useState([inner])   //object로 key는 보낸사람 value는 메세지
+
+  function handleChange(e) {
+    e.preventDefault()
+    setInner(e.target.value)
+    console.log(e.target.value)
+  }
+
+  function sendMsgCH(e) {
+    e.preventDefault()
+    props.setSingleChat(inner)
+    props.sendMsg(e)
+    setInner('')
+  }
+
+  useEffect(() => {
+    setChat([...chat, props.singleChat])
+  }, [props.singleChat])
+
   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}에서 보낸 메세지 : {value}
+        </Row>
+      ))}
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
-      <Form>
+      <Form onSubmit={sendMsgCH}>
         <Form.Group>
-          <Form.Control type="text" />
+          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
         </Form.Group>
         <Button variant="primary" type="submit">
           전송

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 } from 'react'
 import { ListGroup } from 'react-bootstrap';
 
-function ClosedList() {
+function ClosedList(props) {
   const [list, setList] = useState([
     { room: '테스트 방1', memnum: 5, admin: '가영' },
     { room: '테스트 방2', memnum: 4, admin: '수현' }]
   );
+
+  function enterChatroomCH(e) {
+    console.log(e.target.name)
+    console.log(e.target)
+    const roomName = e.target.name
+    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
+    props.setRoomName(roomName)
+    // props.clearChat()
+  }
+
   return (
     <div>
-      {list.map((list, index) =>
+      {list.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action>
-            <h2>{list.room}</h2>
+          <ListGroup.Item action onClick={enterChatroomCH} id='diddkdk' name={item.room}>
+          {item.room}
           </ListGroup.Item>
         </ListGroup>
       )}

client/src/Components/OpenList.js

 import React, { useState } from 'react'
 import { ListGroup } from 'react-bootstrap';
 
-function OpenList() {
+function OpenList(props) {
   const [list, setList] = useState([
     { room: '테스트 방3', memnum: 7, admin: '가영2' },
     { room: '테스트 방4', memnum: 2, admin: '수현2' }]
   );
+
+  function enterChatroomCH(e) {
+    const roomName = e.target.name
+    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
+    props.setRoomName(roomName)
+    // props.clearChat()
+  }
+
   return (
     <div>
       {list.map((list, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action>
+          <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
             <h2>{list.room}</h2>
           </ListGroup.Item>
         </ListGroup>

client/src/Pages/HomePage.js

@@ -5,15 +5,18 @@ import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
-import Chat from '../Components/Chat';
 import Menu from '../Components/Menu';
 import catchErrors from '../utils/catchErrors';
+import { io } from "socket.io-client";   //모듈 가져오기
+import Chat from "../Components/Chat";
 // import styled from 'styled-components';
 
 // const List = styled.div`
 //   background: #FFFAFA;
 // `
 
+const socket = io();
+
 const INIT_CHATR = {
     name: '',
     interest: '',
@@ -24,11 +27,13 @@ function Home() {
     const [show, setShow] = useState(false);
     const [show2, setShow2] = useState(false);
     const [chat, setChat] = useState(false);
-    // const [checkedI, setCheckedI] = useState(false);
     const [chatR, setChatR] = useState(INIT_CHATR);
     const [disabled, setDisabled] = useState(true);
     const [error, setError] = useState('');
 
+    const [singleChat, setSingleChat] = useState('')
+    const [roomName, setRoomName] = useState('')
+
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
     const handleChato = () => setChat(true);
@@ -51,14 +56,6 @@ function Home() {
         event.preventDefault()
         try {
             setError('')
-            // const response = await fetch('chat/makeChat', {
-            //     method: 'POST',
-            //     headers: {
-            //         'Content-Type': 'application/json'
-            //     },
-            //     body: JSON.stringify(chatR)
-            // })
-            //const data = await response.json()
             const response = await axios.post('chat/makeChat', chatR)
             setChatR(INIT_CHATR)
         } catch (error){
@@ -66,6 +63,28 @@ function Home() {
         }
     }
 
+    //SOCKET 관련 시작
+
+    function enterChatroom(rName) {    //방 입장하기
+        socket.emit('joinRoom', rName)
+        console.log(`joinRoom : ${rName} 입장`)
+    }
+
+    const sendMsg = (e) => {
+        e.preventDefault()
+    }
+
+    useEffect(() => {
+        socket.emit("chat", {
+            roomName: roomName,
+            msg: singleChat
+        })
+        socket.on('broadcast', (msg) => {
+            console.log(msg)
+            setSingleChat(msg)
+        })
+    }, [singleChat])
+
     return (
         <>
             <Menu />
@@ -73,15 +92,15 @@ function Home() {
                 <Col className="list" md={5}>
                     <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
                         <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList />
+                            <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
                         </Tab>
                         <Tab eventKey="open" title="공개방" >
-                            <OpenList />
+                            <OpenList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
                         </Tab>
                     </Tabs>
                 </Col>
                 <Col style={{ padding: "0" }}>
-                    {chat ? <Chat handleChatc={handleChatc} /> : null}
+                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null}
 
                     <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                         <Button variant="primary" onClick={handleShow} size="lg" block>

package.json

@@ -16,10 +16,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
     "express": "^4.17.1",
     "mongoose": "^5.11.9",
     "nanoid": "^3.1.20",
     "nodemon": "^2.0.6",
+    "socket.io": "^3.0.5",
     "validator": "^13.5.2"
   }
 }

server/server.js

 import express from 'express'
 import connectDb from './utils/connectDb.js'
 import chatRouter from './routes/chat.routers.js'
+import cors from "cors"
+import bodyParser from "body-parser"
+import http from 'http'
+import { Server } from 'socket.io'
 
 connectDb()
 
 const app = express()
 
 app.use(express.json())
-//이부분을 body 파싱함
-//express가 req.body라는곳을 자동으로만들어서 json형식으로 보낸것을 객체형식으로 넣음
-//이부분 다음부터는 req.body라는 부분을 실행할 수 있음
-
 app.use(chatRouter)
-//userRouter로 이동
 
-// app.post('/makeChat', (req, res) => { 
-//     app.use(chatRouter)
-// })
+const server = http.createServer(app);
+
+const io = new Server(server);
+
+// const port = process.env.PORT || 3001; // 3001 수정해야하나?
+
+app.use(bodyParser.json());
+
+app.use(cors());
+// app.use('/', indexRouter);
 
-// app.get('/', (req, res) => {
-//     res.send('Hello World. 안녕하세요')
-// })
+io.on("connection", (socket) => { // 기본 연결
+  console.log("socket connect ok", socket.id)
 
-app.listen(3030, () => {
+  socket.on('joinRoom', (data)=>{ // joinRoom을 클라이언트가 emit했을 때
+    let roomName=data;
+    socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
+  });
+
+  socket.on('chat', (data)=>{
+    io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게 
+  })
+
+  socket.on('disconnect', () => {
+    console.log('disconnected from server id=', socket.id)
+  })
+  
+});
+
+server.listen(3030, () => {
     console.log('Listening on port 3030')
 })
+// server.listen(port, () => { console.log(`Listening on port ${port}`) });
+
+export default server
+// module.exports = server;
\ No newline at end of file