Commit 0c3abc4c authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

채팅에서 프로필 구분

parent 0d18a2ca
node_modules node_modules
package-lock.json package-lock.json
uploads
\ No newline at end of file
...@@ -4,7 +4,6 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; ...@@ -4,7 +4,6 @@ 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';
function Chat(props) { function Chat(props) {
// let defaultname = sessionStorage.getItem('name'); // let defaultname = sessionStorage.getItem('name');
...@@ -12,6 +11,9 @@ function Chat(props) { ...@@ -12,6 +11,9 @@ function Chat(props) {
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지
const [img, setImg] = useState([])
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
const [user, setUser] = useState('') const [user, setUser] = useState('')
const [error, setError] = useState(''); const [error, setError] = useState('');
...@@ -29,57 +31,50 @@ function Chat(props) { ...@@ -29,57 +31,50 @@ function Chat(props) {
function handleChange(e) { function handleChange(e) {
e.preventDefault() e.preventDefault()
setInner(e.target.value) setInner(e.target.value)
console.log(e.target.value)
setDisabled(false) setDisabled(false)
} }
function sendMsgCH(e) { function sendMsgCH(e) {
e.preventDefault() e.preventDefault()
props.setSingleUser(sessionStorage.getItem('name')) props.setSingleImg(user.profileimg)
props.setSingleUser(user.nickname)
// 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)
} }
useEffect(() => { useEffect(() => {
getProfile(userId) getProfile(userId)
}, [userId]) }, [userId])
useEffect(() => { useEffect(() => {
setImg([...img, props.singleImg])
setSender([...sender, props.singleUser]) setSender([...sender, props.singleUser])
console.log('UseEffect singleUser', sender)
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
// console.log('UseEffect singlechat', chat)
console.log('Chat에 Sing있는 name = ', props.singleUser)
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => { useEffect(() => {
setImg([...img, props.recievedImg])
setSender([...sender, props.recievedUser]) setSender([...sender, props.recievedUser])
console.log('UseEffect RecievedUser', sender)
console.log('Chat에 Reci있는 name = ')
setChat([...chat, props.recievedMsg]) setChat([...chat, props.recievedMsg])
// console.log('UseEffect recievechat', chat)
}, [props.recievedMsg]) }, [props.recievedMsg])
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
return ( return (
<Container className="chat" id="chat" style={{ padding: '20px', border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2> <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
{/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */} {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value == '')) { if (!(value == '')) {
if (!(sender[index] === sessionStorage.getItem('name'))) { if (!(sender[index] === user.nickname)) {
return ( return (
<Row key={index} className='m-1' > <Row key={index} className='m-1' >
<Col xs={2}> <Col xs={2}>
{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 />} <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
</Col> </Col>
<Col xs={8}> <Col xs={8}>
<Row><strong>{sender[index]}</strong></Row> <Row><strong>{sender[index]}</strong></Row>
...@@ -107,16 +102,18 @@ function Chat(props) { ...@@ -107,16 +102,18 @@ function Chat(props) {
} }
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
</Container >
<Form onSubmit={sendMsgCH} fluid>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} /> <Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}> <Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
전송 전송
</Button> </Button>
</Form.Group> </Form.Group>
</Form> </Form>
</Container > </>
); );
...@@ -124,3 +121,4 @@ function Chat(props) { ...@@ -124,3 +121,4 @@ function Chat(props) {
export default Chat; export default Chat;
...@@ -25,6 +25,9 @@ function Home() { ...@@ -25,6 +25,9 @@ function Home() {
const [singleUser, setSingleUser] = useState('') const [singleUser, setSingleUser] = useState('')
const [recievedUser, setRecievedUser] = useState('') const [recievedUser, setRecievedUser] = useState('')
const [singleImg, setSingleImg] = useState('')
const [recievedImg, setRecievedImg] = useState('')
//방참가 //방참가
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
...@@ -53,7 +56,7 @@ function Home() { ...@@ -53,7 +56,7 @@ function Home() {
if (!(singleChat == '')) { if (!(singleChat == '')) {
socket.emit("chat", { socket.emit("chat", {
roomInfo: roomCode, roomInfo: roomCode,
msg: { msg: singleChat, sender: singleUser }, sendInfo: { msg: singleChat, sender: singleUser, img: singleImg },
}) })
//setSingleChat(['']) //setSingleChat([''])
} }
...@@ -61,12 +64,10 @@ function Home() { ...@@ -61,12 +64,10 @@ function Home() {
useEffect(() => { useEffect(() => {
socket.on("sendedMSG", (msg) => { socket.on("sendedMSG", (sendInfo) => {
console.log('홈페이지 센드', msg.msg, '이름은', msg.sender) setRecievedImg(sendInfo.img)
setRecievedUser(msg.sender) setRecievedUser(sendInfo.sender)
setRecievedMsg(msg.msg) setRecievedMsg(sendInfo.msg)
console.log('SENDEDMSG REC= ', recievedUser)
}) })
}, []) }, [])
...@@ -88,7 +89,7 @@ function Home() { ...@@ -88,7 +89,7 @@ function Home() {
</Tabs> </Tabs>
</Col> </Col>
<Col style={{ padding: "0" }}> <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} {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleImg={singleImg} setSingleImg={setSingleImg} recievedImg={recievedImg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}> <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block> <Button variant="primary" onClick={handleShowModal} size="lg" block>
......
...@@ -6,7 +6,6 @@ import axios from 'axios' ...@@ -6,7 +6,6 @@ import axios from 'axios'
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
const INIT_USER = { const INIT_USER = {
username: '', username: '',
email: '', email: '',
...@@ -83,7 +82,7 @@ function ProfilePage() { ...@@ -83,7 +82,7 @@ function ProfilePage() {
<Row > <Row >
<Col sm={4}> <Col sm={4}>
<Row className='justify-content-center'> <Row className='justify-content-center'>
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle />
</Row> </Row>
<Row className='ml-3 mt-3 justify-content-center'> <Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex"> <Form className="d-flex">
......
...@@ -30,7 +30,8 @@ const UserSchema = new mongoose.Schema({ ...@@ -30,7 +30,8 @@ const UserSchema = new mongoose.Schema({
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨) //플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
}, },
profileimg: { profileimg: {
type: String type: String,
default : '3cd14b9bcb2007f324fcb82e0b566cce',
}, },
}, { }, {
//옵셥을 정의함. //옵셥을 정의함.
......
...@@ -28,7 +28,7 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -28,7 +28,7 @@ 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.sendInfo ); // sender 제외 특정 방으로
}); });
......
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