Skip to content

GitLab

Commit bd29d142 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

Chatting (no profile)

parent 228362f2
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ bd29d142
...@@ -8,6 +8,10 @@ import catchErrors from '../utils/catchErrors'; ...@@ -8,6 +8,10 @@ import catchErrors from '../utils/catchErrors';
function Chat(props) { function Chat(props) {
// let defaultname = sessionStorage.getItem('name'); // let defaultname = sessionStorage.getItem('name');
const [name, setName] = useState([''])
const [sender, setSender] = useState([])
const [senderimg, setSenderimg] = useState('')
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
...@@ -33,26 +37,49 @@ function Chat(props) { ...@@ -33,26 +37,49 @@ function Chat(props) {
function sendMsgCH(e) { function sendMsgCH(e) {
e.preventDefault() e.preventDefault()
setName(sessionStorage.getItem('name'))
props.setSingleUser(sessionStorage.getItem('name'))
props.setSingleChat(inner) props.setSingleChat(inner)
props.sendMsg(e) props.sendMsg(e)
setInner('') setInner('')
setDisabled(true) setDisabled(true)
console.log(chat) console.log(chat)
} }
useEffect(() => { useEffect(() => {
getProfile(userId) getProfile(userId)
}, [userId]) }, [userId])
useEffect(() => { useEffect(() => {
setSender([...sender, props.singleUser])
console.log('UseEffect singleUser', sender)
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
console.log('UseEffect singlechat', chat) // console.log('UseEffect singlechat', chat)
// check()
}, [props.singleChat])
console.log('Chat에 Sing있는 name = ', name, props.singleUser)
}, [props.singleChat, props.singleUser])
useEffect(() => { useEffect(() => {
setSender([...sender, props.recievedUser])
console.log('UseEffect RecievedUser', sender)
console.log('Chat에 Reci있는 name = ', name)
setChat([...chat, props.recievedMsg]) setChat([...chat, props.recievedMsg])
console.log('UseEffect recievechat', chat) // console.log('UseEffect recievechat', chat)
}, [props.recievedMsg])
// setName('')
}, [props.recievedMsg, props.recievedUser])
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
return ( return (
...@@ -61,46 +88,39 @@ function Chat(props) { ...@@ -61,46 +88,39 @@ function Chat(props) {
{/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */} {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value == '')) { if (!(value == '')) {
return (
<Row key={index} className='m-1 ml-3' > if (!(sender[index] === sessionStorage.getItem('name'))) {
<Col xs={2}> return (
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />} <Row key={index} className='m-1 ml-3' >
</Col> <Col xs={2}>
<Col xs={8}> {user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
<Row><strong>{user.nickname}의 {index}</strong></Row> </Col>
<Row className='d-flex flex-wrap-nowrap'> <Col xs={8}>
<Col className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Col> <Row><strong>{sender[index]} {index}</strong></Row>
<Col className='ml-4'>{new Date().toLocaleTimeString()}</Col> <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>
</Row>
</Col>
</Row>
)
}else{
return (
<Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{user.nickname}님 {time}</Col>
<Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</Row> </Row>
</Col> </Row>
</Row> )
) }
} else {
return null
}
})
}
{/* 내가 보낸 메세지 띄우기 */}
{chat.map((value, index) => {
if (!(value == '')) {
return (
<Row key={index} className='m-1 mr-4 justify-content-end'>
<div className='d-flex flex-wrap-nowrap' >
<Row className='mr-4'>{time}</Row>
<Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</div>
</Row>
)
} else { } else {
return null return null
} }
}) })
} }
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}> <Form onSubmit={sendMsgCH}>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'> <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
......
client/src/Pages/HomePage.js
View file @ bd29d142
...@@ -13,88 +13,98 @@ import EnterRoom from "../Components/EnterRoom" ...@@ -13,88 +13,98 @@ import EnterRoom from "../Components/EnterRoom"
const socket = io(); const socket = io();
function Home() { function Home() {
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [showEnter, setEnter] = useState(false); const [showEnter, setEnter] = useState(false);
const [chat, setChat] = useState(false); const [chat, setChat] = useState(false);
//소켓 //소켓
const [singleChat, setSingleChat] = useState('') const [singleChat, setSingleChat] = useState('')
const [recievedMsg, setRecievedMsg] = useState('') const [recievedMsg, setRecievedMsg] = useState('')
const [roomCode, setRoomCode] = useState('') const [roomCode, setRoomCode] = useState('')
//방참가 const [singleUser, setSingleUser] = useState('')
const [recievedUser, setRecievedUser] = useState('')
const [roomName, setRoomName] = useState('') //방참가
const handleCloseModal = () => setShowModal(false); const [roomName, setRoomName] = useState('')
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
//SOCKET 관련 시작
function enterChatRoom(rName) { //방 입장하기
socket.emit('joinRoom', rName)
console.log(`joinRoom : ${rName} 입장`)
}
const sendMsg = (e) => { //SOCKET 관련 시작
e.preventDefault() function enterChatRoom(rName) { //방 입장하기
} socket.emit('joinRoom', rName)
console.log(`joinRoom : ${rName} 입장`)
}
const sendMsg = (e) => {
e.preventDefault()
}
useEffect(() => {
if (!(singleChat == '')) { useEffect(() => {
socket.emit("chat", { if (!(singleChat == '')) {
roomInfo: roomCode, socket.emit("chat", {
msg: singleChat roomInfo: roomCode,
}) msg: { msg: singleChat, sender: singleUser },
setSingleChat(['']) })
} //setSingleChat([''])
}, [singleChat]) }
}, [singleChat, singleUser])
useEffect(() => {
socket.on("sendedMSG", (msg) => { useEffect(() => {
console.log(msg) socket.on("sendedMSG", (msg) => {
setRecievedMsg(msg) console.log('홈페이지 센드', msg.msg, '이름은', msg.sender)
}) setRecievedUser(msg.sender)
}, []) setRecievedMsg(msg.msg)
console.log('SENDEDMSG REC= ', recievedUser)
return (
<> })
<Menu /> }, [])
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} /> return (
</Tab> <>
<Tab eventKey="open" title="공개방" onClick={handleChato}> <Menu />
<OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} /> <Row className="mr-0">
</Tab> <Col className="list" md={5}>
</Tabs> <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
</Col> <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<Col style={{ padding: "0" }}> <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null} </Tab>
<Tab eventKey="open" title="공개방" onClick={handleChato}>
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}> <OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
<Button variant="primary" onClick={handleShowModal} size="lg" block> </Tab>
생성 </Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>
생성
</Button> </Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block> <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
참가 참가
</Button> </Button>
</div> </div>
</Col> </Col>
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName}/> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName} />
</> </>
); );
} }
export default Home; export default Home;
......
server/server.js
View file @ bd29d142
...@@ -28,10 +28,10 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -28,10 +28,10 @@ io.on("connection", (socket) => { // 기본 연결
socket.on('chat', (data) => { socket.on('chat', (data) => {
console.log('roomname확인', data) console.log('roomname확인', data)
socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로 socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로
}); });
socket.on('disconnect', () => { socket.on('disconnect', () => {
console.log('disconnected from server id=', socket.id) console.log('disconnected from server id=', socket.id)
}) })
......
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