[WebSocket/Socket IO] 채팅 서비스 구현 2. 메시지 수신하기

지난 글에서는 웹소켓으로 채팅 서비스를 구현하기 위한 프로젝트 설정을 마쳤었는데요. 이번에는 웹소켓을 사용하여 메시지를 수신해보도록 하겠습니다. 먼저, 웹소켓 패키지를 설치해줍니다.

npm i ws

웹소켓 서버 설정하기

패키지를 설치했다면 이제 server.js에서 웹소켓을 사용할 수 있도록 서버를 설정해줍니다.

// server.js

import http from "http";
import WebSocket from "ws";
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("/", (req, res) => res.render("home"));

const server = http.createServer(app); // http 요청을 처리
const webSocketServer = new WebSocket.Server({ server }); // WebSocket 요청을 처리

const handleConnection = (socket) => {
  console.log(socket);
};

webSocketServer.on("connection", handleConnection); // WebSocket Event

server.listen(8000);

다음으로 app.js에서 프론트엔드와 백엔드의 웹소켓을 연결해줍니다.

// app.js

const socket = new WebSocket(`ws://${window.location.host}`)

웹소켓 통신하기

테스트 메시지를 보내보도록 하겠습니다. 먼저 server.js에서 웹소켓에서 제공하는 on 메소드를 사용하여 다음과 같이 통신을 준비할 수 있습니다.

// server.js

import http from "http";
import WebSocket from "ws";
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("/", (req, res) => res.render("home"));

const server = http.createServer(app);
const webSocketServer = new WebSocket.Server({ server });

webSocketServer.on("connection", (socket) => {
  socket.on("open", () => console.log("Conneted to the Browser!")); // 웹소켓 연결 알림
  socket.on("message", (message) => console.log(message.toString("utf8"))); // 프론트에서 메시지 받기
  socket.on("close", () => console.log("Disconnectd from the Browser")); // 웹소켓 연결 끊김 알림
  socket.send("Hello! This is Backend!");
}); 

server.listen(8000);

이제 프론트의 app.js로 돌아가 웹소켓에서 제공하는 open, message, close 메소드를 사용하여 다음과 같이 코드를 작성합니다.

// app.js

const socket = new WebSocket(`ws://${window.location.host}`);

// socket 메소드를 활용한 이벤트 등록(open, message, close)
socket.addEventListener("open", () => {
  console.log("Connected to Server.");
});

socket.addEventListener("message", (message) => {
  console.log("New Message:", message.data);
});

socket.addEventListener("close", () => {
  console.log("Disconnted from the server.");
});

// 백엔드로 10초후에 메시지 보내기
setTimeout(() => {
  socket.send("Hello, I am browswer");
}, 10000);

콘솔 창을 열어보면 브라우저와 서버 모두에 웹소켓 연결 및 연결 해제에 관련한 로그가 찍히는 것을 확인할 수 있습니다.

메시지 주고 받기

이제 채팅 메시지를 주고 받아보겠습니다. 먼저, 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
      ul
      form
        input(type="text", placeholder="Please write a message", required)
        button Send
    script(src="/public/js/app.js")

다음으로 app.js에서 form과 button를 선택하고 이벤트 리스너 등록해줍니다. 다음으로 WebSocket의 send 메소드를 사용하여 입력값을 받아줍니다.

// app.js

const socket = new WebSocket(`ws://${window.location.host}`);

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");

socket.addEventListener("open", () => {
  console.log("Connected to Server.");
});

socket.addEventListener("message", (message) => {
  console.log("New Message:", message.data);
});

socket.addEventListener("close", () => {
  console.log("Disconnected from the server.");
});

function handleSubmit(event) {
  event.preventDefault(); // submit 태그를 통해 제출하면 기본적으로 창이 새로고침 되는 것을 방지

  const input = messageForm.querySelector("input");
  socket.send(input.value);
  input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);

프론트 설정을 마쳤으니 이제 server.js에서 메시지를 받아보겠습니다. sockets 배열을 하나 만들어 주고 각 소켓을 push한 다음 forEach 메소드를 사용하여 각 socket에 이를 담아 전달해줍니다.

// server.js

import http from "http";
import WebSocket from "ws";
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 server = http.createServer(app); 
const webSocketServer = new WebSocket.Server({ server });

const sockets = []; // sockets 배열 생성

webSocketServer.on("connection", (socket) => {
  sockets.push(socket); // 각 socket을 배열에 추가해주기
  console.log("Connected to Browser.");
  socket.on("open", () => console.log("Connected to the Browser"));
  socket.on("message", (message) => {
    sockets.forEach((eachSocket) => eachSocket.send(message.toString()));
  }); // 각 소켓으로부터 수신한 메시지를 에코잉해주기
  socket.on("close", () => console.log("Disconnectd from the Browser"));
});

server.listen(8000);

콘솔이 잘 찍히는 게 확인됐다면 마지막으로 전송한 메시지를 리스트로 추가해보겠습니다.

// app.js

const socket = new WebSocket(`ws://${window.location.host}`);

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");

socket.addEventListener("open", () => {
  console.log("Connected to Server.");
});

// 전송 메시지 리스트로 추가하기
socket.addEventListener("message", (message) => {
  const li = document.createElement("li");
  li.innerText = message.data;
  messageList.append(li);
});

socket.addEventListener("close", () => {
  console.log("Disconnected from the server.");
});

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

  const input = messageForm.querySelector("input");
  socket.send(input.value);
  input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);

아래와 같이 전송한 메시지가 잘 추가된다면 성공입니다!