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
9886e7d1
Commit
9886e7d1
authored
Jan 22, 2021
by
JeongYeonwoo
Browse files
Merge remote-tracking branch 'origin/young' into yeonwoo
parents
84926f50
5de58303
Changes
17
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
9886e7d1
...
@@ -7,6 +7,7 @@ import catchErrors from '../utils/catchErrors';
...
@@ -7,6 +7,7 @@ import catchErrors from '../utils/catchErrors';
function
Chat
(
props
)
{
function
Chat
(
props
)
{
const
[
sender
,
setSender
]
=
useState
([])
const
[
sender
,
setSender
]
=
useState
([])
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
const
[
inner
,
setInner
]
=
useState
([
''
])
const
[
inner
,
setInner
]
=
useState
([
''
])
const
[
chat
,
setChat
]
=
useState
([])
//object로 key는 보낸사람 value는 메세지
const
[
chat
,
setChat
]
=
useState
([])
//object로 key는 보낸사람 value는 메세지
...
@@ -16,6 +17,7 @@ function Chat(props) {
...
@@ -16,6 +17,7 @@ function Chat(props) {
const
[
user
,
setUser
]
=
useState
(
''
)
const
[
user
,
setUser
]
=
useState
(
''
)
const
[
error
,
setError
]
=
useState
(
''
);
const
[
error
,
setError
]
=
useState
(
''
);
const
userId
=
isAuthenticated
()
const
userId
=
isAuthenticated
()
async
function
getProfile
(
userId
)
{
async
function
getProfile
(
userId
)
{
try
{
try
{
...
@@ -26,6 +28,16 @@ function Chat(props) {
...
@@ -26,6 +28,16 @@ function Chat(props) {
}
}
}
}
async
function
getRoomName
(
roomCode
)
{
try
{
let
res
=
await
axios
.
get
(
'
/room/getRoomName
'
,
{
params
:
{
'
roomCode
'
:
roomCode
}
})
console
.
log
(
res
.
data
)
setRoomName
(
res
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
function
handleChange
(
e
)
{
function
handleChange
(
e
)
{
e
.
preventDefault
()
e
.
preventDefault
()
setInner
(
e
.
target
.
value
)
setInner
(
e
.
target
.
value
)
...
@@ -43,6 +55,12 @@ function Chat(props) {
...
@@ -43,6 +55,12 @@ function Chat(props) {
setInner
(
''
)
setInner
(
''
)
setDisabled
(
true
)
setDisabled
(
true
)
}
}
function
handleClick
()
{
setChat
([])
props
.
handleChatc
()
}
useEffect
(()
=>
{
useEffect
(()
=>
{
getProfile
(
userId
)
getProfile
(
userId
)
},
[
userId
])
},
[
userId
])
...
@@ -59,12 +77,24 @@ function Chat(props) {
...
@@ -59,12 +77,24 @@ function Chat(props) {
setChat
([...
chat
,
props
.
recievedMsg
])
setChat
([...
chat
,
props
.
recievedMsg
])
},
[
props
.
recievedMsg
])
},
[
props
.
recievedMsg
])
useEffect
(()
=>
{
getRoomName
(
props
.
roomCode
)
},
[
props
.
roomCode
])
const
time
=
new
Date
().
toLocaleTimeString
()
const
time
=
new
Date
().
toLocaleTimeString
()
return
(
return
(
<>
<>
<
Container
id
=
"
chat
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
20px
'
,
border
:
"
2px solid
"
,
height
:
"
500px
"
,
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
>
<
Row
class
=
"
d-flex justify-content-center
"
style
=
{{
border
:
"
2px solid
"
,
borderWidth
:
"
medium
"
,
borderColor
:
"
#FFD75F
"
,
height
:
"
80px
"
,
margin
:
"
1%
"
}}
>
{
/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */
}
<
Col
md
=
"
auto
"
>
<
Button
variant
=
"
light
"
onClick
=
{
props
.
handleChatc
}
>
{
`<`
}
<
/Button
>
<
/Col
>
<
Col
>
<
Row
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
x-large
"
}}
>
{
roomName
}
<
/Row
>
<
Row
>
{
props
.
roomCode
}
<
/Row
>
<
/Col
>
<
/Row
>
<
p
>
{
props
.
newUser
}
님이
입장하셨습니다
.
<
/p
>
{
chat
.
map
((
value
,
index
)
=>
{
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
if
(
!
(
value
==
''
))
{
if
(
!
(
sender
[
index
]
===
user
.
nickname
))
{
if
(
!
(
sender
[
index
]
===
user
.
nickname
))
{
...
@@ -98,8 +128,7 @@ function Chat(props) {
...
@@ -98,8 +128,7 @@ function Chat(props) {
})
})
}
}
<
Button
variant
=
"
light
"
onClick
=
{
props
.
handleChatc
}
>
{
`<`
}
<
/Button
>
<
Button
variant
=
"
light
"
onClick
=
{
handleClick
}
>
{
`<`
}
<
/Button
>
<
/Container
>
<
/Container
>
<
Form
onSubmit
=
{
sendMsgCH
}
fluid
>
<
Form
onSubmit
=
{
sendMsgCH
}
fluid
>
...
...
client/src/Components/ClosedList.js
View file @
9886e7d1
...
@@ -8,7 +8,7 @@ function ClosedList(props) {
...
@@ -8,7 +8,7 @@ function ClosedList(props) {
useEffect
(()
=>
{
useEffect
(()
=>
{
getClosedList
();
getClosedList
();
},
[]);
},
[
props
.
roomCode
]);
async
function
getClosedList
()
{
async
function
getClosedList
()
{
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
...
@@ -18,16 +18,16 @@ function ClosedList(props) {
...
@@ -18,16 +18,16 @@ function ClosedList(props) {
function
enterChatRoomCH
(
e
)
{
function
enterChatRoomCH
(
e
)
{
const
roomCode
=
e
.
target
.
name
const
roomCode
=
e
.
target
.
name
const
roomName
=
e
.
target
.
value
props
.
enterChatRoom
(
roomCode
)
props
.
enterChatRoom
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
}
}
return
(
return
(
<
div
>
<
div
>
{
list
.
map
((
item
,
index
)
=>
{
list
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
value
=
{
item
.
roomName
}
>
{
item
.
roomName
}
{
item
.
roomName
}
<
/ListGroup.Item
>
<
/ListGroup.Item
>
<
/ListGroup
>
<
/ListGroup
>
...
...
client/src/Components/EnterRoom.js
View file @
9886e7d1
...
@@ -8,6 +8,9 @@ function EnterRoom(props) {
...
@@ -8,6 +8,9 @@ function EnterRoom(props) {
const
[
enterCode
,
setEnterCode
]
=
useState
(
''
);
const
[
enterCode
,
setEnterCode
]
=
useState
(
''
);
const
[
error
,
setError
]
=
useState
(
''
);
const
[
error
,
setError
]
=
useState
(
''
);
const
userId
=
sessionStorage
.
getItem
(
'
userId
'
);
//sessionStorage에 저장된 userId가져옴
function
handleChange
(
event
)
{
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
const
{
name
,
value
}
=
event
.
target
setEnterCode
(
value
)
setEnterCode
(
value
)
...
@@ -19,6 +22,7 @@ function EnterRoom(props) {
...
@@ -19,6 +22,7 @@ function EnterRoom(props) {
try
{
try
{
setError
(
''
)
setError
(
''
)
let
res
=
await
axios
.
post
(
'
/room/enterRoom
'
,
{
enterCode
})
let
res
=
await
axios
.
post
(
'
/room/enterRoom
'
,
{
enterCode
})
await
axios
.
put
(
'
/room/member
'
,
{
userId
:
userId
,
roomId
:
enterCode
})
props
.
setRoomName
(
res
.
data
)
props
.
setRoomName
(
res
.
data
)
props
.
enterChatRoom
(
enterCode
)
props
.
enterChatRoom
(
enterCode
)
props
.
handleCloseEnter
()
props
.
handleCloseEnter
()
...
...
client/src/Components/Menu.js
View file @
9886e7d1
...
@@ -16,7 +16,7 @@ function Menu() {
...
@@ -16,7 +16,7 @@ function Menu() {
<
Nav
className
=
"
mr-auto
"
>
<
Nav
className
=
"
mr-auto
"
>
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link
>
<
/Nav
>
<
/Nav
>
<
Button
className
=
"
ml-auto
"
onClick
=
{()
=>
handleLogout
()}
variant
=
"
light
"
className
=
"
ml-3
"
>
Logout
<
/Button
>
<
Button
className
=
"
ml-auto
"
onClick
=
{()
=>
handleLogout
()}
variant
=
"
light
"
>
Logout
<
/Button
>
<
/
>
<
/
>
:
<
Nav
className
=
"
ml-auto
"
>
:
<
Nav
className
=
"
ml-auto
"
>
<
Nav
.
Link
href
=
'
/login
'
>
로그인
<
/Nav.Link
>
<
Nav
.
Link
href
=
'
/login
'
>
로그인
<
/Nav.Link
>
...
...
client/src/Components/OpenList.js
View file @
9886e7d1
...
@@ -3,11 +3,11 @@ import { ListGroup } from 'react-bootstrap';
...
@@ -3,11 +3,11 @@ import { ListGroup } from 'react-bootstrap';
import
axios
from
'
axios
'
import
axios
from
'
axios
'
function
OpenList
(
props
)
{
function
OpenList
(
props
)
{
const
[
openlist
,
setOpenlist
]
=
useState
([])
;
const
[
openlist
,
setOpenlist
]
=
useState
([])
useEffect
(()
=>
{
useEffect
(()
=>
{
getOpenList
();
getOpenList
();
},
[]);
},
[
props
.
roomCode
]);
async
function
getOpenList
()
{
async
function
getOpenList
()
{
let
res
=
await
axios
.
get
(
'
/room/openlist
'
)
let
res
=
await
axios
.
get
(
'
/room/openlist
'
)
...
@@ -16,8 +16,10 @@ function OpenList(props) {
...
@@ -16,8 +16,10 @@ function OpenList(props) {
function
enterChatRoomCH
(
e
)
{
function
enterChatRoomCH
(
e
)
{
console
.
log
(
'
e확인
'
,
e
.
target
)
const
roomCode
=
e
.
target
.
name
const
roomCode
=
e
.
target
.
name
props
.
enterChatRoom
(
roomCode
)
// 각각의 room으로 들어가도록 설정해야 함
// props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
props
.
openListroom
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
// props.clearChat()
// props.clearChat()
}
}
...
...
client/src/Components/RoomMake.js
View file @
9886e7d1
...
@@ -34,6 +34,7 @@ function RoomMake(props) {
...
@@ -34,6 +34,7 @@ function RoomMake(props) {
const
Id
=
res
.
data
.
roomId
const
Id
=
res
.
data
.
roomId
alert
(
`방암호는
${
Id
}
입니다`
)
alert
(
`방암호는
${
Id
}
입니다`
)
props
.
handleCloseModal
()
props
.
handleCloseModal
()
props
.
handleChato
()
setRoom
(
INIT_ROOM
)
setRoom
(
INIT_ROOM
)
}
catch
(
error
){
}
catch
(
error
){
catchErrors
(
error
,
setError
)
catchErrors
(
error
,
setError
)
...
...
client/src/Pages/HomePage.js
View file @
9886e7d1
...
@@ -9,18 +9,32 @@ import { io } from "socket.io-client"; //모듈 가져오기
...
@@ -9,18 +9,32 @@ import { io } from "socket.io-client"; //모듈 가져오기
import
Chat
from
"
../Components/Chat
"
;
import
Chat
from
"
../Components/Chat
"
;
import
RoomMake
from
"
../Components/RoomMake
"
import
RoomMake
from
"
../Components/RoomMake
"
import
EnterRoom
from
"
../Components/EnterRoom
"
import
EnterRoom
from
"
../Components/EnterRoom
"
import
axios
from
'
axios
'
;
const
socket
=
io
();
const
socket
=
io
();
const
INIT_ROOM
=
{
roomName
:
''
,
interest
:
''
,
roomId
:
''
,
member
:
''
,
}
function
Home
()
{
function
Home
()
{
const
userName
=
sessionStorage
.
getItem
(
'
name
'
)
const
[
showModal
,
setShowModal
]
=
useState
(
false
);
const
[
showModal
,
setShowModal
]
=
useState
(
false
);
const
[
showEnter
,
setEnter
]
=
useState
(
false
);
const
[
showEnter
,
setEnter
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
const
[
open
,
setOpen
]
=
useState
(
false
);
const
[
room
,
setRoom
]
=
useState
(
INIT_ROOM
)
const
[
show
,
setShow
]
=
useState
(
true
)
//소켓
//소켓
const
[
singleChat
,
setSingleChat
]
=
useState
(
''
)
const
[
singleChat
,
setSingleChat
]
=
useState
(
''
)
const
[
recievedMsg
,
setRecievedMsg
]
=
useState
(
''
)
const
[
recievedMsg
,
setRecievedMsg
]
=
useState
(
''
)
const
[
roomCode
,
setRoomCode
]
=
useState
(
''
)
const
[
roomCode
,
setRoomCode
]
=
useState
(
''
)
const
[
newUser
,
setNewUser
]
=
useState
(
''
)
const
[
singleUser
,
setSingleUser
]
=
useState
(
''
)
const
[
singleUser
,
setSingleUser
]
=
useState
(
''
)
const
[
recievedUser
,
setRecievedUser
]
=
useState
(
''
)
const
[
recievedUser
,
setRecievedUser
]
=
useState
(
''
)
...
@@ -28,8 +42,13 @@ function Home() {
...
@@ -28,8 +42,13 @@ function Home() {
const
[
singleImg
,
setSingleImg
]
=
useState
(
''
)
const
[
singleImg
,
setSingleImg
]
=
useState
(
''
)
const
[
recievedImg
,
setRecievedImg
]
=
useState
(
''
)
const
[
recievedImg
,
setRecievedImg
]
=
useState
(
''
)
//방참가
//SOCKET 관련 시작
function
enterChatRoom
(
rCode
)
{
//방 입장하기
socket
.
emit
(
'
joinRoom
'
,
rCode
)
socket
.
emit
(
'
newUser
'
,
{
rmIf
:
rCode
,
userInfo
:
userName
})
console
.
log
(
`joinRoom :
${
rCode
}
입장`
)
}
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
...
@@ -39,14 +58,35 @@ function Home() {
...
@@ -39,14 +58,35 @@ function Home() {
const
handleChato
=
()
=>
setChat
(
true
);
const
handleChato
=
()
=>
setChat
(
true
);
const
handleChatc
=
()
=>
setChat
(
false
);
const
handleChatc
=
()
=>
setChat
(
false
);
socket
.
on
(
"
sendUser
"
,
(
data
)
=>
{
setNewUser
(
data
)
})
//오픈채팅방에서 참가하기
async
function
openListroom
(
roomId
)
{
console
.
log
(
roomId
)
const
roomInf
=
await
axios
.
get
(
'
/room/changeMem
'
,
{
params
:
{
'
roomId
'
:
roomId
}
})
console
.
log
(
roomInf
)
console
.
log
(
roomInf
.
data
)
console
.
log
(
roomInf
.
data
[
0
])
setRoom
(
roomInf
.
data
[
0
])
setShow
(
false
)
}
//SOCKET 관련 시작
async
function
attendListRoom
()
{
function
enterChatRoom
(
rName
)
{
//방 입장하기
const
userId
=
sessionStorage
.
getItem
(
'
userId
'
);
//sessionStorage에 저장된 userId가져옴
socket
.
emit
(
'
joinRoom
'
,
rName
)
const
roomId
=
room
.
roomId
console
.
log
(
`joinRoom :
${
rName
}
입장`
)
const
tf
=
await
axios
.
put
(
'
/room/changeMem
'
,
{
userId
:
userId
,
roomId
:
roomId
})
if
(
tf
.
data
)
{
alert
(
'
참가되었습니다.
'
)
}
else
{
alert
(
'
이미 참가된 방입니다.
'
)
}
}
}
function
enterButton
()
{
setOpen
(
false
)
}
const
sendMsg
=
(
e
)
=>
{
const
sendMsg
=
(
e
)
=>
{
e
.
preventDefault
()
e
.
preventDefault
()
}
}
...
@@ -56,7 +96,11 @@ function Home() {
...
@@ -56,7 +96,11 @@ function Home() {
if
(
!
(
singleChat
==
''
))
{
if
(
!
(
singleChat
==
''
))
{
socket
.
emit
(
"
chat
"
,
{
socket
.
emit
(
"
chat
"
,
{
roomInfo
:
roomCode
,
roomInfo
:
roomCode
,
sendInfo
:
{
msg
:
singleChat
,
sender
:
singleUser
,
img
:
singleImg
},
sendInfo
:
{
msg
:
singleChat
,
sender
:
singleUser
,
img
:
singleImg
}
})
})
setSingleChat
([
''
])
setSingleChat
([
''
])
}
}
...
@@ -71,9 +115,6 @@ function Home() {
...
@@ -71,9 +115,6 @@ function Home() {
})
})
},
[])
},
[])
return
(
return
(
<>
<>
<
Menu
/>
<
Menu
/>
...
@@ -81,29 +122,46 @@ function Home() {
...
@@ -81,29 +122,46 @@ function Home() {
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
/
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
/
>
<
/Tab
>
<
/Tab
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChato
}
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChato
}
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setR
oomCode
}
/
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
openListroom
=
{
openListroom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
r
oomCode
}
/
>
<
/Tab
>
<
/Tab
>
<
/Tabs
>
<
/Tabs
>
<
/Col
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
{
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
}
{
show
?
<>
{
chat
?
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Chat
handleChatc
=
{
handleChatc
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
newUser
=
{
newUser
}
setSingleChat
=
{
setSingleChat
}
roomCode
=
{
roomCode
}
singleImg
=
{
singleImg
}
setSingleImg
=
{
setSingleImg
}
recievedImg
=
{
recievedImg
}
singleUser
=
{
singleUser
}
setSingleUser
=
{
setSingleUser
}
recievedUser
=
{
recievedUser
}
/
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
:
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
생성
<
Button
variant
=
"
primary
"
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div>
}
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
<
/> : <
>
참가
{
open
?
<
/Button
>
<
div
className
=
"
vh-90 flex-column align-items-center justify-content-center mt-2
"
variant
=
"
dark
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
<
h2
className
=
"
d-flex justify-content-center mb-3
"
>
현재
{
room
.
roomName
}
방
입니다
.
<
/h2
>
<
h5
>
▷
관심분야
:
{
room
.
interest
}
<
/h5
>
<
h5
>
▷
참여인원
:
{
room
.
member
.
length
}
<
/h5
>
<
h5
className
=
"
mb-3
"
>
▷
방코드
(
방코드를
통해서도
참여할
수
있습니다
.)
:
{
room
.
roomId
}
<
/h5
>
<
Row
className
=
'
justify-content-center
'
>
<
Button
variant
=
"
outline-warning
"
size
=
"
sm
"
className
=
"
mr-4
"
onClick
=
{
enterButton
}
>
뒤로가기
<
/Button
>
<
Button
variant
=
"
outline-warning
"
size
=
"
sm
"
className
=
"
ml-4
"
type
=
'
submit
'
onClick
=
{
attendListRoom
}
>
참가
<
/Button
>
<
/Row
>
<
/div
>
<
/div
>
<
/div
>
<
/div>
:
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div>
}
<
/>
}
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
<
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
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
/
>
<
/
>
<
/
>
);
);
}
}
...
...
server/controllers/room.controller.js
View file @
9886e7d1
...
@@ -7,8 +7,7 @@ const nanoid = customAlphabet('1234567890abcdef', 10)
...
@@ -7,8 +7,7 @@ const nanoid = customAlphabet('1234567890abcdef', 10)
const
makeRoom
=
async
(
req
,
res
)
=>
{
const
makeRoom
=
async
(
req
,
res
)
=>
{
console
.
log
(
req
.
body
)
console
.
log
(
req
.
body
)
const
{
roomName
,
interest
,
isOpen
,
member
}
=
req
.
body
;
const
{
roomName
,
interest
,
isOpen
,
member
}
=
req
.
body
;
console
.
log
(
'
콘솔확인
'
,
roomName
,
interest
,
isOpen
,
member
)
console
.
log
(
'
콘솔확인
'
,
roomName
,
interest
,
isOpen
,
member
)
const
roomId
=
nanoid
()
const
roomId
=
nanoid
()
const
room
=
await
Room
.
findOne
({
roomId
})
const
room
=
await
Room
.
findOne
({
roomId
})
while
(
room
)
{
while
(
room
)
{
...
@@ -39,7 +38,7 @@ const makeRoom = async (req, res) => {
...
@@ -39,7 +38,7 @@ const makeRoom = async (req, res) => {
const
getClosedList
=
async
(
req
,
res
)
=>
{
const
getClosedList
=
async
(
req
,
res
)
=>
{
try
{
try
{
console
.
log
(
'
req확인
'
,
req
.
query
.
_id
)
console
.
log
(
'
req확인
'
,
req
.
query
.
_id
)
let
list
=
await
Room
.
find
({
member
:
[
req
.
query
.
_id
]
})
let
list
=
await
Room
.
find
({
member
:
[
req
.
query
.
_id
]
})
console
.
log
(
'
c_list가져오기
'
,
list
)
console
.
log
(
'
c_list가져오기
'
,
list
)
return
res
.
json
(
list
)
return
res
.
json
(
list
)
...
@@ -51,11 +50,57 @@ const getClosedList = async (req, res) => {
...
@@ -51,11 +50,57 @@ const getClosedList = async (req, res) => {
const
getOpenList
=
async
(
req
,
res
)
=>
{
const
getOpenList
=
async
(
req
,
res
)
=>
{
try
{
try
{
let
list
=
await
Room
.
find
({
isOpen
:
true
})
let
list
=
await
Room
.
find
({
isOpen
:
true
})
console
.
log
(
'
o_list가져오기
'
,
list
)
console
.
log
(
'
o_list가져오기
'
,
list
.
roomName
)
return
res
.
json
(
list
)
return
res
.
json
(
list
)
}
catch
(
error
)
{
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
리스트 불러오기를 실패하였습니다!
'
)
res
.
status
(
500
).
send
(
'
리스트 불러오기를 실패하였습니다!
'
)
}
}
}
}
export
default
{
makeRoom
,
getClosedList
,
getOpenList
}
const
getRoomName
=
async
(
req
,
res
)
=>
{
const
roomId
=
req
.
query
.
roomCode
console
.
log
(
req
.
query
.
roomCode
)
try
{
let
roominfo
=
await
Room
.
findOne
({
roomId
:
roomId
}).
select
(
'
roomName
'
)
console
.
log
(
roominfo
.
roomName
)
return
res
.
json
(
roominfo
.
roomName
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
리스트 불러오기를 실패하였습니다!
'
)
}
}
const
changemember
=
async
(
req
,
res
)
=>
{
const
{
userId
,
roomId
}
=
req
.
body
console
.
log
(
roomId
)
let
room
=
await
Room
.
findOne
({
roomId
:
roomId
}).
select
(
'
member
'
)
const
isPresent
=
room
.
member
.
indexOf
(
userId
)
try
{
if
(
isPresent
<
0
)
{
const
memberId
=
room
.
member
.
push
(
userId
)
await
Room
.
updateOne
({
'
roomId
'
:
roomId
},
{
'
member
'
:
room
.
member
})
console
.
log
(
'
room.member 업데이트 완료
'
)
return
res
.
json
(
true
)
}
else
{
return
res
.
json
(
false
)
}
res
.
end
()
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
멤버 업데이트 실패
'
)
}
}
const
roomInf
=
async
(
req
,
res
)
=>
{
try
{
console
.
log
(
req
.
query
.
roomId
)
// let roomInf = await Room.findOne({ member: req.query.roomId }).select('interest roomId member').exec()
let
roomInf
=
await
Room
.
find
({
roomId
:
req
.
query
.
roomId
})
console
.
log
(
'
room_member로 정보 가져오기:
'
,
roomInf
)
return
res
.
json
(
roomInf
)
}
catch
(
error
)
{
alert
(
'
올바르지 못한 접근입니다.
'
)
}
}
export
default
{
makeRoom
,
getClosedList
,
getOpenList
,
getRoomName
,
changemember
,
roomInf
}
server/controllers/roomEnter.controller.js
View file @
9886e7d1
...
@@ -5,7 +5,6 @@ const roomEnter = async (req, res) => {
...
@@ -5,7 +5,6 @@ const roomEnter = async (req, res) => {
// console.log(req)
// console.log(req)
try
{
try
{
console
.
log
(
roomId
)
const
room
=
await
Room
.
findOne
({
roomId
})
const
room
=
await
Room
.
findOne
({
roomId
})
if
(
!
room
)
{
if
(
!
room
)
{
return
res
.
status
(
404
).
send
(
`참여코드가 존재하지 않습니다.`
)
return
res
.
status
(
404
).
send
(
`참여코드가 존재하지 않습니다.`
)
...
...
server/controllers/user.controller.js
View file @
9886e7d1
server/models/Chat.js
View file @
9886e7d1
...
@@ -4,16 +4,18 @@ const { String } = mongoose.Schema.Types
...
@@ -4,16 +4,18 @@ const { String } = mongoose.Schema.Types
const
ChatSchema
=
new
mongoose
.
Schema
({
const
ChatSchema
=
new
mongoose
.
Schema
({
room
:
{
room
:
{
type
:
ObjectId
,
type
:
mongoose
.
ObjectId
,
required
:
true
,
required
:
true
,
ref
:
'
Room
'
,
ref
:
'
Room
'
,
},
},
username
:
{
username
:
{
type
:
String
,
type
:
String
,
required
:
true
,
required
:
true
,
ref
:
'
User
'
,
},
},
message
:
String
,
message
:
{
type
:
String
,
required
:
true
},
},
{
},
{
timestamps
:
true
timestamps
:
true
})
})
...
...
server/models/Room.js
View file @
9886e7d1
...
@@ -16,7 +16,7 @@ const RoomSchema = new mongoose.Schema({
...
@@ -16,7 +16,7 @@ const RoomSchema = new mongoose.Schema({
interest
:
{
interest
:
{
type
:
String
,
type
:
String
,
required
:
true
,
required
:
true
,
select
:
false
//
select: false
},
},
isOpen
:
{
isOpen
:
{
type
:
Boolean
,
type
:
Boolean
,
...
...
server/routes/room.routers.js
View file @
9886e7d1
...
@@ -6,9 +6,19 @@ const router = express.Router()
...
@@ -6,9 +6,19 @@ const router = express.Router()
router
.
route
(
'
/room/makeRoom
'
)
router
.
route
(
'
/room/makeRoom
'
)
.
post
(
roomCtrl
.
makeRoom
)
.
post
(
roomCtrl
.
makeRoom
)
router
.
route
(
'
/room/changeMem
'
)
.
put
(
roomCtrl
.
changemember
)
.
get
(
roomCtrl
.
roomInf
)
router
.
route
(
'
/room/closedlist
'
)
router
.
route
(
'
/room/closedlist
'
)
.
get
(
roomCtrl
.
getClosedList
)
.
get
(
roomCtrl
.
getClosedList
)
router
.
route
(
'
/room/openlist
'
)
router
.
route
(
'
/room/openlist
'
)
.
get
(
roomCtrl
.
getOpenList
)
.
get
(
roomCtrl
.
getOpenList
)
router
.
route
(
'
/room/member
'
)
.
put
(
roomCtrl
.
changemember
)
router
.
route
(
'
/room/getRoomName
'
)
.
get
(
roomCtrl
.
getRoomName
)
export
default
router
export
default
router
\ No newline at end of file
server/server.js
View file @
9886e7d1
...
@@ -8,6 +8,8 @@ import bodyParser from "body-parser";
...
@@ -8,6 +8,8 @@ import bodyParser from "body-parser";
import
http
from
"
http
"
;
import
http
from
"
http
"
;
import
{
Server
}
from
'
socket.io
'
;
import
{
Server
}
from
'
socket.io
'
;
import
cors
from
"
cors
"
import
cors
from
"
cors
"
import
Room
from
'
./models/Room.js
'
import
Chat
from
"
./models/Chat.js
"
connectDb
()
connectDb
()
...
@@ -20,17 +22,33 @@ const io = new Server(server)
...
@@ -20,17 +22,33 @@ const io = new Server(server)
io
.
on
(
"
connection
"
,
(
socket
)
=>
{
// 기본 연결
io
.
on
(
"
connection
"
,
(
socket
)
=>
{
// 기본 연결
console
.
log
(
"
socket connect ok
"
,
socket
.
id
)
console
.
log
(
"
socket connect ok
"
,
socket
.
id
)
socket
.
on
(
'
joinRoom
'
,
(
data
)
=>
{
// joinRoom을 클라이언트가 emit했을 때
socket
.
on
(
'
joinRoom
'
,
(
data
)
=>
{
// joinRoom을 클라이언트가 emit했을 때
console
.
log
(
'
join_data확인
'
,
data
)
console
.
log
(
'
join_data확인
'
,
data
)
let
roomInfo
=
data
;
let
roomInfo
=
data
;
socket
.
join
(
roomInfo
);
//클라이언트에서 data에 적힌 room으로 참여시킴
socket
.
join
(
roomInfo
);
//클라이언트에서 data에 적힌 room으로 참여시킴
});
});
socket
.
on
(
'
chat
'
,
(
data
)
=>
{
socket
.
on
(
'
newUser
'
,
(
data
)
=>
{
console
.
log
(
'
newUser
'
,
data
)
let
userInfo
=
data
.
userInfo
;
io
.
to
(
data
.
rmIf
).
emit
(
'
sendUser
'
,
userInfo
)
})
socket
.
on
(
'
chat
'
,
async
(
data
)
=>
{
console
.
log
(
'
roomname확인
'
,
data
)
console
.
log
(
'
roomname확인
'
,
data
)
socket
.
broadcast
.
to
(
data
.
roomInfo
).
emit
(
'
sendedMSG
'
,
data
.
send
Info
)
;
// sender 제외 특정 방으로
const
room
=
await
Room
.
findOne
({
roomId
:
data
.
room
Info
}
)
});
console
.
log
(
'
room이 떴나
'
,
room
)
const
chat
=
await
new
Chat
({
room
:
room
.
_id
,
username
:
data
.
sendInfo
.
sender
,
message
:
data
.
sendInfo
.
msg
}).
save
()
console
.
log
(
'
resChat확인
'
,
chat
)
socket
.
broadcast
.
to
(
data
.
roomInfo
).
emit
(
'
sendedMSG
'
,
data
.
sendInfo
);
// sender 제외 특정 방으로
});
socket
.
on
(
'
disconnect
'
,
()
=>
{
socket
.
on
(
'
disconnect
'
,
()
=>
{
console
.
log
(
'
disconnected from server id=
'
,
socket
.
id
)
console
.
log
(
'
disconnected from server id=
'
,
socket
.
id
)
...
...
uploads/650e939a7ea3051e2c11737d2f108377
0 → 100644
View file @
9886e7d1
File added
uploads/7b3a13e4f7c8c78affaaf84571120f40
0 → 100644
View file @
9886e7d1
File added
uploads/a3b9a7e813adff103c875a02bb82e164
0 → 100644
View file @
9886e7d1
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