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
4f3330b3
Commit
4f3330b3
authored
Jan 22, 2021
by
Soo Hyun Kim
Browse files
0121채팅창에이름코드
parent
35899ce6
Changes
7
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
4f3330b3
...
...
@@ -8,6 +8,7 @@ import catchErrors from '../utils/catchErrors';
function
Chat
(
props
)
{
// let defaultname = sessionStorage.getItem('name');
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
const
[
inner
,
setInner
]
=
useState
([
''
])
const
[
chat
,
setChat
]
=
useState
([])
//object로 key는 보낸사람 value는 메세지
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
...
...
@@ -24,6 +25,15 @@ function Chat(props) {
}
}
async
function
getRoomName
(
roomCode
)
{
try
{
let
res
=
await
axios
.
get
(
'
/room/getRoomName
'
,
{
params
:
{
'
roomCode
'
:
roomCode
}
})
setRoomName
(
res
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
function
handleChange
(
e
)
{
e
.
preventDefault
()
setInner
(
e
.
target
.
value
)
...
...
@@ -54,6 +64,10 @@ function Chat(props) {
console
.
log
(
'
UseEffect recievechat
'
,
chat
)
},
[
props
.
recievedMsg
])
useEffect
(()
=>
{
getRoomName
(
props
.
roomCode
)
},
[
props
.
roomCode
])
// function check() {
// // if (chat[chat.length-1].user ===chat[chat.length-2].user){ //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교
...
...
@@ -67,9 +81,19 @@ function Chat(props) {
const
time
=
new
Date
().
toLocaleTimeString
()
return
(
<
div
className
=
"
chat
"
id
=
"
chat
"
style
=
{{
border
:
"
2px solid
"
,
height
:
"
300%
"
,
margin
:
"
1%
"
,
borderColor
:
"
#BDBDBD
"
,
background
:
''
}}
>
<
h2
>
해당
방에
대한
참여코드는
{
props
.
roomCode
}
입니다
.
<
/h2
>
<
Row
class
=
"
d-flex justify-content-center
"
style
=
{{
height
:
"
80px
"
,
margin
:
"
1%
"
}}
>
<
Col
md
=
"
auto
"
>
<
Button
variant
=
"
light
"
onClick
=
{
props
.
handleChatc
}
>
{
`<`
}
<
/Button
>
<
/Col
>
<
Col
>
<
Row
style
=
{{
fontSize
:
'
x-large
'
}}
>
{
roomName
}
<
/Row
>
<
Row
>
{
props
.
roomCode
}
<
/Row
>
<
/Col
>
<
/Row
>
{
/* <h2> 참여코드 : {props.roomCode} </h2> */
}
{
/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */
}
{
chat
.
map
((
value
,
index
)
=>
{
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
return
(
<
Row
key
=
{
index
}
className
=
'
m-1 ml-3
'
>
...
...
@@ -91,7 +115,8 @@ function Chat(props) {
})
}
{
/* 내가 보낸 메세지 띄우기 */
}
{
chat
.
map
((
value
,
index
)
=>
{
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
return
(
<
Row
key
=
{
index
}
className
=
'
m-1 mr-4 justify-content-end
'
>
...
...
@@ -111,7 +136,7 @@ function Chat(props) {
<
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%
'
}}
/
>
...
...
client/src/Components/ClosedList.js
View file @
4f3330b3
...
...
@@ -8,7 +8,7 @@ function ClosedList(props) {
useEffect
(()
=>
{
getClosedList
();
},
[]);
},
[
props
.
roomCode
]);
async
function
getClosedList
()
{
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
...
...
@@ -18,16 +18,16 @@ function ClosedList(props) {
function
enterChatRoomCH
(
e
)
{
const
roomCode
=
e
.
target
.
name
const
roomName
=
e
.
target
.
value
props
.
enterChatRoom
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
props
.
setRoomName
(
roomName
)
}
return
(
<
div
>
{
list
.
map
((
item
,
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
}
<
/ListGroup.Item
>
<
/ListGroup
>
...
...
client/src/Components/OpenList.js
View file @
4f3330b3
...
...
@@ -7,7 +7,7 @@ function OpenList(props) {
useEffect
(()
=>
{
getOpenList
();
},
[]);
},
[
props
.
roomCode
]);
async
function
getOpenList
()
{
let
res
=
await
axios
.
get
(
'
/room/openlist
'
)
...
...
@@ -16,17 +16,15 @@ function OpenList(props) {
function
enterChatRoomCH
(
e
)
{
const
roomCode
=
e
.
target
.
nam
e
const
roomCode
=
e
.
target
.
cod
e
props
.
enterChatRoom
(
roomCode
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoomCode
(
roomCode
)
// props.clearChat()
}
return
(
<
div
>
{
openlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
nam
e
=
{
item
.
roomId
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
cod
e
=
{
item
.
roomId
}
>
{
item
.
roomName
}
<
/ListGroup.Item
>
<
/ListGroup
>
...
...
client/src/Components/RoomMake.js
View file @
4f3330b3
...
...
@@ -34,6 +34,7 @@ function RoomMake(props) {
const
Id
=
res
.
data
.
roomId
alert
(
`방암호는
${
Id
}
입니다`
)
props
.
handleCloseModal
()
props
.
handleChato
()
setRoom
(
INIT_ROOM
)
}
catch
(
error
){
catchErrors
(
error
,
setError
)
...
...
client/src/Pages/HomePage.js
View file @
4f3330b3
...
...
@@ -36,9 +36,10 @@ function Home() {
//SOCKET 관련 시작
function
enterChatRoom
(
rName
)
{
//방 입장하기
socket
.
emit
(
'
joinRoom
'
,
rName
)
console
.
log
(
`joinRoom :
${
rName
}
입장`
)
function
enterChatRoom
(
rCode
)
{
//방 입장하기
socket
.
emit
(
'
joinRoom
'
,
rCode
)
setRoomCode
(
rCode
)
console
.
log
(
`joinRoom :
${
rCode
}
입장`
)
}
const
sendMsg
=
(
e
)
=>
{
...
...
@@ -70,10 +71,10 @@ function Home() {
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
/
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
/
>
<
/Tab
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChato
}
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
/
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
/
>
<
/Tab
>
<
/Tabs
>
<
/Col
>
...
...
@@ -91,8 +92,8 @@ function Home() {
<
/div
>
<
/Col
>
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChatRoom
}
handleCloseEnter
=
{
handleCloseEnter
}
handleChato
=
{
handleChato
}
setRoomName
=
{
setRoomName
}
/
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
handleChato
=
{
handleChato
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChatRoom
}
handleCloseEnter
=
{
handleCloseEnter
}
handleChato
=
{
handleChato
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
/
>
<
/
>
);
}
...
...
server/controllers/room.controller.js
View file @
4f3330b3
...
...
@@ -40,8 +40,8 @@ const makeRoom = async (req, res) => {
const
getClosedList
=
async
(
req
,
res
)
=>
{
try
{
console
.
log
(
'
req확인
'
,
req
.
query
.
_id
)
let
list
=
await
Room
.
find
({
member
:
[
req
.
query
.
_id
]
})
console
.
log
(
'
c_list가져오기
'
,
list
.
roomName
)
let
list
=
await
Room
.
find
({
member
:
req
.
query
.
_id
})
console
.
log
(
'
c_list가져오기
'
,
list
.
member
)
return
res
.
json
(
list
)
}
catch
(
error
)
{
res
.
status
(
500
).
send
(
'
리스트 불러오기를 실패하였습니다!
'
)
...
...
@@ -58,6 +58,17 @@ const getOpenList = async (req, res) => {
}
}
const
getRoomName
=
async
(
req
,
res
)
=>
{
const
roomId
=
req
.
query
.
roomCode
try
{
let
roominfo
=
await
Room
.
findOne
({
roomId
:
roomId
}).
select
(
'
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
)
...
...
@@ -76,4 +87,4 @@ const changemember = async (req, res) => {
}
}
export
default
{
makeRoom
,
getClosedList
,
getOpenList
,
changemember
}
export
default
{
makeRoom
,
getClosedList
,
getOpenList
,
getRoomName
,
changemember
}
server/routes/room.routers.js
View file @
4f3330b3
...
...
@@ -14,4 +14,7 @@ router.route('/room/openlist')
router
.
route
(
'
/room/member
'
)
.
put
(
roomCtrl
.
changemember
)
router
.
route
(
'
/room/getRoomName
'
)
.
get
(
roomCtrl
.
getRoomName
)
export
default
router
\ No newline at end of file
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