Commit 64eb02df authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0118value두번찍히는현상

parent 645bf09c
...@@ -25,15 +25,24 @@ function Chat(props) { ...@@ -25,15 +25,24 @@ function Chat(props) {
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => {
setChat([...chat, props.recievedMsg])
}, [props.recievedMsg])
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}> <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<h2>현재 {props.roomName} 입니다.</h2> <h2>현재 {props.roomName} 입니다.</h2>
{ chat.map((value, index) => ( { chat.map((value, index) => {
<Row key={index} className='ml-3'> if (Boolean(value)) {
// console.log(`value=${value}=`)
return <Row key={index} className='ml-3'>
{props.roomName}에서 {defaultname}님이 보낸 메세지 : {value} {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
</Row> </Row>
))} } else {
return null
}
})}
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}> <Form onSubmit={sendMsgCH}>
<Form.Group> <Form.Group>
...@@ -49,4 +58,5 @@ function Chat(props) { ...@@ -49,4 +58,5 @@ function Chat(props) {
); );
} }
export default Chat; export default Chat;
...@@ -19,7 +19,7 @@ function OpenList(props) { ...@@ -19,7 +19,7 @@ function OpenList(props) {
{list.map((list, index) => {list.map((list, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatroomCH} name={list.room}> <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
<h2>{list.room}</h2> {list.room}
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
)} )}
......
...@@ -27,6 +27,7 @@ function Home() { ...@@ -27,6 +27,7 @@ function Home() {
const [error, setError] = useState(''); const [error, setError] = useState('');
const [singleChat, setSingleChat] = useState('') const [singleChat, setSingleChat] = useState('')
const [recievedMsg, setRecievedMsg] = useState('')
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
...@@ -74,11 +75,20 @@ function Home() { ...@@ -74,11 +75,20 @@ function Home() {
roomName: roomName, roomName: roomName,
msg: singleChat msg: singleChat
}) })
socket.on('broadcast', (msg) => { }, [singleChat])
useEffect(() => {
socket.on("sendedMSG", (msg) => {
console.log(msg) console.log(msg)
setSingleChat(msg) setRecievedMsg(msg)
}) })
}, [singleChat]) }, [])
// socket.on('broadcast', (msg) => {
// console.log(msg)
// setSingleChat(msg)
// }, se)
return ( return (
<> <>
...@@ -95,7 +105,7 @@ function Home() { ...@@ -95,7 +105,7 @@ function Home() {
</Tabs> </Tabs>
</Col> </Col>
<Col style={{ padding: "0" }}> <Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null} {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomName={roomName}/> : null}
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}> <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShow} size="lg" block> <Button variant="primary" onClick={handleShow} size="lg" block>
......
...@@ -43,10 +43,6 @@ const signup = async (req, res) => { ...@@ -43,10 +43,6 @@ const signup = async (req, res) => {
res.status(500).send('회원가입 에러발생하였습니다.') res.status(500).send('회원가입 에러발생하였습니다.')
} }
} }
const hello = async (req, res) => {
let users = await User.find().select('name nickname email _id').exec()
return res.json(users)
}
const logineduser = async (req, res) => { const logineduser = async (req, res) => {
try { try {
...@@ -59,12 +55,12 @@ const logineduser = async (req, res) => { ...@@ -59,12 +55,12 @@ const logineduser = async (req, res) => {
const changenick = async (req, res) => { const changenick = async (req, res) => {
try { try {
const newnick = req.body.nickname const newnick = req.body.nickname
await User.update({ 'username': req.body.username }, { 'nickname': newnick }) await User.updateOne({ 'username': req.body.username }, { 'nickname': newnick })
} catch (error) { } catch (error) {
alert('올바르지 못한 접근입니다.') alert('올바르지 못한 접근입니다.')
} }
} }
export default { signup, hello, logineduser, changenick } export default { signup, logineduser, changenick }
// {} : 객체로 return함 // {} : 객체로 return함
\ No newline at end of file
...@@ -6,7 +6,6 @@ const router = express.Router() ...@@ -6,7 +6,6 @@ const router = express.Router()
router.route('/users/signup') router.route('/users/signup')
.post(userCtrl.signup) .post(userCtrl.signup)
.get(userCtrl.hello)
router.route(`/users/:userId`) router.route(`/users/:userId`)
.post(userCtrl.logineduser) .post(userCtrl.logineduser)
......
...@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결
socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴 socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
}); });
socket.on('chat', (data)=>{ // socket.on('chat', (data)=>{
io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게 // io.to(data.roomName).emit('chat',data.msg); //roomName에 존재하는 모든 소켓들에게
}) // })
socket.on('chat', (data) => {
socket.broadcast.emit('sendedMSG', data.msg ); // everyone gets it but the 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