[React] 실시간 채팅 만들기

0. 들어가며

앞서 채팅방편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다.

1. [Node.js] Zoom 클론코딩 - 세팅편

2. [Node.js] Zoom 클론코딩 - 채팅편

3. [Node.js] Zoom 클론코딩 - 채팅방편

 

기본적인 Socket IO에 대해서 어느 정도 공부가 되었다고 판단해서 React에서 간단한 채팅 기능을 만들 생각이다.

결국 React에서 사용하는 것이 목적이기 때문! 

 

1. 구성하기 

React 

 npm install socket.io-client

Socket IO는 React에서 기본적으로 제공하는 패키지가 당연히 아니므로 설치해준다. 

 

Node 

npm install express cors
npm install nodemon @babel/core @babel/cli @babel/node @babel/preset-env -D

기본적인 Node 서버를 구성하기 위해서 필요한 패키지를 다운로드하였다. 

 

npm install socket.io

Socket IO도 당연히 설치해준다. 

 

그 외 기본적인 세팅은 세팅편을 참고! 

 

2. 서버 작업하기 

import express from "express";
import http from "http";
import SocketIO from "socket.io";

const app = express();
const webServer = http.createServer(app);
const socketServer = SocketIO(webServer, {
  cors: {
    origin: "*",
    credentials: true,
  },
});

socketServer.on("connection", (socket) => {
  socket.on("message", (message) => {
    socketServer.emit("message", message);
  });
});

webServer.listen(4000, () => {
  console.log("Listening on port 4000");
});

express로 서버를 실행하면 socket 서버는 실행할 수 없으니 http 패키지를 사용해서 서버를 열어주고 

그 안에 express와 socket.io를 실행시켰다. 

 

이때, cors를 사용하지 않으면 프론트에서 통신을 보낼 때 cors 오류가 나기 때문에 서버에서 추가해주었다. 

 

3. React 작업하기

import React, { useEffect, useState } from "react";
import io from "socket.io-client";

const socket = io.connect("http://localhost:4000");

function App() {
  const [chat, setChat] = useState([]);
  const [message, setMessage] = useState("");

  const sendMessageHandler = () => {
    socket.emit("message", message);
    setMessage("");
  };

  useEffect(() => {
    socket.on("message", (message) => {
      setChat([...chat, message]);
    });
  }, [chat]);

  return (
    <div className="App">
      <div>
        <h1>Messages</h1>
        <ul>
          {chat.map((data, idx) => {
            return <li key={idx}>{data}</li>;
          })}
        </ul>
      </div>

      <div>
        <h1>Chat Box</h1>
        <input value={message} onChange={(e) => setMessage(e.target.value)} />
        <button onClick={sendMessageHandler}>Send Message</button>
      </div>
    </div>
  );
}

export default App;

socket.io-client를 사용해서 서버와 통신을 하고 그 외 사용 방식은 기존과 같았다. 

 

4. 깃허브

https://github.com/SeoJaeWan/react-node-socket-chat

GitHub - SeoJaeWan/react-node-socket-chat