Skip to content

GitLab

Commit 8a248e16 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

yeonwoo

parent f6c113bd
Show whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 8a248e16
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { Form, Button, Row } from 'react-bootstrap';
import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors';
function Chat(props) {
const [user, setUser] = useState('')
const [error, setError] = useState('')
const [disabled, setDisabled] = useState(true)
const [hidden, setHidden] = useState(false)
const userId = isAuthenticated()
async function getProfile(userId) {
try {
const response = await axios.get(`/users/${userId}`)
setUser(response.data)
} catch (error) {
catchErrors(error, setError)
}
}
// let defaultname=''
let defaultname = sessionStorage.getItem('name');
......@@ -13,6 +34,7 @@ function Chat(props) {
e.preventDefault()
setInner(e.target.value)
console.log(e.target.value)
setDisabled(false)
}
function sendMsgCH(e) {
......@@ -20,35 +42,80 @@ function Chat(props) {
props.setSingleChat(inner)
props.sendMsg(e)
setInner('')
setDisabled(true)
console.log(chat)
}
useEffect(() => {
getProfile(userId)
}, [userId])
useEffect(() => {
setChat([...chat, props.singleChat])
console.log('UseEffect singlechat', chat)
// check()
}, [props.singleChat])
useEffect(() => {
setChat([...chat, props.recievedMsg])
console.log('UseEffect recievechat', chat)
}, [props.recievedMsg])
// function check() {
// // if (chat[chat.length-1].user ===chat[chat.length-2].user){ //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교
// if (chat.length === 2) {
// setHidden(false)
// } else {
// setHidden(true)
// }
// console.log(hidden)
// }
const time = new Date().toLocaleTimeString()
return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
<h2>현재 {props.roomName} 입니다.</h2>
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<h2>현재 {props.roomName} 입니다.{chat.length}</h2>
{/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
{ chat.map((value, index) => (
<Row key={index} className='ml-3'>
{props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
<Row key={index} className='m-1 ml-3' >
<Col xs={2}>
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />}
</Col>
<Col xs={8}>
<Row><strong>{user.nickname}의 {index}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'>
<Col className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Col>
<Col className='ml-4'>{new Date().toLocaleTimeString()}</Col>
</Row>
))}
</Col>
</Row>
))
}
{/* 내가 보낸 메세지 띄우기 */}
{ chat.map((value, index) => (
<Row key={index} className='m-1 mr-4 justify-content-end'>
<div className='d-flex flex-wrap-nowrap' >
<Row className='mr-4'>{time}</Row>
<Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</div>
</Row>
))
}
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
<Form onSubmit={sendMsgCH}>
<Form.Group>
<Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
</Form.Group>
<Button variant="primary" type="submit">
<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%' }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
전송
</Button>
</Form.Group>
</Form>
</div>
</div >
);
......
client/src/Pages/HomePage.js
View file @ 8a248e16
......@@ -85,15 +85,14 @@ function Home() {
useEffect(() => {
socket.on("sendedMSG", (msg) => {
console.log(msg)
console.log('sendedMsg = ', msg)
setRecievedMsg(msg)
})
}, [])
// socket.on('broadcast', (msg) => {
// console.log(msg)
// setSingleChat(msg)
// })
// }, [singleChat])
socket.on('broadcast', (msg) => {
console.log(msg)
setSingleChat(msg)
})
return (
<>
......
client/src/Pages/ProfilePage.js
View file @ 8a248e16
......@@ -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 />
......@@ -98,8 +84,6 @@ function ProfilePage() {
<Col sm={4}>
<Row className='justify-content-center'>
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />}
{/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle hidden={!hidden}/> */}
{/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */}
</Row>
<Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex">
......@@ -109,17 +93,6 @@ function ProfilePage() {
</Form.Group>
</Form>
</Row>
{/*
{img?<Image src={img}/> : <h2>아직입니다.</h2>}
<Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex">
<Form.Group>
<Form.Label>프로필 사진 변경</Form.Label>
<Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
</Form.Group>
</Form>
</Row> */}
</Col>
<Col sm={8}>
<Row className='m-5 justify-content-center'>
......
server/server.js
View file @ 8a248e16
......@@ -26,7 +26,7 @@ io.on("connection", (socket) => { // 기본 연결
socket.on('chat', (data) => {
console.log(`chat실행 :`, data.roomName, data.msg)
io.to(data.roomName).emit('broadcast', [data.msg, data.name]); //roomName에 존재하는 모든 소켓들에게
io.to(data.roomName).emit('broadcast', data.msg); //roomName에 존재하는 모든 소켓들에게
})
socket.on('disconnect', () => {
......
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