(TIL 44일차) 실시간 채팅 (소켓 통신)

실시간 채팅 구현

Express를 이용한 웹 소켓 서버 생성 및 실행

// 실시간 채팅 웹소켓 서버 구현
// 1. 웹 소켓 서버 생성
const express = require("express");
const app = express();
const server = require("http").createServer(app);
const portNo = 3001;
server.listen(portNo, () => {
  console.log("서버 스타트", "http://localhost:" + portNo);
});

app.use("/public", express.static("./public"));
app.get("/", (req, res) => {
  res.redirect(302, "/public");
});
// 2.웹소켓 서버 실행
const socketio = require("socket.io");
const io = socketio.listen(server);

// 3. 클라이언트 접속시
io.on("connection", socket => {
  console.log("사용자 접속", socket.client.id);
  // 4. 클라이언트한테 메세지를 받을 시 행동
  // 주의! socket.on("첫 번째 매개변수 메세지")
  // 첫 번째 매개변수 메세지는 스트링이지만
  // 채팅 컴포넌트에서 socket.emit으로 보내는 메세지랑 같아야 한다
  // 클라이언트 socket.emit("send")면 여기서는 socket.on("send")
  socket.on("send message", msg => {
    // 5. 받은 메세지 모든 클라이언트한테 전송
    console.log("receive message", msg);
    io.emit("update message", msg);
  });
});

채팅 컴포넌트에서 웹 소켓 서버 연결 및 메세지 전송

// 소켓 import
import socketio from "socket.io-client";

// 웹 소켓 서버에 접속
const socket = socketio.connect("http://localhost:3001");

const Chat = ({ status, chatStatus }) => {
  const [msg, setMsg] = useState("");
  const [res, setRes] = useState([]);

  // 메세지 받기
  useEffect(() => {
    socket.on("update message", obj => {
      res.unshift(obj);
      setRes(res);
    });
  }, [res]);

  const msgSend = e => {
    if (e.charCode === 13) {
      e.preventDefault();
      if (!e.target.value) {
      } else {
        const day = new Date();
        const hour = day.getHours();
        const minutes = day.getMinutes();
        e.preventDefault();
        // 메세지 보내기
        socket.emit("send message", {
          message: msg,
          hour: hour,
          minutes: minutes
        });
        setMsg("");
      }
    }
  };
  const onChange = e => {
    setMsg(e.target.value);
  };
  const mapOfRes = item => {
    return item.map((ele, idx) => (
      <Other key={idx} status={status}>
        <Left status={status}>
          <Username>sadsadsadasd</Username>
          <Comment>{ele.message}</Comment>
        </Left>
        <Right status={status}>{`${ele.hour}:${ele.minutes}`}</Right>
      </Other>
    ));
  };

• http://blog.naver.com/PostView.nhn?blogId=bkcaller&logNo=221366361792
  참고 사이트