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
eacfbbbf
Commit
eacfbbbf
authored
Jan 20, 2021
by
Choi Ga Young
Browse files
채팅방 분리, 브로드캐스팅, 불필요한거 삭제
parent
0a02c1c5
Changes
11
Show whitespace changes
Inline
Side-by-side
.gitignore
View file @
eacfbbbf
node_modules
package-lock.json
uploads
\ No newline at end of file
client/src/Components/Chat.js
View file @
eacfbbbf
...
...
@@ -32,12 +32,12 @@ function Chat(props) {
return
(
<
div
className
=
"
chat
"
id
=
"
chat
"
style
=
{{
border
:
"
2px solid
"
,
height
:
"
300%
"
,
margin
:
"
1%
"
,
borderColor
:
"
#BDBDBD
"
}}
>
<
h2
>
현재
{
props
.
room
Nam
e
}
입니다
.
<
/h2
>
<
h2
>
해당
방에
대한
참여코드는
{
props
.
room
Cod
e
}
입니다
.
<
/h2
>
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
==
''
))
{
// console.log(`value=${value}=`)
return
<
Row
key
=
{
index
}
className
=
'
ml-3
'
>
{
props
.
roomName
}
에서
{
defaultname
}
님이
보낸
메세지
:
{
value
}
{
defaultname
}
님이
보낸
메세지
:
{
value
}
<
/Row
>
}
else
{
return
null
...
...
client/src/Components/ChatForm.js
deleted
100644 → 0
View file @
0a02c1c5
import
React
,
{
useState
}
from
'
react
'
;
import
{
Form
,
Row
,
Col
,
Button
}
from
'
react-bootstrap
'
function
ChatForm
(
props
)
{
const
INIT_SAYING
=
''
const
[
saying
,
setSaying
]
=
useState
(
INIT_SAYING
);
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
setSaying
(
value
)
console
.
log
(
saying
)
}
function
handleSubmit
(
event
)
{
event
.
preventDefault
()
// const response = await axios.post('chat/makeChat', chatR)
props
.
setSingleChat
()
setSaying
(
INIT_SAYING
)
}
return
(
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Row
>
<
Col
>
<
Form
.
Group
>
<
Form
.
Control
name
=
'
chat
'
type
=
'
text
'
onChange
=
{
handleChange
}
>
chat
<
/Form.Control
>
<
/Form.Group
>
<
/Col
>
<
Col
>
<
Form
.
Group
>
<
Button
type
=
"
submit
"
>
send
<
/Button
>
<
/Form.Group
>
<
/Col
>
<
/Row
>
<
/Form
>
)
}
export
default
ChatForm
\ No newline at end of file
client/src/Components/ClosedList.js
View file @
eacfbbbf
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
ListGroup
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
ListGroup
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
function
ClosedList
(
props
)
{
...
...
@@ -10,32 +10,24 @@ function ClosedList(props) {
getClosedList
();
},
[]);
const
userId
=
sessionStorage
.
getItem
(
'
userId
'
);
async
function
getClosedList
()
{
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
console
.
log
(
'
id가져오기
'
,
userid
)
let
res
=
await
axios
.
get
(
'
/room/closedlist
'
,
{
params
:
{
'
_id
'
:
userid
}
})
console
.
log
(
'
가져온거
'
,
res
)
setList
(
res
.
data
)
}
function
enterChatRoomCH
(
e
)
{
console
.
log
(
e
.
target
.
name
)
console
.
log
(
e
.
target
)
const
roomName
=
e
.
target
.
name
props
.
enterChatroom
(
roomName
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoomName
(
roomName
)
const
roomCode
=
e
.
target
.
name
props
.
enterChatRoom
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
}
//user.hasOwnProperty('이름');
return
(
<
div
>
{
list
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
room
Name
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
room
Id
}
>
{
item
.
roomName
}
<
/ListGroup.Item
>
<
/ListGroup
>
...
...
client/src/Components/EnterRoom.js
View file @
eacfbbbf
import
React
,
{
useState
}
from
'
react
'
import
axios
from
'
axios
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Form
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Form
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
...
...
client/src/Components/OpenList.js
View file @
eacfbbbf
...
...
@@ -11,15 +11,14 @@ function OpenList(props) {
async
function
getOpenList
()
{
let
res
=
await
axios
.
get
(
'
/room/openlist
'
)
console
.
log
(
'
가져온거o
'
,
res
)
setOpenlist
(
res
.
data
)
}
function
enterChatRoomCH
(
e
)
{
const
room
Nam
e
=
e
.
target
.
name
props
.
enterChat
r
oom
(
room
Nam
e
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoom
Nam
e
(
room
Nam
e
)
const
room
Cod
e
=
e
.
target
.
name
props
.
enterChat
R
oom
(
room
Cod
e
)
// 각각의 room으로 들어가도록 설정해야 함
props
.
setRoom
Cod
e
(
room
Cod
e
)
// props.clearChat()
}
...
...
@@ -27,7 +26,7 @@ function OpenList(props) {
<
div
>
{
openlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
room
Name
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
room
Id
}
>
{
item
.
roomName
}
<
/ListGroup.Item
>
<
/ListGroup
>
...
...
client/src/Components/PrivateRoute.js
View file @
eacfbbbf
//로그인 한 사람만 route로 이동할 수 있도록 함
import
React
from
'
react
'
import
{
Redirect
,
Route
}
from
'
react-router-dom
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
function
PrivateRoute
({
path
,
children
})
{
if
(
isAuthenticated
())
{
//로그인이 됬을 시 정상적으로 작동
return
(
<
Route
path
=
{
path
}
>
{
children
}
<
/Route
>
)
}
else
{
//로그인이 되지 않았을 시 로그인페이지로 이동
return
(
<
Redirect
to
=
'
./login
'
/>
)
...
...
client/src/Pages/HomePage.js
View file @
eacfbbbf
...
...
@@ -20,11 +20,9 @@ function Home() {
//소켓
const
[
singleChat
,
setSingleChat
]
=
useState
(
''
)
const
[
recievedMsg
,
setRecievedMsg
]
=
useState
(
''
)
const
[
roomName
,
setRoomName
]
=
useState
(
''
)
const
[
roomCode
,
setRoomCode
]
=
useState
(
''
)
//방참가
const
[
roomId
,
setRoomId
]
=
useState
(
''
)
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
const
handleShowModal
=
()
=>
setShowModal
(
true
);
...
...
@@ -36,7 +34,7 @@ function Home() {
//SOCKET 관련 시작
function
enterChat
r
oom
(
rName
)
{
//방 입장하기
function
enterChat
R
oom
(
rName
)
{
//방 입장하기
socket
.
emit
(
'
joinRoom
'
,
rName
)
console
.
log
(
`joinRoom :
${
rName
}
입장`
)
}
...
...
@@ -48,7 +46,7 @@ function Home() {
useEffect
(()
=>
{
if
(
!
(
singleChat
==
''
))
{
socket
.
emit
(
"
chat
"
,
{
room
Name
:
roomCode
,
room
Info
:
roomCode
,
msg
:
singleChat
})
setSingleChat
([
''
])
...
...
@@ -70,15 +68,15 @@ function Home() {
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoom
Nam
e
=
{
setRoom
Nam
e
}
/
>
<
ClosedList
enterChatRoom
=
{
enterChatRoom
}
setRoom
Cod
e
=
{
setRoom
Cod
e
}
/
>
<
/Tab
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
setRoom
Nam
e
=
{
setRoom
Nam
e
}
/
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChato
}
>
<
OpenList
enterChatRoom
=
{
enterChatRoom
}
setRoom
Cod
e
=
{
setRoom
Cod
e
}
/
>
<
/Tab
>
<
/Tabs
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
setSingleChat
=
{
setSingleChat
}
room
Nam
e
=
{
room
Nam
e
}
/> : null
}
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
setSingleChat
=
{
setSingleChat
}
room
Cod
e
=
{
room
Cod
e
}
/> : null
}
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
...
...
@@ -92,7 +90,7 @@ function Home() {
<
/Col
>
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChat
r
oom
}
handleCloseEnter
=
{
handleCloseEnter
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChat
R
oom
}
handleCloseEnter
=
{
handleCloseEnter
}
/
>
<
/
>
);
}
...
...
client/src/Pages/ProfilePage.js
View file @
eacfbbbf
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
Menu
from
'
../Components/Menu
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
,
Dropdown
}
from
'
react-bootstrap
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
BrowserRouter
as
Link
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
import
catchErrors
from
'
../utils/catchErrors
'
...
...
@@ -76,20 +76,6 @@ function ProfilePage() {
getProfile
(
userId
)
},
[
userId
])
// const [img, setImg] = useState('')
// function bbb(e) {
// const { name } = e.target
// let reader = new FileReader();
// reader.onload = function (e){
// console.log(e.target.result)
// // setImg(e.target.result)
// // setProfileimg
// // console.log(user,name)
// setUser({...user, [name]: e.target.result})
// };
// reader.readAsDataURL(e.target.files[0])
// )
return
(
<>
<
Menu
/>
...
...
client/src/index.js
View file @
eacfbbbf
...
...
@@ -2,7 +2,7 @@ import React from 'react';
import
ReactDOM
from
'
react-dom
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
'
./index.css
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
}
from
'
react-router-dom
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Switch
}
from
'
react-router-dom
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
SignUpPage
from
'
./Pages/SignUpPage
'
;
import
ProfilePage
from
'
./Pages/ProfilePage
'
;
...
...
server/server.js
View file @
eacfbbbf
...
...
@@ -21,16 +21,15 @@ io.on("connection", (socket) => { // 기본 연결
console
.
log
(
"
socket connect ok
"
,
socket
.
id
)
socket
.
on
(
'
joinRoom
'
,
(
data
)
=>
{
// joinRoom을 클라이언트가 emit했을 때
let
roomName
=
data
;
socket
.
join
(
roomName
);
//클라이언트에서 data에 적힌 room으로 참여시킴
console
.
log
(
'
join_data확인
'
,
data
)
let
roomInfo
=
data
;
socket
.
join
(
roomInfo
);
//클라이언트에서 data에 적힌 room으로 참여시킴
});
// 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
console
.
log
(
'
roomname확인
'
,
data
)
socket
.
broadcast
.
to
(
data
.
roomInfo
).
emit
(
'
sendedMSG
'
,
data
.
msg
);
// sender 제외 특정 방으로
});
socket
.
on
(
'
disconnect
'
,
()
=>
{
...
...
@@ -39,8 +38,6 @@ io.on("connection", (socket) => { // 기본 연결
});
// app.use(express.json())
//이부분을 body 파싱함
app
.
use
(
bodyParser
.
json
());
app
.
use
(
cors
());
...
...
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