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