아이스베어의 개발 일기

1탄을 보지 않고 2탄부터 오셨다면 꼭 보고 오시길 바랍니다.

2021.06.04 - [FRONT-END/React] - [React] React로 Chat Application 구현하기 -1

1탄에서는 서버와 연결됨을 확인하였다. 정리를 하면

1탄에 이어서 하려고 한다!

Join.js의 내용을 바꿔준다.

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import './Join.css'

const Join = () => {
  const [name, setName] = useState('')
  const [room, setRoom] = useState('')
  return (
    <div className='joinOuterContainer'>
      <div className='joinInnerContainer'>
        <h1 className='heading'></h1>
        <div>
          <input
            placeholder='이름'
            className='joinInput'
            type='text'
            onChange={(event) => setName(event.target.value)}
          />
        </div>
        <div>
          <input
            placeholder='채팅방'
            className='joinInput mt-20'
            type='text'
            onChange={(event) => setRoom(event.target.value)}
          />
        </div>
        <Link
          onClick={(e) => (!name || !room ? e.preventDefault() : null)}
          to={`/chat?name=${name}&room=${room}`}
        >
          <button className={'button mt-20'} type='submit'>
            가입
          </button>
        </Link>
      </div>
    </div>
  )
}

export default Join

Components 폴더에 Chat, Join 폴더를 새로 만들어 각각의 js 파일에 넣어주고 아래의 css파일을 다운로드하여 넣어준다!

App.js에 저장? 만 눌러줘도 자동적으로 localhost:3000에 적용이 된다.

join.css가 적용된 모습을 확인할 수 있다.

Chat.js에 가서 코드를 수정하기전 터미널에서 설치할 것이 있다. 

components 폴더에 InfoBar, Input, Messages, TextContainer 폴더를 추가한다.

InfoBar 폴더 안에 InfoBar.js파일을 생성한다.

Input폴더 안에 Input.js파일을 생성한다.

Messages 폴더 안에 Message 폴더를 생성하고 각각 js 파일을 생성한다.

TextContainer 폴더에 TextContainer.js를 만들어준다. 

각각 만든 js 파일에 rafce + tab을 눌러 파일 이름을 써준다.

각각의 css 파일을 아까와 같이 같은 이름폴더에 넣어준다!

복잡하지만 적용한 모습이다.

Chat.js에 가서 코드를 추가한다.

import React, { useState, useEffect } from 'react'
import queryString from 'query-string'
import io from 'socket.io-client'
import './Chat.css'
import InfoBar from '../InfoBar/InfoBar'
import Messages from '../Messages/Messages'
import Input from '../Input/Input'
import TextContainer from '../TextContainer/TextContainer'
const ENDPOINT = 'http://localhost:5000'
let socket

const Chat = ({ location }) => {
  const [name, setName] = useState('')
  const [room, setRoom] = useState('')
  const [users, setUsers] = useState('')
  const [message, setMessage] = useState('')
  const [messages, setMessages] = useState([])
  useEffect(() => {
    const { name, room } = queryString.parse(location.search)
    socket = io(ENDPOINT)

    setRoom(room)
    setName(name)
    socket.emit('join', { name, room }, (error) => {
      if (error) {
        alert(error)
      }
    })
  }, [ENDPOINT, location.search])
  useEffect(() => {
    //로딩 될때만 실행
    socket.on('message', (message) => {
      setMessage((message) => [...messages, message])
    })
    socket.on('roomData', ({ users }) => {
      setUsers(users)
    })
  }, [])
  const sendMessage = (event) => {
    event.preventDefault()
    if (message) {
      socket.emit('sendMessage', message, () => setMessage(''))
    }
  }
  return (
    <div className='outerContainer'>
      <div className='container'>
        <InfoBar room={room} />
        <Messages messages={messages} name={name} />
        <Input
          message={message}
          setMessage={setMessage}
          sendMessage={sendMessage}
        />
      </div>
      <TextContainer users={users} />
    </div>
  )
}

export default Chat

server/index.js 가서 통신이 되는지 코드를 수정해준다.

const express = require('express')
const socketio = require('socket.io')
const http = require('http')

const cors = require('cors')
const router = require('./router')

const PORT = process.env.PORT || 5000

const app = express()
const server = http.createServer(app)
const io = socketio(server)
app.use(cors())
app.use(router)
io.on('connection', (socket) => {
  console.log('새로운 connectoin이 발생하였습니다.')
  socket.on('join', ({ name, room }, callback) => {})
  socket.on('disconnect', () => {
    console.log('유저가 떠났어요.')
  })
})
server.listen(PORT, () => console.log(`서버가 ${PORT} 에서 시작되었어요`))

server/ router.js를 생성한다.

router.js

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
  res.send({ response: 'Server is up and running' }).status(200)
})

module.exports = router

터미널에 cors와 nodemon을 설치해준다.

package.json에 사진에 표시한 start 부분을 추가한다. 

서버를 돌린다!

서버가 연결됨을 확인하는데 콘솔창에 오류가 가득하였다.

밑의 사진처럼 package.json을 바꿔준다.

가입을 눌렀을때 표시한 console창에 표시한 글이 떠야 한다.

혹시나 바꿔도 오류가 뜬다면 node_modules를 삭제하면 되는데 아래 블로그에 상세히 설명했으니

2021.06.07 - [Tip] - [React] Cannot find module 'socket.io' 해결법 - 2

여기로 가면 해결이 될것이다!

https://www.youtube.com/watch?v=ZwFA3YMfkoc 

https://github.com/adrianhajdin/project_chat_application

이 영상을 보며 공부하고 따라 해 보려고 한다! 아 실행하기 앞서 node가 설치되어있어야 한다.

과정을 따라 하며 실행한 것을 블로그에 상세히 올리는 것이니 따라 해도 괜찮을 것이다. 

영상을 참고하되 이해하기 편하게 조금씩 코드를 바꾸기도 할 것이다!

Visual Studio Code에서 만들 파일을 생성하고 연결해준다.

나는 c:에 nodeExam 파일에 reactChatting 파일을 만들어서 연결해주었다.

client라는 이름으로 react app이 생성됨을 확인할 수 있다.

console 차에도 설치됐다고 npm start 실행하라고 뜨는데 말 그대로 해줘야 한다! 그럼 서버와 연결이 된다.

localhost:3000으로 react 서버가 연결되었다.

터미널에 react-router-dom을 설치한다.

package.json에 설치됨을 확인할 수 있다.

App.js를 수정해준다.

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Chat from './components/Chat'
import Join from './components/Join'

const App = () => {
  return (
    <Router>
      <Route path='/' component={Join} />
      <Route path='/chat' component={Chat} />
    </Router>
  )
}

export default App

Chat.js

import React from 'react'

export const Chat = () => {
    return (
        <div>
            채팅
        </div>
    )
}

export default Chat

Join.js

import React from 'react'

const Join = () => {
    return (
        <div>
            가입
        </div>
    )
}

export default Join

터미널을 열어준다.

서버 확인할 수 있다.

server 파일 안에 package.json이 생성되었다.

server 폴더에 index.js 파일도 만들어 준다.

소켓통신을 위해 라이브러리를 설치한다.

설치가 완료됐으면 아까 만든 index.js에 내용을 추가한다.

index.js

const express = require('express')
const socketio = require('socket.io')
const http = require('http')

const PORT = process.env.PORT || 5000

const app = express();
const server = http.createServer(app)
const io = socketio(server)
server.listen(PORT,()=>console.log(`서버가 ${PORT} 에서 시작되었어요`))

서버가 5000번 포트에서 index.js 를돌린다.

서버와 연결이 되었다. 만약 나오지 않는다면 터미널에 

npm run start

하면 될 것이다.