Skip to content

GitLab

Commit ceffe918 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

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

parent b8642753
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ ceffe918
......@@ -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
View file @ ceffe918
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
View file @ ceffe918
......@@ -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
View file @ ceffe918
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
View file @ ceffe918
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 }
\ No newline at end of file
const getChatInfo = async (req, res) => {
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
View file @ ceffe918
......@@ -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
View file @ ceffe918
......@@ -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
View file @ ceffe918
......@@ -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', () => {
......
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