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
8634b7fc
Commit
8634b7fc
authored
Jan 18, 2021
by
Choi Ga Young
Browse files
Merge remote-tracking branch 'origin/sooModalTest' into young
parents
31ac640d
00dade89
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
8634b7fc
...
...
@@ -25,15 +25,24 @@ function Chat(props) {
setChat
([...
chat
,
props
.
singleChat
])
},
[
props
.
singleChat
])
useEffect
(()
=>
{
setChat
([...
chat
,
props
.
recievedMsg
])
},
[
props
.
recievedMsg
])
return
(
<
div
className
=
"
chat
"
id
=
"
chat
"
style
=
{{
border
:
"
2px solid
"
,
height
:
"
300%
"
,
margin
:
"
1%
"
,
borderColor
:
"
#BDBDBD
"
}}
>
<
h2
>
현재
{
props
.
roomName
}
입니다
.
<
/h2
>
{
chat
.
map
((
value
,
index
)
=>
(
<
Row
key
=
{
index
}
className
=
'
ml-3
'
>
{
props
.
roomName
}
에서
{
defaultname
}
님이
보낸
메세지
:
{
value
}
<
/Row
>
))}
{
chat
.
map
((
value
,
index
)
=>
{
if
(
Boolean
(
value
))
{
// console.log(`value=${value}=`)
return
<
Row
key
=
{
index
}
className
=
'
ml-3
'
>
{
props
.
roomName
}
에서
{
defaultname
}
님이
보낸
메세지
:
{
value
}
<
/Row
>
}
else
{
return
null
}
})}
<
Button
variant
=
"
light
"
onClick
=
{
props
.
handleChatc
}
>
{
`<`
}
<
/Button
>
<
Form
onSubmit
=
{
sendMsgCH
}
>
<
Form
.
Group
>
...
...
@@ -49,4 +58,5 @@ function Chat(props) {
);
}
export
default
Chat
;
client/src/Components/ClosedList.js
View file @
8634b7fc
...
...
@@ -20,11 +20,11 @@ function ClosedList(props) {
setList
(
res
.
data
)
}
function
enterChat
r
oomCH
(
e
)
{
function
enterChat
R
oomCH
(
e
)
{
console
.
log
(
e
.
target
.
name
)
console
.
log
(
e
.
target
)
const
roomName
=
e
.
target
.
name
props
.
enterChat
r
oom
(
roomName
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
enterChat
R
oom
(
roomName
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoomName
(
roomName
)
// props.clearChat()
}
...
...
client/src/Components/EnterRoom.js
0 → 100644
View file @
8634b7fc
import
React
,
{
useState
}
from
'
react
'
import
axios
from
'
axios
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Form
,
Alert
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
function
EnterRoom
(
props
)
{
const
[
enterCode
,
setEnterCode
]
=
useState
(
''
);
const
[
error
,
setError
]
=
useState
(
''
);
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setEnterCode
(
value
)
console
.
log
(
enterCode
)
}
async
function
handleSubmit
(
event
)
{
event
.
preventDefault
()
try
{
setError
(
''
)
// await axios.post('/room/enterRoom', enterCode)
props
.
enterChatRoom
(
enterCode
)
setEnterCode
(
''
)
}
catch
(
error
){
catchErrors
(
error
,
setError
)
}
}
return
(
<>
<
Modal
show
=
{
props
.
showEnter
}
onHide
=
{
props
.
handleCloseEnter
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
참여
코드로
채팅
참가
<
/Modal.Title
>
<
/Modal.Header
>
<
Modal
.
Body
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formCodeE
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
참여
코드
<
/Form.Label
>
<
Col
>
<
Form
.
Control
name
=
'
roomCode
'
type
=
'
text
'
value
=
{
enterCode
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
참가
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
<
/
>
)
}
export
default
EnterRoom
client/src/Components/OpenList.js
View file @
8634b7fc
...
...
@@ -16,11 +16,9 @@ function OpenList(props) {
}
function
enterChatroomCH
(
e
)
{
console
.
log
(
e
.
target
.
name
)
console
.
log
(
e
.
target
)
function
enterChatRoomCH
(
e
)
{
const
roomName
=
e
.
target
.
name
props
.
enterChat
r
oom
(
roomName
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
enterChat
R
oom
(
roomName
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoomName
(
roomName
)
// props.clearChat()
}
...
...
client/src/Components/RoomMake.js
0 → 100644
View file @
8634b7fc
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
axios
from
'
axios
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Form
,
Alert
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
const
INIT_ROOM
=
{
roomName
:
''
,
interest
:
''
,
isOpen
:
false
}
function
RoomMake
(
props
)
{
const
[
room
,
setRoom
]
=
useState
(
INIT_ROOM
);
const
[
disabled
,
setDisabled
]
=
useState
(
true
);
const
[
error
,
setError
]
=
useState
(
''
);
useEffect
(()
=>
{
const
isRoom
=
Object
.
values
(
room
).
every
(
el
=>
Boolean
(
el
))
isRoom
?
setDisabled
(
false
)
:
setDisabled
(
true
)
},
[
room
])
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setRoom
({
...
room
,
[
name
]:
value
})
console
.
log
(
room
)
}
async
function
handleSubmit
(
event
)
{
event
.
preventDefault
()
try
{
setError
(
''
)
await
axios
.
post
(
'
/room/makeRoom
'
,
room
)
const
Id
=
res
.
data
.
roomId
alert
(
`방암호는
${
Id
}
입니다`
)
props
.
handleCloseModal
()
setRoom
(
INIT_ROOM
)
}
catch
(
error
){
catchErrors
(
error
,
setError
)
}
}
return
(
<
Modal
show
=
{
props
.
showModal
}
onHide
=
{
props
.
handleCloseModal
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
방
생성
<
/Modal.Title
>
<
/Modal.Header
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Modal
.
Body
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatName
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
방
이름
<
/Form.Label
>
<
Col
>
<
Form
.
Control
name
=
'
roomName
'
type
=
'
text
'
value
=
{
room
.
roomName
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatInterest
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
관심
분야
<
/Form.Label
>
<
Col
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
Choose...
"
name
=
'
interest
'
type
=
'
text
'
value
=
{
room
.
interest
}
onChange
=
{
handleChange
}
>
<
option
>
Choose
...
<
/option
>
<
option
>
과학
<
/option
>
<
option
>
수학
<
/option
>
<
option
>
예술
<
/option
>
<
option
>
언어
<
/option
>
<
option
>
취미
<
/option
>
<
/Form.Control
>
{
/* <Form.Control type="text" /> */
}
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatIsOpen
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
공개방
<
/Form.Label
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
checked
=
{
room
.
isOpen
}
name
=
'
isOpen
'
onChange
=
{()
=>
setRoom
({
...
room
,
isOpen
:
!
room
.
isOpen
})}
/
>
<
/Col
>
<
/Form.Group
>
{
(
room
.
isOpen
)
?
(
<
p
><
b
>
공개방
<
/b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</
p
>
)
:
(
<
p
><
b
>
비밀방
<
/b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</
p
>
)
}
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
방
생성
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
)
}
export
default
RoomMake
client/src/Pages/HomePage.js
View file @
8634b7fc
...
...
@@ -9,35 +9,32 @@ import Menu from '../Components/Menu';
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
io
}
from
"
socket.io-client
"
;
//모듈 가져오기
import
Chat
from
"
../Components/Chat
"
;
const
socket
=
io
();
import
RoomMake
from
"
../Components/RoomMake
"
import
EnterRoom
from
"
../Components/EnterRoom
"
const
INIT_ROOM
=
{
roomName
:
''
,
interest
:
''
,
isOpen
:
false
,
moderator
:
''
,
}
const
socket
=
io
();
function
Home
()
{
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
show
2
,
setShow2
]
=
useState
(
false
);
const
[
show
Modal
,
setShow
Modal
]
=
useState
(
false
);
const
[
show
Enter
,
setEnter
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
const
[
room
,
setRoom
]
=
useState
(
INIT_ROOM
);
const
[
disabled
,
setDisabled
]
=
useState
(
true
);
const
[
error
,
setError
]
=
useState
(
''
);
//소켓
const
[
singleChat
,
setSingleChat
]
=
useState
(
''
)
const
[
recievedMsg
,
setRecievedMsg
]
=
useState
(
''
)
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
// const [success, setSuccess] = useState(false)
const
[
roomCode
,
setRoomCode
]
=
useState
(
''
)
//방참가
const
[
roomId
,
setRoomId
]
=
useState
(
''
)
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
const
handleShowModal
=
()
=>
setShowModal
(
true
);
const
handleCloseEnter
=
()
=>
setEnter
(
false
);
const
handleShowEnter
=
()
=>
setEnter
(
true
);
const
handleChato
=
()
=>
setChat
(
true
);
const
handleChatc
=
()
=>
setChat
(
false
);
const
handleClose2
=
()
=>
setShow2
(
false
);
const
handleShow2
=
()
=>
setShow2
(
true
);
const
moderator
=
sessionStorage
.
getItem
(
'
userId
'
);
const
member
=
sessionStorage
.
getItem
(
'
userId
'
);
useEffect
(()
=>
{
...
...
@@ -47,26 +44,7 @@ function Home() {
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setRoom
({
...
room
,
[
name
]:
value
,
moderator
,
member
})
//console.log(room)
}
console
.
log
(
room
)
async
function
handleSubmit
(
event
)
{
event
.
preventDefault
()
try
{
setError
(
''
)
let
res
=
await
axios
.
post
(
'
/room/makeRoom
'
,
room
)
console
.
log
(
res
.
data
.
roomId
)
const
Id
=
res
.
data
.
roomId
alert
(
`방암호는
${
Id
}
입니다`
)
setShow
(
false
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
setRoom
({
...
room
,
[
name
]:
value
,
member
})
}
//SOCKET 관련 시작
...
...
@@ -81,14 +59,18 @@ function Home() {
useEffect
(()
=>
{
socket
.
emit
(
"
chat
"
,
{
roomName
:
room
Nam
e
,
roomName
:
room
Cod
e
,
msg
:
singleChat
})
socket
.
on
(
'
broadcast
'
,
(
msg
)
=>
{
},
[
singleChat
])
useEffect
(()
=>
{
socket
.
on
(
"
sendedMSG
"
,
(
msg
)
=>
{
console
.
log
(
msg
)
set
SingleChat
(
msg
)
set
RecievedMsg
(
msg
)
})
},
[
singleChat
])
},
[])
return
(
<>
...
...
@@ -105,92 +87,21 @@ function Home() {
<
/Tabs
>
<
/Col
>
<
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
"
}}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
}
size
=
"
lg
"
block
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
Modal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShow
2
}
size
=
"
lg
"
block
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShow
Enter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div
>
<
Modal
show
=
{
show
}
onHide
=
{
handleClose
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
방
생성
<
/Modal.Title
>
<
/Modal.Header
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
<
Modal
.
Body
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatName
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
방
이름
<
/Form.Label
>
<
Col
>
<
Form
.
Control
name
=
'
roomName
'
type
=
'
text
'
value
=
{
room
.
roomName
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatInterest
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
관심
분야
<
/Form.Label
>
<
Col
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
Choose...
"
name
=
'
interest
'
type
=
'
text
'
value
=
{
room
.
interest
}
onChange
=
{
handleChange
}
>
<
option
>
Choose
...
<
/option
>
<
option
>
과학
<
/option
>
<
option
>
수학
<
/option
>
<
option
>
예술
<
/option
>
<
option
>
언어
<
/option
>
<
option
>
취미
<
/option
>
<
/Form.Control
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatIsOpen
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
공개방
<
/Form.Label
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
checked
=
{
room
.
isOpen
}
name
=
'
isOpen
'
onChange
=
{()
=>
setRoom
({
...
room
,
isOpen
:
!
room
.
isOpen
})}
/
>
<
/Col
>
<
/Form.Group
>
{
(
room
.
isOpen
)
?
(
<
p
><
b
>
공개방
<
/b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</
p
>
)
:
(
<
p
><
b
>
비밀방
<
/b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</
p
>
)
}
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
방
생성
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
<
Modal
show
=
{
show2
}
onHide
=
{
handleClose2
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
참여
코드로
채팅
참가
<
/Modal.Title
>
<
/Modal.Header
>
<
Modal
.
Body
>
{
/* <Form onSubmit={handleSubmit2}> */
}
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formCodeE
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
참여
코드
<
/Form.Label
>
<
Col
>
<
Form
.
Control
type
=
"
text
"
/>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
참가
<
/Button
>
<
/Col
>
<
/Form.Group
>
{
/* </Form> */
}
<
/Modal.Body
>
<
/Modal
>
<
/Col
>
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChatRoom
}
handleCloseEnter
=
{
handleCloseEnter
}
/
>
<
/
>
);
}
...
...
server/server.js
View file @
8634b7fc
...
...
@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결
socket
.
join
(
roomName
);
//클라이언트에서 data에 적힌 room으로 참여시킴
});
socket
.
on
(
'
chat
'
,
(
data
)
=>
{
io
.
to
(
data
.
roomName
).
emit
(
'
broadcast
'
,
data
.
msg
);
//roomName에 존재하는 모든 소켓들에게
})
// socket.on('chat', (data)=>{
// 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
'
,
()
=>
{
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