[WebSocket/Socket IO] 채팅 서비스 구현 6. 채팅방 알림 전송하기

이번에는 사용자가 동일한 채팅방에 접속했을 때 알림을 보내보도록 하겠습니다. 이전 포스팅에서 채팅방을 만들고 여기에 참여(join)하는 것까지 구현했었는데요. to 메소드를 사용하여 접속한 방에 새로운 메시지를 전송(emit) 할 수 있습니다.

 

현재 home.pug 구조는 아래와 같습니다.

// home.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    title Zoom
  body
    header
      h1 Chat Service
    main
      div#room
        form
          input(type="text", placeholder="Type a room name", required)
          button Enter the Room
      div#chat
        h2 Room Name
        ul
        form
          input(type="text", placeholder="Input your message", required)
          button Send
    script(src="/socket.io/socket.io.js") 
    script(src="/public/js/app.js")

server.js로 이동하여 아래와 같이 채팅방에 접속하면 "greeting" 이벤트를 트리거하도록 설정해줍니다.

// server.js

ioServer.on("connection", (socket) => {
  socket.onAny((event) => {
    console.log(`Socket Event: ${event}`);
  }); // 발생하고 있는 이벤트를 로그
  socket.on("room", (roomName, showRoom) => {
    socket.join(roomName); // 채팅 방에 소켓 연결하기
    showRoom();
    socket.to(roomName).emit("greeting"); // 참여한 room에 greeting 이벤트 전송
  });
});

httpServer.listen(8000);

다음으로 프론트에서 서버에서 전달된 "greeting" 이벤트를 받을 수 있도록 다음과 같이 socket.on("greeting", () => {} 작성합니다. 이는 sendMessage라는 함수를 트리거하도록 설정하고 해당 함수에 메시지를 표시하는 로직을 적어줍니다.

// app.js

// 새로운 사람이 들어오면 환영 메시지를 보내는 로직
function sendMessage(message) {
  const ul = chat.querySelector("ul");
  const li = document.createElement("li");

  li.innerText = message;
  ul.appendChild(li);
}

// greeting이라는 이벤트를 받게 되면 다음 함수를 실행하게 됨
socket.on("greeting", () => {
  sendMessage("Someone has joined!");
});

동일한 방식으로 퇴장 알림을 보낼 수도 있습니다. 참여한 방에서 떠나며 접속이 끊기는 경우, disconnecting을 사용하여 이벤트를 트리거할 수 있습니다.

// server.js

socket.on("disconnecting", () => {
  socket.rooms.forEach((room) => socket.to(room).emit("goodbye"));
});

// app.js

socket.on("goodbye", () => {
  sendMessage("Someone has left.");
});

아래와 같이 동일한 방에 접속하고 나갈 때 알림이 추가된다면 성공입니다!