Skip to content

GitLab

Commit c349c1c2 authored by 우지원's avatar 우지원
Browse files

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

parents 0716ead6 645bf09c
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ c349c1c2
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Form, Button, Row } from 'react-bootstrap'; import { Form, Button, Row } from 'react-bootstrap';
function Chat(props) { function Chat(props) {
let defaultname = sessionStorage.getItem('name'); let defaultname = sessionStorage.getItem('name');
const [inner, setInner] = useState([''])
const [chat, setChat] = useState([inner]) //object로 key는 보낸사람 value는 메세지
function handleChange(e) { function handleChange(e) {
e.preventDefault() e.preventDefault()
props.setInner(e.target.value) setInner(e.target.value)
console.log(e.target.value) console.log(e.target.value)
} }
function sendMsgCH(e) { function sendMsgCH(e) {
e.preventDefault()
props.setSingleChat(inner)
props.sendMsg(e) props.sendMsg(e)
setInner('')
} }
useEffect(() => {
setChat([...chat, props.singleChat])
}, [props.singleChat])
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" }}>
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<h2>현재 {props.roomName} 입니다.</h2> <h2>현재 {props.roomName} 입니다.</h2>
{ props.chatmsg.map((value, index) => ( { chat.map((value, index) => (
<Row key={index} className='ml-3'> <Row key={index} className='ml-3'>
{props.roomName}에서 {defaultname}님이 보낸 메세지 : {value} {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
</Row> </Row>
))} ))}
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}> <Form onSubmit={sendMsgCH}>
<Form.Control name='msg' type='text' onChange={handleChange} /> <Form.Group>
<Button variant="primary" type="submit">전송</Button> <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
</Form.Group>
<Button variant="primary" type="submit">
전송
</Button>
</Form> </Form>
</div> </div>
......
client/src/Components/ChatForm.js 0 → 100644
View file @ c349c1c2
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 @ c349c1c2
...@@ -6,27 +6,25 @@ function ClosedList(props) { ...@@ -6,27 +6,25 @@ function ClosedList(props) {
{ room: '테스트 방1', memnum: 5, admin: '가영' }, { room: '테스트 방1', memnum: 5, admin: '가영' },
{ room: '테스트 방2', memnum: 4, admin: '수현' }] { room: '테스트 방2', memnum: 4, admin: '수현' }]
); );
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()
} }
return ( return (
<div> <div>
<Row> {list.map((item, index) =>
{list.map((list, index) => <ListGroup key={index}>
<ListGroup key={index}> <ListGroup.Item action onClick={enterChatroomCH} name={item.room}>
<ListGroup.Item action onClick={enterChatroomCH} name={list.room}> {item.room}
{list.room} </ListGroup.Item>
</ListGroup.Item> </ListGroup>
</ListGroup> )}
)}
</Row>
<Col>
</Col>
</div> </div>
) )
} }
......
client/src/Components/OpenList.js
View file @ c349c1c2
import React, { useState } from 'react' import React, { useState } from 'react'
import { ListGroup } from 'react-bootstrap'; import { ListGroup } from 'react-bootstrap';
function OpenList() { function OpenList(props) {
const [list, setList] = useState([ const [list, setList] = useState([
{ room: '테스트 방3', memnum: 7, admin: '가영2' }, { room: '테스트 방3', memnum: 7, admin: '가영2' },
{ room: '테스트 방4', memnum: 2, admin: '수현2' }] { room: '테스트 방4', memnum: 2, admin: '수현2' }]
); );
function enterChatroomCH(e) {
const roomName = e.target.name
props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
props.setRoomName(roomName)
// props.clearChat()
}
return ( return (
<div> <div>
{list.map((list, index) => {list.map((list, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action> <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
<h2>{list.room}</h2> <h2>{list.room}</h2>
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
......
client/src/Pages/HomePage.js
View file @ c349c1c2
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Row, Col, Modal, Button, Navbar, Nav } from 'react-bootstrap'; import axios from 'axios';
import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs'; import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab'; import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList'; import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList'; import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import catchErrors from '../utils/catchErrors';
import { io } from "socket.io-client"; //모듈 가져오기 import { io } from "socket.io-client"; //모듈 가져오기
import Chat from "../Components/Chat";
// const userName = "정연우";
const socket = io(); const socket = io();
const INIT_ROOM = {
roomName: '',
interest: '',
isOpen: false
}
function Home() { function Home() {
const [username, setUsername] = useState('defaultUser') const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false);
const [show, setShow] = useState(false); const [chat, setChat] = useState(false);
const [chat, setChat] = useState(false); const [room, setRoom] = useState(INIT_ROOM);
const [disabled, setDisabled] = useState(true);
const handleClose = () => setShow(false); const [error, setError] = useState('');
const handleShow = () => setShow(true);
const handleChato = () => setChat(true); const [singleChat, setSingleChat] = useState('')
const handleChatc = () => setChat(false); const [roomName, setRoomName] = useState('')
const [inner, setInner] = useState(['']) //인풋값 const handleClose = () => setShow(false);
const [chatmsg, setChatmsg] = useState([inner]) // 전송된 채팅들 저장하는 배열 const handleShow = () => setShow(true);
const [roomName, setRoomName] = useState('dd') //방 선택이 방1을 눌럿다 방2를 누르면 전체로 전송됨 const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
function enterChatroom(roomName) { //방 입장하기 const handleClose2 = () => setShow2(false);
socket.emit('joinRoom', roomName) const handleShow2 = () => setShow2(true);
console.log(`joinRoom : ${roomName} 입장`)
} useEffect(() => {
const isRoom = Object.values(room).every(el => Boolean(el))
const sendMsg = (e) => { isRoom ? setDisabled(false) : setDisabled(true)
e.preventDefault() }, [room])
console.log('sendMsg', inner)
console.log(roomName) function handleChange(event) {
socket.emit("chat", { const { name, value } = event.target
roomName: roomName, setRoom({ ...room, [name]: value })
msg: inner console.log(room)
}); }
}
async function handleSubmit(event) {
function clearChat() { event.preventDefault()
setChatmsg([]) try {
} setError('')
await axios.post('/room/makeRoom', room)
useEffect(() => { setRoom(INIT_ROOM)
socket.on('broadcast', (msg) => { } catch (error){
catchErrors(error, setError)
console.log('msg', msg) }
console.log('inner :', inner) }
setChatmsg([...chatmsg, msg]) //SOCKET 관련 시작
console.log('useeffect2', chatmsg)
}) function enterChatroom(rName) { //방 입장하기
console.log('useeffect2', chatmsg) socket.emit('joinRoom', rName)
}, [chatmsg]) console.log(`joinRoom : ${rName} 입장`)
}
return (
<> const sendMsg = (e) => {
<Menu /> e.preventDefault()
<Row className="mr-0"> }
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"> useEffect(() => {
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > socket.emit("chat", {
<ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName} clearChat={clearChat} /> roomName: roomName,
</Tab> msg: singleChat
<Tab eventKey="open" title="공개방" > })
<OpenList /> socket.on('broadcast', (msg) => {
</Tab> console.log(msg)
</Tabs> setSingleChat(msg)
</Col> })
<Col style={{ padding: "0" }}> }, [singleChat])
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} setInner={setInner} chatmsg={chatmsg} roomName={roomName} /> : null}
return (
<Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} > <>
생성 <Menu />
</Button> <Row className="mr-0">
<Col className="list" md={5}>
<Modal show={show} onHide={handleClose}> <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Modal.Header closeButton> <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<Modal.Title>방 생성</Modal.Title> <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
</Modal.Header> </Tab>
<Modal.Body>여기에 form 입력</Modal.Body> <Tab eventKey="open" title="공개방" >
<Modal.Footer> <OpenList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
<Button variant="primary" onClick={handleClose}> </Tab>
생성 </Tabs>
</Button> </Col>
</Modal.Footer> <Col style={{ padding: "0" }}>
</Modal> {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null}
</Col>
</Row> <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
</> <Button variant="primary" onClick={handleShow} size="lg" block>
); 생성
</Button>
<Button variant="secondary" onClick={handleShow2} 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>
{/* <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>
<Modal show={show2} onHide={handleClose2}>
<Modal.Header closeButton>
<Modal.Title>참여 코드로 채팅 참가</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={() => { console.log('제출') }}>
<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>
</>
);
} }
export default Home; export default Home;
......
client/src/Pages/ProfilePage.js
View file @ c349c1c2
...@@ -26,7 +26,7 @@ function ProfilePage() { ...@@ -26,7 +26,7 @@ function ProfilePage() {
async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
const userid = sessionStorage.getItem('user') const userid = sessionStorage.getItem('userId')
const response = await axios.post(`/users/${userid}`, { '_id': userid }) const response = await axios.post(`/users/${userid}`, { '_id': userid })
setUser(response.data) setUser(response.data)
} }
......
client/src/utils/catchErrors.js
View file @ c349c1c2
function catchErrors(error, displayError) { function catchErrors(error, displayError){
let errorMsg let errorMsg
if (error.response) { if (error.response){
errorMsg = error.response.data errorMsg = error.response.data
console.log(errorMsg) console.log(errorMsg)
} else if (error.request) { } else if (error.request) {
......
server/controllers/chat.controller.js → server/controllers/room.controller.js
View file @ c349c1c2
// import { useState } from 'react' import Room from "../models/Room.js"
import Chat from "../models/Chat.js"
import { customAlphabet } from 'nanoid' import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
const nanoid = customAlphabet('1234567890abcdef', 10) const nanoid = customAlphabet('1234567890abcdef', 10)
const makeChat = async (req, res) => { const makeRoom = async (req, res) => {
const { name, interest, isOpen } = req.body; console.log(req.body)
const { roomName, interest, isOpen } = req.body;
console.log(roomName, interest, isOpen)
const roomId = nanoid() const roomId = nanoid()
const chat = await Chat.findOne({ roomId }) const room = await Room.findOne({ roomId })
while (chat) { while (room) {
roomId = nanoid() roomId = nanoid()
chat = await Chat.findOne({ roomId }) room = await Room.findOne({ roomId })
} }
try { try {
if (!isLength(name, { min: 3, max: 20 })) { if (!isLength(roomName, { min: 3, max: 20 })) {
return res.status(422).send('채팅방의 이름은 3-20자여야 합니다.') return res.status(422).send('채팅방의 이름은 3-20자여야 합니다.')
} else if (interest=='Choose...' || interest==''){ } else if (interest=='Choose...' || interest==''){
return res.status(422).send('분야를 반드시 선택하여야 합니다.') return res.status(422).send('분야를 반드시 선택하여야 합니다.')
} }
const newChat = await new Chat({ const newRoom = await new Room({
roomId, roomId,
name, roomName,
interest, interest,
isOpen isOpen
}).save() }).save()
console.log(newChat) console.log(newRoom)
res.json(newChat) res.json(newRoom)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
res.status(500).send('방생성 에러') res.status(500).send('방생성 에러')
} }
} }
const hello = (req, res) => { export default { makeRoom }
res.send('Hello from users controller') \ No newline at end of file
}
export default { makeChat, hello }
\ No newline at end of file
server/models/Room.js
View file @ c349c1c2
...@@ -3,7 +3,12 @@ import mongoose from 'mongoose' ...@@ -3,7 +3,12 @@ import mongoose from 'mongoose'
const {String} = mongoose.Schema.Types const {String} = mongoose.Schema.Types
const RoomSchema = new mongoose.Schema({ const RoomSchema = new mongoose.Schema({
name: { roomId: {
type: String,
// default:() => nanoid(),
unique: true
},
roomName: {
type: String, type: String,
required: true, required: true,
}, },
...@@ -22,4 +27,4 @@ const RoomSchema = new mongoose.Schema({ ...@@ -22,4 +27,4 @@ const RoomSchema = new mongoose.Schema({
timestamps: true timestamps: true
}) })
export default mongoose.models.RoomSchema || mongoose.model('Room', RoomSchema) export default mongoose.models.Room || mongoose.model('Room', RoomSchema)
server/routes/chat.routers.js deleted 100644 → 0
View file @ 0716ead6
import express from 'express'
import chatCtrl from '../controllers/chat.controller.js'
const router = express.Router()
router.route('/chat/makeChat')
.post(chatCtrl.makeChat)
.get(chatCtrl.hello)
export default router
\ No newline at end of file
server/routes/room.routers.js 0 → 100644
View file @ c349c1c2
import express from 'express'
import roomCtrl from '../controllers/room.controller.js'
const router = express.Router()
router.route('/room/makeRoom')
.post(roomCtrl.makeRoom)
export default router
\ No newline at end of file
server/server.js
View file @ c349c1c2
...@@ -2,10 +2,11 @@ import express from 'express' ...@@ -2,10 +2,11 @@ import express from 'express'
import connectDb from './utils/connectDb.js' import connectDb from './utils/connectDb.js'
import userRouter from './routes/user.routes.js' import userRouter from './routes/user.routes.js'
import authRouter from './routes/auth.routes.js' import authRouter from './routes/auth.routes.js'
import roomRouter from './routes/room.routers.js'
import bodyParser from "body-parser"; 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"
connectDb() connectDb()
...@@ -15,45 +16,36 @@ const server = http.createServer(app); ...@@ -15,45 +16,36 @@ const server = http.createServer(app);
const io = new Server(server) 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했을 때 let roomName=data;
let roomName = data;
console.log(roomName, "방 입장")
socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴 socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
}); });
socket.on('chat', (data) => { socket.on('chat', (data)=>{
console.log(`chat실행 :`, data.roomName, data.msg) io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게
io.to(data.roomName).emit('broadcast', data.msg); //roomName에 존재하는 모든 소켓들에게
}) })
socket.on('disconnect', () => { socket.on('disconnect', () => {
console.log('disconnected from server id=', socket.id) console.log('disconnected from server id=', socket.id)
}) })
}); });
// app.use(express.json()) // app.use(express.json())
//이부분을 body 파싱함 //이부분을 body 파싱함
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(cors());
app.use(userRouter) app.use(userRouter)
app.use(authRouter) app.use(authRouter)
//userRouter로 이동 app.use(roomRouter)
app.get('/', (req, res) => {
res.send('Hello World. 안녕하세요')
})
server.listen(3030, () => { server.listen(3030, () => {
console.log('Listening on port 3030') console.log('Listening on port 3030')
}) })
export default server
// export default server // module.exports = server;
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