Commit df3bd4e9 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

chat 변수 형태 변경

parent ceffe918
...@@ -4,12 +4,19 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; ...@@ -4,12 +4,19 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
const INIT_CHAT = {
msg: '',
sender: '',
img: '',
time: ''
}
function Chat(props) { function Chat(props) {
const [sender, setSender] = useState([]) const [sender, setSender] = useState([])
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([INIT_CHAT]) //object로 key는 보낸사람 value는 메세지
const [img, setImg] = useState([]) const [img, setImg] = useState([])
const [time, setTime] = useState(['']) const [time, setTime] = useState([''])
...@@ -17,7 +24,6 @@ function Chat(props) { ...@@ -17,7 +24,6 @@ function Chat(props) {
const usualTime = simpleTime.substring(0, simpleTime.length - 3) const usualTime = simpleTime.substring(0, simpleTime.length - 3)
const realTime = new Date().toISOString() const realTime = new Date().toISOString()
const r = Date.parse(realTime)
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
...@@ -49,6 +55,7 @@ const r = Date.parse(realTime) ...@@ -49,6 +55,7 @@ const r = Date.parse(realTime)
e.preventDefault() e.preventDefault()
setInner(e.target.value) setInner(e.target.value)
setDisabled(false) setDisabled(false)
console.log(chat)
} }
function sendMsgCH(e) { function sendMsgCH(e) {
...@@ -62,18 +69,35 @@ const r = Date.parse(realTime) ...@@ -62,18 +69,35 @@ const r = Date.parse(realTime)
props.sendMsg(e) props.sendMsg(e)
setInner('') setInner('')
setDisabled(true) setDisabled(true)
// console.log('보내기', chat)
} }
function handleClick() { function handleClick() {
props.setRecievedMsg('') props.setRecievedMsg('')
console.log('chat1', chat) setChat([''])
setChat(['초기화 '])
// props.handleChatc()
console.log('chat2', chat) // console.log("22222222222222222", props.leaveInfo)
props.handleChatc()
props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }]) // let find1 = props.leaveInfo.findIndex((ele) => ele.roomName === props.roomCode)
console.log('나간시간',realTime, usualTime) // console.log("33333333333333333", find1)
// let find=0
// for(let i=0;i<=props.leaveInfo.length-1;i++){
// if(props.leaveInfo[i].roomName===props.roomCode){
// find = i
// break;
// }
// console.log('찾자',find)
// }
// if (props.leaveInfo[find1]) {
// props.setLeaveInfo(props.leaveInfo[find1] = { roomName: props.roomCode, leaveTime: realTime })
// console.log('트루')
// } else {
// props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
// console.log('폴스')
// }
// console.log('나간다', props.leaveInfo)
} }
function settingtime(hour) { function settingtime(hour) {
...@@ -97,28 +121,26 @@ const r = Date.parse(realTime) ...@@ -97,28 +121,26 @@ const r = Date.parse(realTime)
//메세지, 닉네임, 시간 불러오기 //메세지, 닉네임, 시간 불러오기
const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } }) const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
const info = respond.data const info = respond.data
let chatlist = []
let intochat = []
let msglist = []
let userlist = [] let userlist = []
let timelist = [] let hourlist = []
let imglist = [] let imglist = []
for (let i = 0; i <= info.length - 1; i++) { //사용하려는 형식에 맞게 수정 for (let prop in info) {
chatlist = [...chatlist, info[i].message] let hour = info[prop].createdAt.split('T')[1].split(':')
userlist = [...userlist, info[i].username] hour = settingtime(hour[0]) + ':' + hour[1]
timelist = [...timelist, info[i].createdAt] msglist.push(info[prop].message)
let hour = timelist[i].split('T')[1].split(':') userlist.push(info[prop].username)
timelist[i] = settingtime(hour[0]) + ':' + hour[1] hourlist.push(hour)
} }
//그 nick에 맞는 프사 불러오기
const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } }) const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } })
const imginfo = respond2.data imglist = respond2.data
for (let j = 0; j <= imginfo.length - 1; j++) { console.log('확인해보자', imglist)
imglist = [...imglist, imginfo[j][0].profileimg] for (let i = 0; i < msglist.length; i++) {
intochat.push({ msg: msglist[i], sender: userlist[i], img: imglist[i].profileimg, time: hourlist[i] })
} }
setChat(chatlist) setChat(intochat)
setSender(userlist)
setImg(imglist)
setTime(timelist)
} }
useEffect(() => { useEffect(() => {
...@@ -126,26 +148,17 @@ const r = Date.parse(realTime) ...@@ -126,26 +148,17 @@ const r = Date.parse(realTime)
}, [userId]) }, [userId])
useEffect(() => { useEffect(() => {
setTime([...time, props.singleTime]) setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }])
setImg([...img, props.singleImg])
setSender([...sender, props.singleUser])
setChat([...chat, props.singleChat])
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => { useEffect(() => {
setTime([...time, props.recievedTime]) setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }])
setImg([...img, props.recievedImg])
setSender([...sender, props.recievedUser])
setChat([...chat, props.recievedMsg])
}, [props.recievedMsg]) }, [props.recievedMsg])
useEffect(() => {
getPreviousChat()
}, [props.roomCode])
useEffect(() => { useEffect(() => {
getRoomName(props.roomCode) getRoomName(props.roomCode)
console.log('겟 룸네임', chat) getPreviousChat()
// console.log('겟 룸네임', chat)
}, [props.roomCode]) }, [props.roomCode])
...@@ -163,18 +176,18 @@ const r = Date.parse(realTime) ...@@ -163,18 +176,18 @@ const r = Date.parse(realTime)
</Row> </Row>
<p>{props.newUser}님이 입장하셨습니다.</p> <p>{props.newUser}님이 입장하셨습니다.</p>
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value == '')) { if (!(value.msg == '')) {
if (!(sender[index] === user.nickname)) { if (!(value.sender === user.nickname)) {
return ( return (
<Row key={index} className='m-1' > <Row key={index} className='m-1' >
<Col xs={2}> <Col xs={2}>
<Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
</Col> </Col>
<Col xs={8}> <Col xs={8}>
<Row><strong>{sender[index]}</strong></Row> <Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <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> <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.msg}</Row>
<Col className='ml-1'>{time[index]}</Col> <Col className='ml-1'>{value.time}</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
...@@ -183,8 +196,8 @@ const r = Date.parse(realTime) ...@@ -183,8 +196,8 @@ const r = Date.parse(realTime)
return ( return (
<Row key={index} className='m-1 justify-content-end'> <Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' > <Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{time[index]}</Col> <Col className='mr-1'>{value.time}</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 className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
</Row> </Row>
</Row> </Row>
) )
......
...@@ -2,17 +2,21 @@ import React, { useState, useEffect } from 'react' ...@@ -2,17 +2,21 @@ import React, { useState, useEffect } from 'react'
import { Badge, Button, ListGroup } from 'react-bootstrap'; import { Badge, Button, ListGroup } from 'react-bootstrap';
import axios from 'axios' import axios from 'axios'
const INIT_LIST = [{
interest: '',
isOpen: '',
memeber: [],
roomId: '',
roomName: '',
}]
function ClosedList(props) { function ClosedList(props) {
const [list, setList] = useState([]); const [list, setList] = useState(INIT_LIST);
useEffect(() => { useEffect(() => {
getClosedList(); getClosedList();
}, [props.roomCode]); }, [props.roomCode]);
useEffect(() => {
console.log('안읽은정보', props.leaveInfo)
}, [props.leaveInfo])
async function getClosedList() { async function getClosedList() {
const userid = sessionStorage.getItem('userId') const userid = sessionStorage.getItem('userId')
...@@ -20,30 +24,54 @@ function ClosedList(props) { ...@@ -20,30 +24,54 @@ function ClosedList(props) {
setList(res.data) setList(res.data)
} }
const realTime = new Date().toISOString()
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
const roomCode = e.target.name const roomCode = e.target.name
const roomName = e.target.value const roomName = e.target.value
props.enterChatRoom(roomCode) props.enterChatRoom(roomCode)
props.setRoomCode(roomCode) props.setRoomCode(roomCode)
console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
} }
// async function unreadMessage() {
// //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨 const [checknew, setChecknew] = useState([])
// //물론 그 방 별로 찾아서 list를 맵써서 하던? const [unreadnumber, setUnreadnumber] = useState([''])
// const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': 'fd5243a90f' } }) async function dbChat() {
// console.log('클라이언트 클로즈드 카운드', respond) for (let i = 0; i <= list.length - 1; i++) {
// // console.log('클라이언트 unreadmsg',respond.data) const respond = await axios.get('/room/dbChat', { params: { 'roomId': list[i].roomId } })
// const respond222 = await axios.get('/room/dbChat') setChecknew(respond.data)
// return respond }
// } }
// let c='' useEffect(() => {
// useEffect(() => { dbChat()
// c =unreadMessage() }, [props.singleChat, props.recievedMsg])
// console.log('클로즈드 이펙트',c)
useEffect(() => {
// },[]) // console.log('chat 클라이언트 변경!')
unreadMessage()
}, [checknew])
async function unreadMessage() {
//여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
//물론 그 방 별로 찾아서 list를 맵써서 하던?
// console.log('ddddddddd', list[0].roomId)
setUnreadnumber([''])
let arr = []
for (let i = 0; i <= list.length - 1; i++) {
const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': list[i].roomId } })
// setUnreadnumber([...unreadnumber, respond.data])
arr = [...arr, respond.data]
}
setUnreadnumber(arr)
// console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)
}
return ( return (
<div> <div>
...@@ -51,7 +79,7 @@ function ClosedList(props) { ...@@ -51,7 +79,7 @@ function ClosedList(props) {
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
{item.roomName} {item.roomName}
<Badge className='ml-2' pill variant='danger'>8</Badge> {unreadnumber[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''}
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
)} )}
......
...@@ -44,7 +44,7 @@ function Home() { ...@@ -44,7 +44,7 @@ function Home() {
const [singleTime, setSingleTime] = useState('') const [singleTime, setSingleTime] = useState('')
const [recievedTime, setRecievedTime] = useState('') const [recievedTime, setRecievedTime] = useState('')
const [leaveInfo, setLeaveInfo] = useState(['']) const [leaveInfo, setLeaveInfo] = useState([{roomName:"" , leaveTime: ""}])
//SOCKET 관련 시작 //SOCKET 관련 시작
...@@ -131,7 +131,7 @@ function Home() { ...@@ -131,7 +131,7 @@ function Home() {
<Col className="list" md={5}> <Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"> <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList leaveInfo={leaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <ClosedList singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tab> </Tab>
<Tab eventKey="open" title="공개방" onClick={handleChatc}> <Tab eventKey="open" title="공개방" onClick={handleChatc}>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
......
...@@ -104,45 +104,40 @@ const roomInf = async (req, res) => { ...@@ -104,45 +104,40 @@ const roomInf = async (req, res) => {
} }
} }
// const unreadMessage = async (req, res) => { const unreadMessage = async (req, res) => {
// let leaveInfo = req.query.leaveInfo let leaveInfo = req.query.leaveInfo
// // leaveInfo.shift() const roomId = req.query.roomId
// const roomId = req.query.roomId let leaveTime = ''
// let leaveTime = '' for (let i = 1; i < leaveInfo.length; i++) { //일단 형식좀 맞추고
// for (let i = 1; i < leaveInfo.length - 1; i++) { //일단 형식좀 맞추고 leaveInfo[i] = JSON.parse(leaveInfo[i])
// leaveInfo[i] = JSON.parse(leaveInfo[i]) }
// }
// for (let i = 1; i <= leaveInfo.length - 1; i++) { //그 방의 id와 나간기록의 방과 일치하는지 확인하고 for (let i = 1; i <= leaveInfo.length - 1; i++) { //그 방의 id와 나간기록의 방과 일치하는지 확인하고
// if (leaveInfo[i].roomName === roomId) { if (leaveInfo[i].roomName === roomId) {
// leaveTime = leaveInfo[i].leaveTime //그 방에서 나간 시간을 찾아옴 leaveTime = leaveInfo[i].leaveTime //그 방에서 나간 시간을 찾아옴
// console.log('서버의 포문', i, leaveTime) break;
// 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 room_id = await Room.find({ roomId: roomId }).select('_id') //id로 _id를 찾아와서
// const chatlist = await Chat let unreadMsg = await Chat.find({ room: room_id }).select('createdAt') //그 방의 메세지와 전송시간을 가져옴
// console.log(chatlist) 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) { //시간 비교를하고 이후에 온 메세지의 개수를 count함
console.log('이번째부터 나중에온 메세지', i)
count += 1
}
}
res.json(count)
}
// } const dbChat = async (req, res) => {
const roomId = req.query.roomId
const room_id = await Room.find({ roomId: roomId }).select('_id')
let chatlist = await Chat.find({ room: room_id }).select('message')
res.json(chatlist)
}
export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf } export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf, unreadMessage, dbChat }
...@@ -39,8 +39,9 @@ const getProfileImage = async (req, res) => { ...@@ -39,8 +39,9 @@ const getProfileImage = async (req, res) => {
const nicknamelist = req.query.userlist const nicknamelist = req.query.userlist
try { try {
let imglist = [] let imglist = []
for (let i = 0; i <= nicknamelist.length - 1; i++) { for (let prop in nicknamelist) {
const eachimg = await User.find({ nickname: nicknamelist[i] }).select('profileimg') const getimg = await User.find({ nickname: nicknamelist[prop] }).select('profileimg')
const eachimg = { profileimg: getimg[0].profileimg }
imglist = [...imglist, eachimg] imglist = [...imglist, eachimg]
} }
res.json(imglist) res.json(imglist)
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import mongoose from 'mongoose' import mongoose from 'mongoose'
const { String } = mongoose.Schema.Types const { String } = mongoose.Schema.Types
const { Array } = mongoose.Schema.Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴. //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨. //object의 id를 쓸때에도 추가시켜줘야됨.
...@@ -31,8 +32,11 @@ const UserSchema = new mongoose.Schema({ ...@@ -31,8 +32,11 @@ const UserSchema = new mongoose.Schema({
}, },
profileimg: { profileimg: {
type: String, type: String,
default : '3cd14b9bcb2007f324fcb82e0b566cce', default: '3cd14b9bcb2007f324fcb82e0b566cce',
}, },
entrylog: {
type: Array,
}
}, { }, {
//옵셥을 정의함. //옵셥을 정의함.
timestamps: true timestamps: true
......
...@@ -22,10 +22,10 @@ router.route('/room/member') ...@@ -22,10 +22,10 @@ router.route('/room/member')
router.route('/room/getRoomName') router.route('/room/getRoomName')
.get(roomCtrl.getRoomName) .get(roomCtrl.getRoomName)
// router.route('/room/unreadMessage') router.route('/room/unreadMessage')
// .get(roomCtrl.unreadMessage) .get(roomCtrl.unreadMessage)
// router.route('/room/dbChat') router.route('/room/dbChat')
// .get(roomCtrl.dbChat) .get(roomCtrl.dbChat)
export default router export default router
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment