diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js index 36b0021..1b8d645 100644 --- a/src/GamePages/InGame.js +++ b/src/GamePages/InGame.js @@ -1,6 +1,4 @@ import React, { useState, useEffect, useRef } from 'react'; -import Canvas from './components/Canvas3'; -import ListnerCanvas from './components/ListnerCanvas'; import Timer from './components/Timer'; import User from './components/User'; import BackBtn from './components/BackBtn'; @@ -10,14 +8,12 @@ import Chat from './components/Chat'; import io from 'socket.io-client'; import GameStartBtn from './components/GameStartBtn'; import Words from '../Words'; -import GameOver from './components/IsInGameMsg'; import { useHistory } from 'react-router-dom'; import Board from './components/Canvas'; import Logo from './components/Logo'; - const socket = io.connect('http://localhost:4000', { - transports: ['websocket', 'polling'], + transports: ['websocket'], path: '/socket.io', }); @@ -102,16 +98,23 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { return chat.map(({ name, message }, index) => (

- {name}: {message} + {name}: {message}{' '}

)); }; + // const onMessageSubmit = (e) => { + // const { name, message } = state; + // socket.current.emit('message', { name, message }); + // e.preventDefault(); + // setState({ message: '', name }); + // }; + const onMessageSubmit = (e) => { e.preventDefault(); const { name, message } = state; - socketRef.current.emit('message', { name, message }); + socket.emit('message', { name, message }); setState({ message: '', name }); }; @@ -141,12 +144,13 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { //! --------------------------method-------------------------- useEffect(() => { - // * 메세지 - socketRef.current = socket; - socketRef.current.on('message', ({ name, message }) => { - setChat([...chat, { name, message }]); + socket.on('message', ({ name, message }) => { + if (chat.length > 4) { + return setChat([]); + } + return setChat([...chat, { name, message }]); }); - // return () => socketRef.current.disconnect(); + console.log('채팅이야!!!!!', chat); }, [chat]); useEffect(() => { @@ -184,7 +188,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { }); socket.on('renew userlist', (list) => { - setUserlist(list); + setUserlist([...list]); }); }); @@ -196,7 +200,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { let parsedUrl = window.location.href.split('/'); let roomNum = parsedUrl[parsedUrl.length - 1]; + console.log(roomNum); socket.emit('send roomNum', roomNum); + console.log('userlist', userlist); }, []); useEffect(() => { @@ -218,7 +224,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
- {isPresenter ? ( -
onMessageSubmit(e)}> +
>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c background-color: white; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; +<<<<<<< HEAD + border: 5px solid #0f4d86; + border-radius: 15px; +======= width: 600px; height: 400px; +>>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c } .card h1 { text-align: center;