간단한 채팅구현 Socket.io (Node js)

Socket.io를 이용해서 간단한 채팅을 구현했다. 

우선 기본적인 로직으로 잘 동작하는 채팅을 구현하고 다양한 방법으로 부하 테스트해보고 문제가 생기면 개선하면 좋을 것 같다. 

 

우선 Socket.io와 Websocket은 다르기 때문에 동일시하면 안된다.

 

Socket.io는 기본적으로 아래와 같이 동작한다. 

1. 우선 소켓서버와 연결이 먼저 맺어진다. 

2. 연결 주체간의 소통한다. 

3. 연결이 끊어지면 다시 연결한다.

 

2번에대해 부연을 해보겠다 socket함수는 보내는 형식, 받는 형식 쌍으로 이루어져 있다. 

보내는 형식은 emit이라는 함수다. 

socket.emit( "XX", data) 

 

받는 형식은 on이라는 함수이고 받은 데이터를 인자로 받는 콜백함수 실행이 가능하다.

socket.emit("XX", ( data ) => {.     }.) 

 

여기서 "XX" 는 내가 임의로 넣은 키워드이다. 여기 들어가는 string값이 일치하는 함수끼리 연결된다.

마치 API 형식에서 router주소가 동일한 곳으로 post혹은 get을 보냈을때 받는 것과 비슷한 느낌으로 이해하면 된다.

 

 

Server쪽 코드 

  socket.on("join_room", (data) => {
    socket.join(data);
    console.log(`User with ID: ${socket.id} joined room: ${data}`);
  });

  socket.on("send_message", (data) => {
    socket.to(data.room).emit("receive_message", data);
    console.log(data);
  });

  socket.on("disconnect", () => {
    console.log("User Disconnected", socket.id);
  });
});

 

Client 쪽 코드 

  const sendMessage = async () => {
    if (currentMessage !== "") {
      const messageData = {
        room: room,
        author: username,
        message: currentMessage,
        time:
          new Date(Date.now()).getHours() +
          ":" +
          new Date(Date.now()).getMinutes(),
      };

      await socket.emit("send_message", messageData);

      setMessageList((list) => [...list, messageData]);
      setCurrentMessage("");
    }
  };

  useEffect(() => {
    console.log("heyheyhey");
    socket.on("receive_message", (data) => {
      console.log(data);
      setMessageList((list) => [...list, data]);
    });
  }, [socket]);