[React] 리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 2

 

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

 

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

[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파일을 다운로드하여 넣어준다!

 

Chat.css

0.00MB

Join.css

0.00MB

 

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

 

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

 

 

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

 

클라이언트 쪽에서 설치해야한다!

 

클라이언트 쪽에서의 socket 설치

 

이모티콘 사용하기 위한 설치

 

버튼을 누르면 다시 최신으로 이동

 

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

 

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

 

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

 

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

 

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

 

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

 

나중에 출력됬을때 어떤 파일이 떴는지 알기 위함

InfoBar.css

0.00MB

Input.css

0.00MB

Message.css

0.00MB

Messages.css

0.00MB

TextContainer.css

0.00MB

 

각각의 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

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

 

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