Socket.IO 사용하기

이전 절의 ws 패키지는 간단하게 웹 소켓을 사용하고자 할 때 좋습니다. 하지만 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편합니다. Socket.IO가 할 수 있는 일을 ws 패키지가 못한다는 뜻은 아닙니다. Socket.IO에 편의 기능이 많이 추가되어 있다는 뜻입니다.

먼저 Socket.IO를 설치합니다.

$ npm i socket.io@2

그리고 ws 패키지 대신 Socket.IO를 연결합니다.

socket.js

const SocketIO = require("socket.io");

module.exports = (server) => {
  const io = SocketIO(server, { path: "/socket.io" });

  io.on("connection", (socket) => {
    // 웹 소켓 연결 시
    const req = socket.request;
    const ip = req.headers["x-forwarded-for"] || req.connection.remoteAddress;
    console.log("새로운 클라이언트 접속!", ip, socket.id, req.ip);
    socket.on("disconnect", () => {
      // 연결 종료 시
      console.log("클라이언트 접속 해제", ip, socket.id);
      clearInterval(socket.interval);
    });
    socket.on("error", (error) => {
      // 에러 시
      console.error(error);
    });
    socket.on("reply", (data) => {
      // 클라이언트로부터 메시지 수신 시
      console.log(data);
    });
    socket.interval = setInterval(() => {
      // 3초마다 클라이언트로 메시지 전송
      socket.emit("news", "Hello Socket.IO");
    }, 3000);
  });
};

아직까지는 ws 패키지와 크게 다른 점이 없습니다. 먼저 socket.io 패키지를 불러와서 익스프레스 서버와 연결합니다. Socket.IO 객체의 두 번째 인수로 옵션 객체를 넣어 서버에 관한 여러 가지 설정을 할 수 있습니다. 여기서는 클라이언트가 접속할 경로인 path 옵션만 사용했습니다. 클라이언트에서도 이 경로와 일치하는 path를 넣어야 합니다.

연결 후에는 이벤트 리스너를 붙입니다. connection 이벤트는 클라이언트가 접속했을 때 발생하고, 콜백으로 소켓 객체(socket)를 제공합니다. io와 socket 객체가 Socket.IO의 핵심입니다. socket.request 속성으로 요청 객체에 접근할 수 있습니다. socket.request.res로는 응답 객체에 접근할 수 있습니다. 또한, socket.id로 소켓 고유의 아이디를 가져올 수 있습니다. 이 아이디로 소켓의 주인이 누구인지 특정할 수 있습니다.

socket에도 이벤트 리스너를 붙였습니다. disconnect는 클라이언트가 연결을 끊었을 때 발생하고, error는 통신 과정에서 에러가 나왔을 때 발생합니다. reply는 사용자가 직접 만든 이벤트입니다. 클라이언트에서 reply라는 이벤트명으로 데이터를 보낼 때 서버에서 받는 부분입니다. 이렇게 이벤트명을 사용하는 것이 ws 모듈과는 다릅니다.

아래에 emit 메서드로 3초마다 클라이언트 한 명에게 메시지를 보내는 부분이 있는데, 인수가 두 개입니다. 첫 번째 인수는 이벤트 이름, 두 번째 인수는 데이터입니다. 즉, news라는 이벤트 이름으로 Hello Socket.IO라는 데이터를 클라이언트에 보낸 것입니다. 클라이언트가 이 메시지를 받기 위해서는 news 이벤트 리스너를 만들어두어야 합니다.

클라이언트 부분도 바꿔줍시다.

views/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>GIF 채팅방</title>
  </head>
  <body>
    <div>F12를 눌러 console 탭과 netwrork 탭을 확인하세요.</div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io.connect("http://localhost:8005", {
        path: "/socket.io",
      });
      socket.on("news", function (data) {
        console.log(data);
        socket.emit("reply", "Hello Node.JS");
      });
    </script>
  </body>
</html>

/socket.io/socket.io.js는 Socket.IO에서 클라이언트로 제공하는 스크립트이며, 실제 파일이 아닙니다. 이 스크립트를 통해 서버와 유사한 API로 웹 소켓 통신이 가능합니다. 스크립트가 제공하는 io 객체에 서버 주소를 적어 연결합니다. ws 프로토콜이 아니라 http 프로토콜을 사용한다는 점이 ws 모듈과 다릅니다. 그 이유는 나중에 나옵니다. 옵션으로 path를 주었는데, 이 부분이 서버의 path 옵션과 일치해야 통신이 가능합니다.

서버에서 보내는 news 이벤트를 받기 위해 news 이벤트 리스너를 붙여주었습니다. news 이벤트가 발생하면 emit 메서드로 다시 서버에 답장을 합니다. 서버의 reply 이벤트 리스너로 답장이 갑니다.

서버를 실행하고 http://localhost:8005에 접속해봅시다. 개발자 도구(F12)의 Network 탭을 보면 조금 독특한 것을 발견할 수 있습니다. 웹 소켓 연결 말고도 폴링 연결(xhr)이 있습니다.

Socket.IO는 먼저 폴링 방식으로 서버와 연결합니다. 그래서 코드에서 HTTP 프로토콜을 사용한 것입니다. 폴링 연결 후, 웹 소켓을 사용할 수 있다면 웹 소켓으로 업그레이드합니다. 웹 소켓을 지원하지 않는 브라우저는 폴링 방식으로, 웹 소켓을 지원하는 브라우저는 웹 소켓 방식으로 사용 가능한 것입니다.

처음부터 웹 소켓만 사용하고 싶다면, 클라이언트에서 다음과 같이 옵션을 주면 됩니다.

index.html

'프로그래밍 언어 > NODE JS' 카테고리의 다른 글

실시간 GIF 채팅방 만들기(2) (0)	2026.01.23
실시간 GIF 채팅방 만들기(1) (0)	2026.01.20
ws 모듈로 웹 소켓 사용하기 (0)	2026.01.14
ws 모듈로 웹 소켓 사용하기 (0)	2026.01.11
웹 소캣 이해하기 (0)	2026.01.08

'프로그래밍 언어 > NODE JS' 카테고리의 다른 글

'프로그래밍 언어/NODE JS' 관련 글

티스토리툴바