[WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기

Socket IO 설정을 마쳤으니 이제 사용자들이 채팅을 나눌 수 있는 채팅방을 구현해보도록 하겠습니다. 구현 목표는 동일한 방에 접속한 사용자들끼리 대화를 나눌 수 있게 하는 것입니다.

 

가장 먼저 home.pug에서 방 이름과 채팅 메시지를 보낼 수 있는 form 태그를 구성해줍니다.

// 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
        form
          input(type="text", placeholder="Input your message", required)
          button Send
    script(src="/socket.io/socket.io.js") 
    script(src="/public/js/app.js")

다음으로 app.js로 이동하여 기본적인 UI 설정과 방 이름을 지정하고 전달할 수 있는 로직을 작성해줍니다. hidden 메소드를 사용하여 처음에 접속했을 때는 방 이름만 입력하는 창이 보이고 차례로 채팅창을 보여줄 수 있습니다.

 

또한 아래 코드에서 보듯 기존의 웹소켓에서는 send 메소드를 사용했던 것과 다르게 Socket IO에서는 emit 메소드를 사용합니다. emit을 사용하여 원하는 아규먼트를 제약없이 전송할 수 있으며, 함수 또한 전달할 수 있습니다. 이 때, 함수는 가장 마지막 아규먼트로 전달해야 합니다.

// app.js

const socket = io();

const room = document.querySelector("#room");
let roomName = room.querySelector("form");
const chat = document.querySelector("#chat");
const chatting = chat.querySelector("form");

chat.hidden = true; // 처음에 채팅 창 가려주기

const showRoom = (userRoomName) => {
  room.hidden = true; // 방 이름 입력창 가려주기
  chat.hidden = false; // 채팅창 보여주기

  const roomNameHeader = chat.querySelector("h2"); // 입장한 방 이름 보여주기
  roomNameHeader.innerText = `Room: ${roomName}`;
};

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

  const input = roomName.querySelector("input");
  roomName = input.value;

  socket.emit("room", { payload: input.value }, showRoom);
}

roomName.addEventListener("submit", handleRoomName);

마지막으로 서버를 설정해줍니다. 프론트쪽에서 "room" 이라는 이름으로 해당 정보를 보냈으니 on 메소드를 사용하여 동일한 이름으로 이를 받아줍니다.

 

onAny 메소드를 사용하면 발생하고 있는 소켓 이벤트를 기록해줄 수 있는데요. 향후 어떤 이벤트가 발동되었는지 확인하는 데 유익하므로 추가해주었습니다.

 

on 메소드를 통해 프론트로부터 방 정보를 받았다면, join 메소드를 사용하여 해당 방으로 입장할 수 있습니다.

//server.js

import http from "http";
import { Server } from "socket.io";
import express from "express";

const app = express();

app.set("view engine", "pug"); 
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public")); 

app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/")); 

const httpServer = http.createServer(app);
const ioServer = new Server(httpServer);
ioServer.on("connection", (socket) => {
  socket.onAny((event) => {
    console.log(`Socket Event: ${event}`);
  }); // 발생하고 있는 이벤트를 로그
  socket.on("room", (roomName, showRoom) => {
    socket.join(roomName); // 채팅 방에 소켓 연결하기
    showRoom(); // room을 통해 넘어온 프론트의 함수를 프론트에서 실행하도록 트리거
  });
});

httpServer.listen(8000);

아래와 같이 입력한대로 방 이름이 보여지면 성공입니다!