Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
messenger
Commits
bd29d142
Commit
bd29d142
authored
Jan 20, 2021
by
JeongYeonwoo
Browse files
Chatting (no profile)
parent
228362f2
Changes
3
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
bd29d142
...
...
@@ -8,6 +8,10 @@ import catchErrors from '../utils/catchErrors';
function
Chat
(
props
)
{
// let defaultname = sessionStorage.getItem('name');
const
[
name
,
setName
]
=
useState
([
''
])
const
[
sender
,
setSender
]
=
useState
([])
const
[
senderimg
,
setSenderimg
]
=
useState
(
''
)
const
[
inner
,
setInner
]
=
useState
([
''
])
const
[
chat
,
setChat
]
=
useState
([])
//object로 key는 보낸사람 value는 메세지
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
...
...
@@ -33,26 +37,49 @@ function Chat(props) {
function
sendMsgCH
(
e
)
{
e
.
preventDefault
()
setName
(
sessionStorage
.
getItem
(
'
name
'
))
props
.
setSingleUser
(
sessionStorage
.
getItem
(
'
name
'
))
props
.
setSingleChat
(
inner
)
props
.
sendMsg
(
e
)
setInner
(
''
)
setDisabled
(
true
)
console
.
log
(
chat
)
}
useEffect
(()
=>
{
getProfile
(
userId
)
},
[
userId
])
useEffect
(()
=>
{
setSender
([...
sender
,
props
.
singleUser
])
console
.
log
(
'
UseEffect singleUser
'
,
sender
)
setChat
([...
chat
,
props
.
singleChat
])
console
.
log
(
'
UseEffect singlechat
'
,
chat
)
// check()
},
[
props
.
singleChat
])
// console.log('UseEffect singlechat', chat)
console
.
log
(
'
Chat에 Sing있는 name =
'
,
name
,
props
.
singleUser
)
},
[
props
.
singleChat
,
props
.
singleUser
])
useEffect
(()
=>
{
setSender
([...
sender
,
props
.
recievedUser
])
console
.
log
(
'
UseEffect RecievedUser
'
,
sender
)
console
.
log
(
'
Chat에 Reci있는 name =
'
,
name
)
setChat
([...
chat
,
props
.
recievedMsg
])
console
.
log
(
'
UseEffect recievechat
'
,
chat
)
},
[
props
.
recievedMsg
])
// console.log('UseEffect recievechat', chat)
// setName('')
},
[
props
.
recievedMsg
,
props
.
recievedUser
])
const
time
=
new
Date
().
toLocaleTimeString
()
return
(
...
...
@@ -61,46 +88,39 @@ function Chat(props) {
{
/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */
}
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
if
(
!
(
sender
[
index
]
===
sessionStorage
.
getItem
(
'
name
'
)))
{
return
(
<
Row
key
=
{
index
}
className
=
'
m-1 ml-3
'
>
<
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
/>
}
<
/Col
>
<
Col
xs
=
{
8
}
>
<
Row
><
strong
>
{
user
.
nickname
}
의
{
index
}
<
/strong></
Row
>
<
Row
><
strong
>
{
sender
[
index
]}
{
index
}
<
/strong></
Row
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
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
>
<
Col
className
=
'
ml-
4
'
>
{
new
Date
().
toLocaleTimeString
()
}
<
/Col
>
<
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
null
}
})
}
{
/* 내가 보낸 메세지 띄우기 */
}
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
}
else
{
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
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
>
<
/div
>
<
/Row
>
<
/Row
>
)
}
}
else
{
return
null
}
})
}
<
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
'
>
...
...
client/src/Pages/HomePage.js
View file @
bd29d142
...
...
@@ -22,6 +22,9 @@ function Home() {
const
[
recievedMsg
,
setRecievedMsg
]
=
useState
(
''
)
const
[
roomCode
,
setRoomCode
]
=
useState
(
''
)
const
[
singleUser
,
setSingleUser
]
=
useState
(
''
)
const
[
recievedUser
,
setRecievedUser
]
=
useState
(
''
)
//방참가
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
...
...
@@ -45,24 +48,31 @@ function Home() {
e
.
preventDefault
()
}
useEffect
(()
=>
{
if
(
!
(
singleChat
==
''
))
{
socket
.
emit
(
"
chat
"
,
{
roomInfo
:
roomCode
,
msg
:
singleChat
msg
:
{
msg
:
singleChat
,
sender
:
singleUser
},
})
setSingleChat
([
''
])
//
setSingleChat([''])
}
},
[
singleChat
])
},
[
singleChat
,
singleUser
])
useEffect
(()
=>
{
socket
.
on
(
"
sendedMSG
"
,
(
msg
)
=>
{
console
.
log
(
msg
)
setRecievedMsg
(
msg
)
console
.
log
(
'
홈페이지 센드
'
,
msg
.
msg
,
'
이름은
'
,
msg
.
sender
)
setRecievedUser
(
msg
.
sender
)
setRecievedMsg
(
msg
.
msg
)
console
.
log
(
'
SENDEDMSG REC=
'
,
recievedUser
)
})
},
[])
return
(
<>
<
Menu
/>
...
...
@@ -78,7 +88,7 @@ function Home() {
<
/Tabs
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
setSingleChat
=
{
setSingleChat
}
roomCode
=
{
roomCode
}
/> : null
}
{
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
>
...
...
@@ -92,7 +102,7 @@ function Home() {
<
/Col
>
<
/Row
>
<
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
}
/
>
<
/
>
);
}
...
...
server/server.js
View file @
bd29d142
...
...
@@ -29,9 +29,9 @@ io.on("connection", (socket) => { // 기본 연결
socket
.
on
(
'
chat
'
,
(
data
)
=>
{
console
.
log
(
'
roomname확인
'
,
data
)
socket
.
broadcast
.
to
(
data
.
roomInfo
).
emit
(
'
sendedMSG
'
,
data
.
msg
);
// sender 제외 특정 방으로
});
socket
.
on
(
'
disconnect
'
,
()
=>
{
console
.
log
(
'
disconnected from server id=
'
,
socket
.
id
)
})
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment