아이스베어의 개발 일기

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

이어서 할것이다!

이번 포스팅에는 전 포스팅에서 폴더와 js파일을 만들어놨었는데 이번에는 js 내용을 채울것이다!

server에 users.js를 생성한 후 내용을 채운다.

const users = []

const addUser = ({ id, name, room }) => {
//이름의 공백 제거
  name = name.trim().toLowerCase()
  room = room.trim().toLowerCase()

  const existingUser = users.find(
    (user) => user.room === room && user.name === name
  )

  if (!name || !room) return { error: '사용자 이름과 방이 필요합니다.' }
  if (existingUser) return { error: '이미 사용중인 이름입니다.' }

  const user = { id, name, room }

  users.push(user)

  return { user }
}

const removeUser = (id) => {
  const index = users.findIndex((user) => user.id === id)

  if (index !== -1) return users.splice(index, 1)[0]
}

const getUser = (id) => users.find((user) => user.id === id)

const getUsersInRoom = (room) => users.filter((user) => user.room === room)

module.exports = { addUser, removeUser, getUser, getUsersInRoom }

기존에 만들어 놓은 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 { addUser, removeUser, getUser, getUsersInRoom } = require('./users.js')

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('새로운 connection이 발생하였습니다.')
  socket.on('join', ({ name, room }, callback) => {
    const { error, user } = addUser({ id: socket.id, name, room })
    if (error) callback({ error: '에러가 발생했어요.' })

    socket.emit('message', {
      user: 'admin',
      text: `${user.name}, ${user.room}에 오신것을 환영합니다.`,
    })
    socket.broadcast.to(user.room).emit('message', {
      user: 'admin',
      text: `${user.name} 님이 가입하셨습니다.`,
    })
    io.to(user.room).emit('roomData', {
      room: user.room,
      users: getUsersInRoom(user.room),
    })
    socket.join(user.room)

    callback()
  })
  socket.on('sendMessage', (message, callback) => {
    const user = getUser(socket.id)
    io.to(user.room).emit('message', { user: user.name, text: message })
    callback()
  })
  socket.on('disconnect', () => {
    const user = removeUser(socket.id)

    if (user) {
      io.to(user.room).emit('message', {
        user: 'Admin',
        text: `${user.name} 님이 방을 나갔습니다.`,
      })
      io.to(user.room).emit('roomData', {
        room: user.room,
        users: getUsersInRoom(user.room),
      })
    }
    console.log('유저가 떠났어요.')
  })
})
server.listen(PORT, () => console.log(`서버가 ${PORT} 에서 시작되었어요`))

Chat.js을 수정한다.

import React, { useState, useEffect } from 'react'
import queryString from 'query-string'
import io from 'socket.io-client'

import TextContainer from '../TextContainer/TextContainer'
import Messages from '../Messages/Messages'
import InfoBar from '../InfoBar/InfoBar'
import Input from '../Input/Input'

