[WebSocket/Socket IO] 채팅 서비스 구현 7. 메시지 전송 및 수신

채팅 서비스에서는 동일한 방에 참가한 사람들끼리 메시지를 주고 받을 수 있어야 합니다. 이를 어떻게 구현할 수 있을까요?

 

먼저, 사용자 입장에서 서비스 로직을 생각해보겠습니다. 채팅 서비스에 입장한 사용자는 가장 먼저 참여할 방을 선택(또는 입력)하고, 다음으로 해당 방에 참가한 다른 사람들과 메시지를 주고 받게 됩니다.

 

현재 채팅 방까지는 구현을 했죠. 이제 방에 입장한 다음 메시지를 전송하는 로직을 구현하면 됩니다. 기존의 참가 방을 보여주는 shorRoom() 함수 아래에 메시지 전송을 처리할 handleSendMessage 핸들러를 버튼에 달아줍니다.

// app.js

const showRoom = (userRoomName) => {
  room.hidden = true;
  chat.hidden = false;

  const roomNameHeader = chat.querySelector("h2");
  roomNameHeader.innerText = `Room: ${roomName}`;

  chatting.addEventListener("submit", handleSendMessage);
};

그리고 메시지를 처리할 함수를 구현합니다. 아래의 함수는 사용자가 입력한 메시지를 받아 서버로 전달해주는 역할을 합니다.

function handleSendMessage(event) {
  event.preventDefault();

  const message = chatting.querySelector("input");
  socket.emit("message", message.value, sendMessage);
  message.value = "";
}

// 메시지 추가하기
socket.on("sendMessage", addMessage);

이제 백엔드에서 넘어오는 메시지를 처리해줄 차례입니다. 방에 입장한 다음 해당 방 roomName으로 to 메소드를 사용하여 "sendMessage" 사용자 메소드와 함께 message 그리고 프론트의 handleSendMessage로 부터 전달받은 sendMessage 함수에 아규먼트로 message를 담아 다시 전달해주겠습니다.

// server.js

ioServer.on("connection", (socket) => {
  socket.on("room", (roomName, showRoom) => {
    socket.join(roomName);
    showRoom();
    // 메시지 수신하고 전송하기
    socket.on("message", (message, sendMessage) => {
      message = `${socket.id}: ${message}`;
      socket
        .to(roomName)
        .emit("sendMessage", message, sendMessage(message));
    });
  });
});

httpServer.listen(8000);

마지막으로 다시 프론트에서 해당 사용자 메소드를 받을 수 있도록 아래와 같이 코드를 추가해줍니다.

// app.js

// 메시지 받아서 전송하기
socket.on("sendMessage", sendMessage);

아래와 같이 접속과 함께 알림이 나오고 실시간 채팅이 가능하다면 성공입니다!

 

메시지 옆에 추가된 긴 문자열은 socket.id에서 출력되고 있는 것인데요. 다음에는 이를 사용자가 지정한 닉네임으로 변경해보도록 하겠습니다!