[Node.js/React] socket.io로 실시간 채팅 구현하기

이영민·2025년 7월 28일

지난 4월에 참여했던 구름톤 KDT 최종 프로젝트에서, 구현 시간 부족으로 실시간 채팅 기능과 채팅에 좋아요를 누르는 기능을 끝내지 못한 것이 가장 아쉬웠다. 프로젝트 종료 이후 서버 유지 비용 문제로 서버를 내려야 했고, 자연스럽게 기능 보완도 이어가지 못한 채 마무리되었다.

그래서 그 아쉬움을 보완하고자, Node.js와 React를 활용해 실시간 채팅 기능을 직접 구현해보고, 당시 시간 제약으로 깊이 공부하지 못했던 실시간 통신 개념들도 더 체계적으로 이해해봤다.

실시간 채팅 및 좋아요 기능 구현 – 실전 복습

구름톤 KDT 최종 프로젝트(2024.04)에 참여했을 당시, 기획했던 기능 중 실시간 채팅과 채팅 메시지에 좋아요를 누르는 기능을 끝내지 못했다.
시간 부족과 서버 유지 비용 문제로 프로젝트 종료와 함께 서버를 내렸고, 이후 기능 보완도 이어지지 못했다.

그래서 이번에 React와 Node.js, 그리고 Socket.IO를 사용해서 당시 못 만든 기능들을 직접 구현해봤다.
아울러 실시간 통신의 기본 개념과 구조도 정리했다.

소켓 통신이란

HTTP 통신은 요청과 응답의 흐름이 명확한 단방향 구조다.
반면, WebSocket은 TCP 위에서 양방향 통신을 가능하게 하는 프로토콜이다.
연결이 성립되면 서버와 클라이언트는 서로 실시간으로 메시지를 주고받을 수 있다.

주로 채팅, 실시간 알림, 실시간 데이터 대시보드 등에서 사용된다.

Socket.IO

Socket.IO는 WebSocket 위에서 작동하는 실시간 통신 라이브러리다.
브라우저 호환성, 자동 재연결, 이벤트 기반 메시징, 룸 기능 등을 지원하며, 순수 WebSocket보다 개발 난이도가 낮다.

서버 (Node.js)

io.on("connection", (socket) => {
  socket.on("chat message", (msg) => {
    io.emit("chat message", msg); // 전체 전송
  });

  socket.on("like message", (msgId) => {
    io.emit("like updated", msgId); // 좋아요 반영
  });
});

클라이언트 (React)

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

  socket.on("like updated", (msgId) => {
    // msgId에 해당하는 메시지의 좋아요 수 갱신
  });
}, []);