Skip to content

GitLab

Commit 6a3b89dc authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Merge remote-tracking branch 'origin/yeonwoo' into young

parents b6680caf ceffe918
Show whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 6a3b89dc
......@@ -4,7 +4,6 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
function Chat(props) {
const [sender, setSender] = useState([])
......@@ -13,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('')
......@@ -56,6 +62,7 @@ function Chat(props) {
function sendMsgCH(e) {
e.preventDefault()
props.setSingleTime(usualTime)
props.setSingleImg(user.profileimg)
props.setSingleUser(user.nickname)
props.setSingleChat(inner)
......@@ -63,12 +70,63 @@ function Chat(props) {
props.sendMsg(e)
setInner('')
setDisabled(true)
// console.log('보내기', chat)
}
function handleClick() {
props.setRecievedMsg('')
setChat([])
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(() => {
......@@ -76,23 +134,30 @@ 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)
sysMsg(props.roomCode)
//sysMsg(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: '' }}>
......@@ -102,7 +167,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>
......@@ -118,7 +183,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>
......@@ -127,7 +192,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 @ 6a3b89dc
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/Components/OpenList.js
View file @ 6a3b89dc
......@@ -11,6 +11,7 @@ function OpenList(props) {
async function getOpenList() {
let res = await axios.get('/room/openlist')
console.log('getOpenlist', res.data)
setOpenlist(res.data)
}
......
client/src/Pages/HomePage.js
View file @ 6a3b89dc
import React, { useState, useEffect } from 'react';
import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
// import Tabs from 'react-bootstrap/Tabs';
// import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
import Menu from '../Components/Menu';
......@@ -42,6 +40,10 @@ function Home() {
const [singleImg, setSingleImg] = useState('')
const [recievedImg, setRecievedImg] = useState('')
const [singleTime, setSingleTime] = useState('')
const [recievedTime, setRecievedTime] = useState('')
const [leaveInfo, setLeaveInfo] = useState([''])
//SOCKET 관련 시작
async function enterChatRoom(rCode) { //방 입장하기
......@@ -56,6 +58,9 @@ function Home() {
// socket.emit('access', { rmIf: rCode, userInfo: userId })
// }
// console.log(`joinRoom : ${rCode} 입장`)
console.log(`joinRoom : ${rCode} 입장`)
console.log('123123방입ㄴ장')
//여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
}
const [roomName, setRoomName] = useState('')
......@@ -109,7 +114,8 @@ function Home() {
sendInfo: {
msg: singleChat,
sender: singleUser,
img: singleImg
img: singleImg,
time: singleTime
}
})
setSingleChat([''])
......@@ -119,6 +125,7 @@ function Home() {
useEffect(() => {
socket.on("sendedMSG", (sendInfo) => {
setRecievedTime(sendInfo.time)
setRecievedImg(sendInfo.img)
setRecievedUser(sendInfo.sender)
setRecievedMsg(sendInfo.msg)
......@@ -132,7 +139,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} />
......@@ -149,7 +156,7 @@ function Home() {
</div>
}
{chat ?
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} setRecievedMsg={setRecievedMsg} 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 @ 6a3b89dc
......@@ -2,6 +2,7 @@ import Room from "../models/Room.js"
import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.js'
//import AccessInfo from '../models/AccessInfo.js'
import Chat from "../models/Chat.js"
const nanoid = customAlphabet('1234567890abcdef', 10)
......@@ -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')
......@@ -122,4 +123,45 @@ const roomInf = async (req, res) => {
}
}
export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf, /*{sysMsg}*/ }
// 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 @ 6a3b89dc
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 @ 6a3b89dc
......@@ -24,4 +24,11 @@ router.route('/room/getRoomName')
// router.route('/room/sysMsg')
// .get(roomCtrl.sysMsg)
// router.route('/room/unreadMessage')
// .get(roomCtrl.unreadMessage)
// router.route('/room/dbChat')
// .get(roomCtrl.dbChat)
export default router
server/routes/roomEnter.routers.js
View file @ 6a3b89dc
......@@ -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 @ 6a3b89dc
......@@ -58,7 +58,7 @@ io.on("connection", (socket) => { // 기본 연결
console.log('resChat확인', chat)
socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.sendInfo); // sender 제외 특정 방으로
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