Skip to content

GitLab

Commit df3bd4e9 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

chat 변수 형태 변경

parent ceffe918
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ df3bd4e9
......@@ -4,12 +4,19 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
const INIT_CHAT = {
msg: '',
sender: '',
img: '',
time: ''
}
function Chat(props) {
const [sender, setSender] = useState([])
const [roomName, setRoomName] = 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 [time, setTime] = useState([''])
......@@ -17,7 +24,6 @@ function Chat(props) {
const usualTime = simpleTime.substring(0, simpleTime.length - 3)
const realTime = new Date().toISOString()
const r = Date.parse(realTime)
const [disabled, setDisabled] = useState(true)
......@@ -49,6 +55,7 @@ const r = Date.parse(realTime)
e.preventDefault()
setInner(e.target.value)
setDisabled(false)
console.log(chat)
}
function sendMsgCH(e) {
......@@ -62,18 +69,35 @@ const r = Date.parse(realTime)
props.sendMsg(e)
setInner('')
setDisabled(true)
// console.log('보내기', chat)
}
function handleClick() {
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)
setChat([''])
// props.handleChatc()
// console.log("22222222222222222", props.leaveInfo)
// let find1 = props.leaveInfo.findIndex((ele) => ele.roomName === props.roomCode)
// 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) {
......@@ -97,28 +121,26 @@ const r = Date.parse(realTime)
//메세지, 닉네임, 시간 불러오기
const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
const info = respond.data
let chatlist = []
let intochat = []
let msglist = []
let userlist = []
let timelist = []
let hourlist = []
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]
for (let prop in info) {
let hour = info[prop].createdAt.split('T')[1].split(':')
hour = settingtime(hour[0]) + ':' + hour[1]
msglist.push(info[prop].message)
userlist.push(info[prop].username)
hourlist.push(hour)
}
//그 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]
imglist = respond2.data
console.log('확인해보자', imglist)
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)
setSender(userlist)
setImg(imglist)
setTime(timelist)
setChat(intochat)
}
useEffect(() => {
......@@ -126,26 +148,17 @@ const r = Date.parse(realTime)
}, [userId])
useEffect(() => {
setTime([...time, props.singleTime])
setImg([...img, props.singleImg])
setSender([...sender, props.singleUser])
setChat([...chat, props.singleChat])
setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }])
}, [props.singleChat])
useEffect(() => {
setTime([...time, props.recievedTime])
setImg([...img, props.recievedImg])
setSender([...sender, props.recievedUser])
setChat([...chat, props.recievedMsg])
setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }])
}, [props.recievedMsg])
useEffect(() => {
getPreviousChat()
}, [props.roomCode])
useEffect(() => {
getRoomName(props.roomCode)
console.log('겟 룸네임', chat)
getPreviousChat()
// console.log('겟 룸네임', chat)
}, [props.roomCode])
......@@ -163,18 +176,18 @@ const r = Date.parse(realTime)
</Row>
<p>{props.newUser}님이 입장하셨습니다.</p>
{chat.map((value, index) => {
if (!(value == '')) {
if (!(sender[index] === user.nickname)) {
if (!(value.msg == '')) {
if (!(value.sender === user.nickname)) {
return (
<Row key={index} className='m-1' >
<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 xs={8}>
<Row><strong>{sender[index]}</strong></Row>
<Row><strong>{value.sender}</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[index]}</Col>
<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'>{value.time}</Col>
</Row>
</Col>
</Row>
......@@ -183,8 +196,8 @@ const r = Date.parse(realTime)
return (
<Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' >
<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>
<Col className='mr-1'>{value.time}</Col>
<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>
)
......
client/src/Components/ClosedList.js
View file @ df3bd4e9
......@@ -2,17 +2,21 @@ import React, { useState, useEffect } from 'react'
import { Badge, Button, ListGroup } from 'react-bootstrap';
import axios from 'axios'
const INIT_LIST = [{
interest: '',
isOpen: '',
memeber: [],
roomId: '',
roomName: '',
}]
function ClosedList(props) {
const [list, setList] = useState([]);
const [list, setList] = useState(INIT_LIST);
useEffect(() => {
getClosedList();
}, [props.roomCode]);
useEffect(() => {
console.log('안읽은정보', props.leaveInfo)
}, [props.leaveInfo])
async function getClosedList() {
const userid = sessionStorage.getItem('userId')
......@@ -20,30 +24,54 @@ function ClosedList(props) {
setList(res.data)
}
const realTime = new Date().toISOString()
function enterChatRoomCH(e) {
const roomCode = e.target.name
const roomName = e.target.value
props.enterChatRoom(roomCode)
props.setRoomCode(roomCode)
console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
}
// 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)
// },[])
const [checknew, setChecknew] = useState([])
const [unreadnumber, setUnreadnumber] = useState([''])
async function dbChat() {
for (let i = 0; i <= list.length - 1; i++) {
const respond = await axios.get('/room/dbChat', { params: { 'roomId': list[i].roomId } })
setChecknew(respond.data)
}
}
useEffect(() => {
dbChat()
}, [props.singleChat, props.recievedMsg])
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 (
<div>
......@@ -51,7 +79,7 @@ function ClosedList(props) {
<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>
{unreadnumber[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''}
</ListGroup.Item>
</ListGroup>
)}
......
client/src/Pages/HomePage.js
View file @ df3bd4e9
......@@ -44,7 +44,7 @@ function Home() {
const [singleTime, setSingleTime] = useState('')
const [recievedTime, setRecievedTime] = useState('')
const [leaveInfo, setLeaveInfo] = useState([''])
const [leaveInfo, setLeaveInfo] = useState([{roomName:"" , leaveTime: ""}])
//SOCKET 관련 시작
......@@ -131,7 +131,7 @@ function Home() {
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<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 eventKey="open" title="공개방" onClick={handleChatc}>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
......
server/controllers/room.controller.js
View file @ df3bd4e9
......@@ -104,45 +104,40 @@ 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])
// }
const unreadMessage = async (req, res) => {
let leaveInfo = req.query.leaveInfo
const roomId = req.query.roomId
let leaveTime = ''
for (let i = 1; i < leaveInfo.length; 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
// }
for (let i = 1; i <= leaveInfo.length - 1; i++) { //그 방의 id와 나간기록의 방과 일치하는지 확인하고
if (leaveInfo[i].roomName === roomId) {
leaveTime = leaveInfo[i].leaveTime //그 방에서 나간 시간을 찾아옴
break;
}
}
// const dbChat = async (req, res) => {
// const chatlist = await Chat
// console.log(chatlist)
const room_id = await Room.find({ roomId: roomId }).select('_id') //id로 _id를 찾아와서
let unreadMsg = await Chat.find({ room: room_id }).select('createdAt') //그 방의 메세지와 전송시간을 가져옴
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 }
server/controllers/roomEnter.controller.js
View file @ df3bd4e9
......@@ -39,8 +39,9 @@ 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')
for (let prop in nicknamelist) {
const getimg = await User.find({ nickname: nicknamelist[prop] }).select('profileimg')
const eachimg = { profileimg: getimg[0].profileimg }
imglist = [...imglist, eachimg]
}
res.json(imglist)
......
server/models/User.js
View file @ df3bd4e9
......@@ -3,6 +3,7 @@
import mongoose from 'mongoose'
const { String } = mongoose.Schema.Types
const { Array } = mongoose.Schema.Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨.
......@@ -31,8 +32,11 @@ const UserSchema = new mongoose.Schema({
},
profileimg: {
type: String,
default : '3cd14b9bcb2007f324fcb82e0b566cce',
default: '3cd14b9bcb2007f324fcb82e0b566cce',
},
entrylog: {
type: Array,
}
}, {
//옵셥을 정의함.
timestamps: true
......
server/routes/room.routers.js
View file @ df3bd4e9
......@@ -22,10 +22,10 @@ router.route('/room/member')
router.route('/room/getRoomName')
.get(roomCtrl.getRoomName)
// router.route('/room/unreadMessage')
// .get(roomCtrl.unreadMessage)
router.route('/room/unreadMessage')
.get(roomCtrl.unreadMessage)
// router.route('/room/dbChat')
// .get(roomCtrl.dbChat)
router.route('/room/dbChat')
.get(roomCtrl.dbChat)
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