이전의 채팅 불러오기 (주석은 안읽은 메세지 개수 관련)

client/src/Components/Chat.js

@@ -12,6 +12,13 @@ function Chat(props) {
   const [chat, setChat] = useState([])   //object로 key는 보낸사람 value는 메세지
 
   const [img, setImg] = useState([])
+  const [time, setTime] = useState([''])
+  const simpleTime = new Date().toLocaleTimeString()
+  const usualTime = simpleTime.substring(0, simpleTime.length - 3)
+  const realTime = new Date().toISOString()
+
+const  r = Date.parse(realTime)
+
 
   const [disabled, setDisabled] = useState(true)
   const [user, setUser] = useState('')
@@ -47,6 +54,7 @@ function Chat(props) {
   function sendMsgCH(e) {
     e.preventDefault()
 
+    props.setSingleTime(usualTime)
     props.setSingleImg(user.profileimg)
     props.setSingleUser(user.nickname)
     props.setSingleChat(inner)
@@ -54,11 +62,63 @@ function Chat(props) {
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
+    // console.log('보내기', chat)
   }
 
   function handleClick() {
-    setChat([])
+    props.setRecievedMsg('')
+    console.log('chat1', chat)
+    setChat(['초기화  '])
+
+    console.log('chat2', chat)
     props.handleChatc()
+    props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
+    console.log('나간시간',realTime, usualTime)
+  }
+
+  function settingtime(hour) {
+    let newhour = parseInt(hour) + 9
+    if (newhour >= 24) {
+      newhour -= 24
+    }
+    if (newhour >= 13) {
+      newhour -= 12
+      newhour = '오후 ' + newhour
+    } else {
+      newhour = '오전 ' + newhour
+    }
+    return newhour
+  }
+
+
+  //이전 채팅 내용에 대한 것 불러오기
+  //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식
+  async function getPreviousChat() {
+    //메세지, 닉네임, 시간 불러오기
+    const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
+    const info = respond.data
+    let chatlist = []
+    let userlist = []
+    let timelist = []
+    let imglist = []
+    for (let i = 0; i <= info.length - 1; i++) {  //사용하려는 형식에 맞게 수정 
+      chatlist = [...chatlist, info[i].message]
+      userlist = [...userlist, info[i].username]
+      timelist = [...timelist, info[i].createdAt]
+      let hour = timelist[i].split('T')[1].split(':')
+      timelist[i] = settingtime(hour[0]) + ':' + hour[1]
+    }
+
+    //그 nick에 맞는 프사 불러오기
+    const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } })
+    const imginfo = respond2.data
+    for (let j = 0; j <= imginfo.length - 1; j++) {
+      imglist = [...imglist, imginfo[j][0].profileimg]
+    }
+    setChat(chatlist)
+    setSender(userlist)
+    setImg(imglist)
+    setTime(timelist)
   }
 
   useEffect(() => {
@@ -66,22 +126,29 @@ function Chat(props) {
   }, [userId])
 
   useEffect(() => {
+    setTime([...time, props.singleTime])
     setImg([...img, props.singleImg])
     setSender([...sender, props.singleUser])
     setChat([...chat, props.singleChat])
   }, [props.singleChat])
 
   useEffect(() => {
+    setTime([...time, props.recievedTime])
     setImg([...img, props.recievedImg])
     setSender([...sender, props.recievedUser])
     setChat([...chat, props.recievedMsg])
   }, [props.recievedMsg])
 
+  useEffect(() => {
+    getPreviousChat()
+  }, [props.roomCode])
+
   useEffect(() => {
     getRoomName(props.roomCode)
+    console.log('겟 룸네임', chat)
   }, [props.roomCode])
 
-  const time = new Date().toLocaleTimeString()
+
   return (
     <>
       <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
@@ -91,7 +158,7 @@ function Chat(props) {
           </Col>
           <Col>
             <Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {roomName} </Row>
-            <Row > {props.roomCode} </Row>
+            <Row > {props.roomCode}</Row>
           </Col>
         </Row>
         <p>{props.newUser}님이 입장하셨습니다.</p>
@@ -107,7 +174,7 @@ function Chat(props) {
                     <Row><strong>{sender[index]}</strong></Row>
                     <Row className='d-flex flex-wrap-nowrap'>
                       <Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
-                      <Col className='ml-1'>{time}</Col>
+                      <Col className='ml-1'>{time[index]}</Col>
                     </Row>
                   </Col>
                 </Row>
@@ -116,7 +183,7 @@ function Chat(props) {
               return (
                 <Row key={index} className='m-1 justify-content-end'>
                   <Row className='d-flex flex-wrap-nowrap' >
-                    <Col className='mr-1'>{time}</Col>
+                    <Col className='mr-1'>{time[index]}</Col>
                     <Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
                   </Row>
                 </Row>

client/src/Components/ClosedList.js

 import React, { useState, useEffect } from 'react'
-import { ListGroup } from 'react-bootstrap';
+import { Badge, Button, ListGroup } from 'react-bootstrap';
 import axios from 'axios'
 
 function ClosedList(props) {
@@ -10,6 +10,10 @@ function ClosedList(props) {
     getClosedList();
   }, [props.roomCode]);
 
+  useEffect(() => {
+    console.log('안읽은정보', props.leaveInfo)
+  }, [props.leaveInfo])
+
   async function getClosedList() {
     const userid = sessionStorage.getItem('userId')
     let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
@@ -21,14 +25,33 @@ function ClosedList(props) {
     const roomName = e.target.value
     props.enterChatRoom(roomCode)
     props.setRoomCode(roomCode)
+
   }
 
+
+//   async function unreadMessage() {
+//     //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
+//     //물론 그 방 별로 찾아서 list를 맵써서 하던?
+//     const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': 'fd5243a90f' } })
+//     console.log('클라이언트 클로즈드 카운드', respond)
+//     // console.log('클라이언트 unreadmsg',respond.data)
+//     const respond222 = await axios.get('/room/dbChat')
+//     return respond
+//   }
+// let c=''
+//   useEffect(() => {
+//     c =unreadMessage()
+//     console.log('클로즈드 이펙트',c)
+    
+//   },[])
+
   return (
     <div>
       {list.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
             {item.roomName}
+            <Badge className='ml-2' pill variant='danger'>8</Badge>
           </ListGroup.Item>
         </ListGroup>
       )}

client/src/Pages/HomePage.js

@@ -42,12 +42,18 @@ function Home() {
   const [singleImg, setSingleImg] = useState('')
   const [recievedImg, setRecievedImg] = useState('')
 
+  const [singleTime, setSingleTime] = useState('')
+  const [recievedTime, setRecievedTime] = useState('')
+  const [leaveInfo, setLeaveInfo] = useState([''])
+
 
   //SOCKET 관련 시작
   function enterChatRoom(rCode) {    //방 입장하기
     socket.emit('joinRoom', rCode)
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
     console.log(`joinRoom : ${rCode} 입장`)
+    console.log('123123방입ㄴ장')
+    //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
   }
   const [roomName, setRoomName] = useState('')
 
@@ -100,7 +106,8 @@ function Home() {
         sendInfo: {
           msg: singleChat,
           sender: singleUser,
-          img: singleImg
+          img: singleImg,
+          time: singleTime
         }
       })
       setSingleChat([''])
@@ -110,6 +117,7 @@ function Home() {
 
   useEffect(() => {
     socket.on("sendedMSG", (sendInfo) => {
+      setRecievedTime(sendInfo.time)
       setRecievedImg(sendInfo.img)
       setRecievedUser(sendInfo.sender)
       setRecievedMsg(sendInfo.msg)
@@ -123,7 +131,7 @@ function Home() {
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+              <ClosedList leaveInfo={leaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
               <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
@@ -140,7 +148,7 @@ function Home() {
               </div>
             }
             {chat ?
-              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} />
+              <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} />
               : null}
             {open ?
               <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">

server/controllers/room.controller.js

 import Room from "../models/Room.js"
 import { customAlphabet } from 'nanoid'
 import isLength from 'validator/lib/isLength.js'
+import Chat from "../models/Chat.js"
 
 const nanoid = customAlphabet('1234567890abcdef', 10)
 
@@ -40,7 +41,7 @@ const getClosedList = async (req, res) => {
     try {
         console.log('req확인', req.query._id)
         let list = await Room.find({ member: req.query._id })
-        console.log('c_list가져오기', list)
+        // console.log('c_list가져오기', list)
         return res.json(list)
     } catch (error) {
         res.status(500).send('리스트 불러오기를 실패하였습니다!')
@@ -50,7 +51,7 @@ const getClosedList = async (req, res) => {
 const getOpenList = async (req, res) => {
     try {
         let list = await Room.find({ isOpen: true })
-        console.log('o_list가져오기', list)
+        // console.log('o_list가져오기', list)
         return res.json(list)
     } catch (error) {
         res.status(500).send('리스트 불러오기를 실패하였습니다!')
@@ -59,7 +60,7 @@ const getOpenList = async (req, res) => {
 
 const getRoomName = async (req, res) => {
     const roomId = req.query.roomCode
-    console.log(req.query.roomCode)
+    console.log('getRoomName', req.query.roomCode)
 
     try {
         let roominfo = await Room.findOne({ roomId: roomId }).select('roomName')
@@ -76,7 +77,7 @@ const changemember = async (req, res) => {
     let room = await Room.findOne({ roomId: roomId }).select('member')
     const isPresent = room.member.indexOf(userId)
     try {
-        if (isPresent<0) {
+        if (isPresent < 0) {
             const memberId = room.member.push(userId)
             await Room.updateOne({ 'roomId': roomId }, { 'member': room.member })
             console.log('room.member 업데이트 완료')
@@ -103,4 +104,45 @@ const roomInf = async (req, res) => {
     }
 }
 
+// const unreadMessage = async (req, res) => {
+//     let leaveInfo = req.query.leaveInfo
+//     // leaveInfo.shift()
+//     const roomId = req.query.roomId
+//     let leaveTime = ''
+//     for (let i = 1; i < leaveInfo.length - 1; i++) {    //일단 형식좀 맞추고
+//         leaveInfo[i] = JSON.parse(leaveInfo[i])
+//     }
+
+
+//     for (let i = 1; i <= leaveInfo.length - 1; i++) {   //그 방의 id와 나간기록의 방과 일치하는지 확인하고
+//         if (leaveInfo[i].roomName === roomId) {
+//             leaveTime = leaveInfo[i].leaveTime  //그 방에서 나간 시간을 찾아옴
+//             console.log('서버의 포문', i, leaveTime)
+//             break;
+//         }
+//     }
+//     // console.log('서버에서 unreadMessage', leaveInfo, roomId)
+//     const room_id = await Room.find({ roomId: roomId }).select('_id')   //id로 _id를 찾아와서
+//     let unreadMsg = await Chat.find({ room: room_id }).select('message createdAt')  //그 방의 메세지와 전송시간을 가져옴
+//     // console.log('서버에서 두번재 언리드', unreadMsg)
+//     console.log('서버에서 언리드', leaveTime)
+//     let count = 0
+//     for (let i = 0; i <= unreadMsg.length - 1; i++) {
+//         const dbtime = Date.parse(unreadMsg[i].createdAt)
+//         const parsedleaveTime = Date.parse(leaveTime)
+//         if (parsedleaveTime > dbtime) {
+//             console.log('이번째부터 나중에온 메세지', i)
+//             count += 1
+//         }
+//     }
+//     console.log('카운트 세버', count)
+//     return count
+// }
+
+// const dbChat = async (req, res) => {
+//     const chatlist = await Chat
+//     console.log(chatlist)
+
+// }
+
 export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf }

server/controllers/roomEnter.controller.js

 import Room from "../models/Room.js"
+import Chat from "../models/Chat.js";
+import User from "../models/User.js";
 
 const roomEnter = async (req, res) => {
     const roomId = req.body.enterCode
@@ -22,4 +24,30 @@ const roomEnter = async (req, res) => {
     }
 }
 
-export default { roomEnter }
+const getChatInfo = async (req, res) => {
\ No newline at end of file
+    const roomId = req.query.roomCode
+    try {
+        const room_id = await Room.find({ roomId: roomId }).select('_id')  //roomId로 해당 방의 _id를 찾아옴
+        let infolist = await Chat.find({ room: room_id }).select('message username createdAt')
+        res.json(infolist)
+    } catch (error) {
+        res.status(500).send('이전 채팅 정보 불러오기를 실패하였습니다!')
+    }
+}
+
+const getProfileImage = async (req, res) => {
+    const nicknamelist = req.query.userlist
+    try {
+        let imglist = []
+        for (let i = 0; i <= nicknamelist.length - 1; i++) {
+            const eachimg = await User.find({ nickname: nicknamelist[i] }).select('profileimg')
+            imglist = [...imglist, eachimg]
+        }
+        res.json(imglist)
+
+    } catch (error) {
+        res.status(500).send('프로필 사진 정보 불러오기를 실패하였습니다!')
+    }
+}
+
+export default { roomEnter, getChatInfo, getProfileImage }
\ No newline at end of file

server/routes/room.routers.js

@@ -21,4 +21,11 @@ router.route('/room/member')
 
 router.route('/room/getRoomName')
     .get(roomCtrl.getRoomName)
+
+// router.route('/room/unreadMessage')
+//     .get(roomCtrl.unreadMessage)
+
+// router.route('/room/dbChat')
+//     .get(roomCtrl.dbChat)
+
 export default router
\ No newline at end of file

server/routes/roomEnter.routers.js

@@ -5,4 +5,11 @@ const router = express.Router()
 
 router.route('/room/enterRoom')
     .post(roomEnterCtrl.roomEnter)
+
+router.route('/room/getChatInfo')
+    .get(roomEnterCtrl.getChatInfo)
+
+router.route('/room/getProfileImage')
+    .get(roomEnterCtrl.getProfileImage)
+
 export default router
\ No newline at end of file

server/server.js

@@ -47,7 +47,7 @@ io.on("connection", (socket) => { // 기본 연결
     console.log('resChat확인', chat)
 
     socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.sendInfo); // sender 제외 특정 방으로
-console.log('broad cst실핼')
+    console.log('broad cst실핼')
   });
 
   socket.on('disconnect', () => {