Skip to content

GitLab

Commit 8634b7fc authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Merge remote-tracking branch 'origin/sooModalTest' into young

parents 31ac640d 00dade89
Show whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 8634b7fc
...@@ -25,15 +25,24 @@ function Chat(props) { ...@@ -25,15 +25,24 @@ function Chat(props) {
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => {
setChat([...chat, props.recievedMsg])
}, [props.recievedMsg])
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}> <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<h2>현재 {props.roomName} 입니다.</h2> <h2>현재 {props.roomName} 입니다.</h2>
{ chat.map((value, index) => ( { chat.map((value, index) => {
<Row key={index} className='ml-3'> if (Boolean(value)) {
// console.log(`value=${value}=`)
return <Row key={index} className='ml-3'>
{props.roomName}에서 {defaultname}님이 보낸 메세지 : {value} {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
</Row> </Row>
))} } else {
return null
}
})}
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}> <Form onSubmit={sendMsgCH}>
<Form.Group> <Form.Group>
...@@ -49,4 +58,5 @@ function Chat(props) { ...@@ -49,4 +58,5 @@ function Chat(props) {
); );
} }
export default Chat; export default Chat;
client/src/Components/ClosedList.js
View file @ 8634b7fc
...@@ -20,11 +20,11 @@ function ClosedList(props) { ...@@ -20,11 +20,11 @@ function ClosedList(props) {
setList(res.data) setList(res.data)
} }
function enterChatroomCH(e) { function enterChatRoomCH(e) {
console.log(e.target.name) console.log(e.target.name)
console.log(e.target) console.log(e.target)
const roomName = e.target.name const roomName = e.target.name
props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함 props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
props.setRoomName(roomName) props.setRoomName(roomName)
// props.clearChat() // 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) { ...@@ -16,11 +16,9 @@ function OpenList(props) {
} }
function enterChatroomCH(e) { function enterChatRoomCH(e) {
console.log(e.target.name)
console.log(e.target)
const roomName = e.target.name const roomName = e.target.name
props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함 props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
props.setRoomName(roomName) props.setRoomName(roomName)
// props.clearChat() // 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'; ...@@ -9,35 +9,32 @@ import Menu from '../Components/Menu';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { io } from "socket.io-client"; //모듈 가져오기 import { io } from "socket.io-client"; //모듈 가져오기
import Chat from "../Components/Chat"; import Chat from "../Components/Chat";
const socket = io(); import RoomMake from "../Components/RoomMake"
import EnterRoom from "../Components/EnterRoom"
const INIT_ROOM = { const socket = io();
roomName: '',
interest: '',
isOpen: false,
moderator: '',
}
function Home() { function Home() {
const [show, setShow] = useState(false); const [showModal, setShowModal] = useState(false);
const [show2, setShow2] = useState(false); const [showEnter, setEnter] = useState(false);
const [chat, setChat] = 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 [singleChat, setSingleChat] = useState('')
const [recievedMsg, setRecievedMsg] = useState('')
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
// const [success, setSuccess] = useState(false) const [roomCode, setRoomCode] = useState('')
const handleClose = () => setShow(false); //방참가
const handleShow = () => setShow(true); const [roomId, setRoomId] = useState('')
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true);
const handleChato = () => setChat(true); const handleChato = () => setChat(true);
const handleChatc = () => setChat(false); const handleChatc = () => setChat(false);
const handleClose2 = () => setShow2(false);
const handleShow2 = () => setShow2(true);
const moderator = sessionStorage.getItem('userId');
const member = sessionStorage.getItem('userId'); const member = sessionStorage.getItem('userId');
useEffect(() => { useEffect(() => {
...@@ -47,26 +44,7 @@ function Home() { ...@@ -47,26 +44,7 @@ function Home() {
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
setRoom({ ...room, [name]: value, moderator, member }) setRoom({ ...room, [name]: value, 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)
}
} }
//SOCKET 관련 시작 //SOCKET 관련 시작
...@@ -81,14 +59,18 @@ function Home() { ...@@ -81,14 +59,18 @@ function Home() {
useEffect(() => { useEffect(() => {
socket.emit("chat", { socket.emit("chat", {
roomName: roomName, roomName: roomCode,
msg: singleChat msg: singleChat
}) })
socket.on('broadcast', (msg) => { }, [singleChat])
useEffect(() => {
socket.on("sendedMSG", (msg) => {
console.log(msg) console.log(msg)
setSingleChat(msg) setRecievedMsg(msg)
}) })
}, [singleChat]) }, [])
return ( return (
<> <>
...@@ -105,92 +87,21 @@ function Home() { ...@@ -105,92 +87,21 @@ function Home() {
</Tabs> </Tabs>
</Col> </Col>
<Col style={{ padding: "0" }}> <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" }}> <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShow} size="lg" block> <Button variant="primary" onClick={handleShowModal} size="lg" block>
생성 생성
</Button> </Button>
<Button variant="secondary" onClick={handleShow2} size="lg" block> <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
참가 참가
</Button> </Button>
</div> </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> </Col>
</Row> </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) => { // 기본 연결 ...@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결
socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴 socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
}); });
socket.on('chat', (data)=>{ // socket.on('chat', (data)=>{
io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게 // 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', () => { socket.on('disconnect', () => {
console.log('disconnected from server id=', socket.id) console.log('disconnected from server id=', socket.id)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment