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);
아래와 같이 입력한대로 방 이름이 보여지면 성공입니다!
'개발 > Projects' 카테고리의 다른 글
[WebSocket/Socket IO] 채팅 서비스 구현 6. 채팅방 알림 전송하기 (0) | 2022.12.06 |
---|---|
[WebSocket/Socket IO] 채팅 서비스 구현 4. Socket IO 설치 및 연결하기 (0) | 2022.12.06 |
[WebSocket/Socket IO] 채팅 서비스 구현 3. 닉네임 설정하기 (0) | 2022.12.05 |