[리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 1

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

 

위 영상을 기반으로 제작합니다.

 

Client 세팅 (CRA)

create-react-app을 통해 client 쪽을 세팅한다. 서버는 Nodejs express를 사용할 것이다.

리액트 라우터를 설치해주고 Join과 Chat 컴포넌트를 만들어 Join페이지를 통해 Chat페이지로 이동할 것이다.

 

우선, App.js에 라우터 설정을 해주자

import React from 'react'
import { Routes, Route } from 'react-router-dom';
import Chat from "./pages/Chat";
import Join from "./pages/Join";

function App() {
  return (
    <React.Fragment>
      <NavBar />
      <Routes>
        <Route path="/chat" element={<Chat />} />
        <Route path="/" element={<Join />} />
      </Routes>
    </React.Fragment>
  );
}

export default App;

 

SERVER 세팅 (Nodejs)

그런 다음 server폴더를 만들어 주고 npm init 명령어를 쳐준다.

mkdir server
npm init

 

그러면 server 폴더안에 package.json이 생성된다.

server에서 express와 socket.io를 설치해준다.

npm install express
npm install socket.io

 

server폴더 안에 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번 포트로 소켓을 열어준다.

 

이어서 다음 글에 작성하겠다.