import './Chat.css'

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) => {
      setMessages((messages) => [...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

infoBar.js에 내용을 추가한다.

import React from 'react'

import onlineIcon from '../../icons/onlineIcon.png'
import closeIcon from '../../icons/closeIcon.png'

import './InfoBar.css'

const InfoBar = () => {
  ;<div className='infoBar'>
    <div className='leftInnerContainer'>
      <img className='onlineIcon' src={onlineIcon} alt='online icon' />
      <h3>{room}</h3>
    </div>
    <div className='rightInnerContainer'>
      <a href='/'>
        <img src={closeIcon} alt='close icon' />
      </a>
    </div>
  </div>
}

export default InfoBar

위 코드의 png를 적용하기 위해 사진을 넣어줄 것이다.

코드안의 경로와 맞게 src에 icons라는 폴더를 만들어 이미지를 넣어주면 된다. 

input.js에 내용을 추가한다.

import React from 'react'

import './Input.css'

const Input = ({ setMessage, sendMessage, message }) => (
  <form className='form'>
    <input
      className='input'
      type='text'
      placeholder='전송하려는 메세지를 입력하세요.'
      value={message}
      onChange={({ target: { value } }) => setMessage(value)}
      onKeyPress={(event) =>
        event.key === 'Enter' ? sendMessage(event) : null
      }
    />
    <button className='sendButton' onClick={(e) => sendMessage(e)}>
      전송
    </button>
  </form>
)

export default Input

Messages폴더 안의 Messages.js에 내용을 추가한다.

import React from 'react'

import ScrollToBottom from 'react-scroll-to-bottom'

import Message from './Message/Message'

import './Messages.css'

const Messages = ({ messages, name }) => (
  <ScrollToBottom className='messages'>
    {messages.map((message, i) => (
      <div key={i}>
        <Message message={message} name={name} />
      </div>
    ))}
  </ScrollToBottom>
)

export default Messages

Messages폴더 안의 Message의 Message.js에 내용을 추가한다.

import React from 'react'

import './Message.css'

import ReactEmoji from 'react-emoji'

const Message = ({ message: { text, user }, name }) => {
  let isSentByCurrentUser = false

  const trimmedName = name.trim().toLowerCase()

  if (user === trimmedName) {
    isSentByCurrentUser = true
  }

  return isSentByCurrentUser ? (
    <div className='messageContainer justifyEnd'>
      <p className='sentText pr-10'>{trimmedName}</p>
      <div className='messageBox backgroundBlue'>
        <p className='messageText colorWhite'>{ReactEmoji.emojify(text)}</p>
      </div>
    </div>
  ) : (
    <div className='messageContainer justifyStart'>
      <div className='messageBox backgroundLight'>
        <p className='messageText colorDark'>{ReactEmoji.emojify(text)}</p>
      </div>
      <p className='sentText pl-10 '>{user}</p>
    </div>
  )
}

export default Message

TextContainer.js에도 내용을 추가한다.

import React from 'react'

import onlineIcon from '../../icons/onlineIcon.png'

import './TextContainer.css'

const TextContainer = ({ users }) => (
  <div className='textContainer'>
    <div>
      <h1>
        실시간 채팅 프로그램{' '}
        <span role='img' aria-label='emoji'>
          💬
        </span>
      </h1>
      <h2>
        Created with React, Express, Node and Socket.IO{' '}
        <span role='img' aria-label='emoji'>
          ❤️
        </span>
      </h2>
      <h2>
        Try it out right now!{' '}
        <span role='img' aria-label='emoji'>
          ⬅️
        </span>
      </h2>
    </div>
    {users ? (
      <div>
        <h1>현재 채팅중인 사람들 : </h1>
        <div className='activeContainer'>
          <h2>
            {users.map(({ name }) => (
              <div key={name} className='activeItem'>
                {name}
                <img alt='Online Icon' src={onlineIcon} />
              </div>
            ))}
          </h2>
        </div>
      </div>
    ) : null}
  </div>
)

export default TextContainer

모든 코드를 작성하면 

localhost:3000/ 에 이런 화면이 뜨고 가입을 누르면

채팅창이 뜬것을 확인할 수 있다.

다음 포스팅은 전체적인 채팅방 동작과 코드설명을 할 것이다.

본 포스팅을 시작하기 앞서 나는 MongoDB Compass가 깔려있는 상태이다.

backend폴더로 이동해 (즉 server의 위치) 

mongoose.connect(process.env.MONGODB_URL || 'mongodb://localhost/amazona', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
})

이걸 붙여준다 나는 express() 밑에  붙여주었다.

mongoose를 설치했는데도 import가 되지 않을때는 

npm i express-async-handler

테스트 하기위에 data.js에 users 데이터를 추가해준다.

data.js

import bcrypt from 'bcryptjs'

const data = {
  users: [
    {
      name: 'Basir',
      email: 'adming@example.com',
      password: bcrypt.hashSync('1234', 8),
      isAdmin: false,
    },
    {
      name: 'John',
      email: 'John@example.com',
      password: bcrypt.hashSync('1234', 8),
      isAdmin: false,
    },
  ]}

MongoDB Cluster에 접속하여 구글계정으로 로그인 하고 

나의 MongoDB 주소를 알 수 있다. 이것을

아까 mongoose.connect() 코드에 url 주소를 붙여준다.

mongoose.connect(
  process.env.MONGODB_URL ||
    'mongodb+srv://(아이디):(비밀번호)@cluster0.bueqv.mongodb.net/test',
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  }
)

테스트 하기위해 인터넷 창에

http://localhost:5000/api/users/seed

 검색한다.

아까 data.js에 users 데이터를 추가한 것이 JSON형식으로 보인다.(저는 JSON Viewer를 설치했기 때문에 보여요.)

MongoDB Compass 클릭하면 tests에 user 데이터가 들어왔음을 확인할 수 있다.

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

하면 될 것이다.

1탄에 이어서 하는 것이다!

Say.js  파일을 만들어 준다.

Say.js

import React, {useState} from 'react'

const Say = () => {
    //hook
    const[message, setMessage] = useState('')
    const [color, setColor] = useState('black')
    const onClickEnter = () => setMessage('안녕하세요')
    const onClickLeave = () => setMessage('안녕히가세요')
    return (
    <div>
        <button onClick={onClickEnter}> 입장 </button>
        <button onClick={onClickLeave}> 퇴장 </button>
        <h1 style={{color}}>{message}</h1>
        <button style={{color:'green'}} onClick={() => setColor('green')}>초록색</button>
        <button style={{color:'blue'}} onClick={() => setColor('blue')}>파란색</button>
    </div>
    )
}

export default  Say

App.js 파일에 아래의 내용을 추가한다.

App.js

import './App.css';
import Say from './Say';

function App() {
  let a = '홍길동'
  let arr = [1, 2, 3, 4, 5]
  let str = ''
  let result ='홍말자'
  {
    result = str && '홍길동'
    str ='5'
    result = str && '홍길동'
    console.log("여기값은 "+result) //홍길동
  }
  return (
  <>
    안녕하세요? {a} 님 {arr.map(i=> i*5+' ')}
    <Say />

  </>
  //jsx에서 반복문과 if문 사용불가
  //short circuit 또는 3항 연산자
  )
}

export default App

localhost:3000 화면에 위 사진처럼 뜬다.

아래의 버튼을 누르면 글씨 색도 변환다는 것을 확인할 수 있다!

1. Visual Studio Code에 내가 실행할 파일을 만들어 띄운다.

나는 로컬디스크 C에 nodeEx 라는 파일을 생성했다.

2. Visual Studio Code에 터미널을 열어 아래의 사진처럼 코드를 입력한다.

파일이 생성된다!

여기에

cd first
npm run start

cd first를 입력한 후 npm run start 하면 리액트 앱이 생성된다.

terminal에 서버가 돌아간다고 뜨고 

완료가 되면 이 글씨와 함께 크롬창에 http://localhost:3000/ 로 뜬다!