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
Show whitespace changes
Inline
Side-by-side
.gitignore
View file @
0c3abc4c
node_modules
node_modules
package-lock.json
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';
...
@@ -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
]
===
se
ssionStorage
.
getItem
(
'
name
'
)
))
{
if
(
!
(
sender
[
index
]
===
u
se
r
.
nick
name
))
{
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
.
profile
img
&&
`/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
;
client/src/Pages/HomePage.js
View file @
0c3abc4c
...
@@ -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
>
...
...
client/src/Pages/ProfilePage.js
View file @
0c3abc4c
...
@@ -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
"
>
...
...
server/models/User.js
View file @
0c3abc4c
...
@@ -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
'
,
},
},
},
{
},
{
//옵셥을 정의함.
//옵셥을 정의함.
...
...
server/server.js
View file @
0c3abc4c
...
@@ -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 제외 특정 방으로
});
});
...
...
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