express로 socket 사용 방법

Node.js 환경인 Express는 기본적으로 HTTP 프로토콜을 다루는 프레임워크입니다. 하지만 일반적인 HTTP는 클라이언트가 요청을 보내야만 서버가 응답하는 단방향 구조죠.

앞서 설명한 실시간 양방향 소켓 통신을 Express에서 구현하려면 가장 대중적인 라이브러리인 Socket.io를 사용합니다.

---

1. Express와 Socket.io의 관계

Express는 웹 서버를 구축하고 라우팅을 담당하며, Socket.io는 그 서버 위에서 실시간 통신용 소켓 연결을 관리합니다.

---

2. 사용 방법 (Step-by-Step)

① 설치

먼저 필요한 패키지를 설치합니다.

npm install express socket.io

② 서버 코드 작성 (server.js)

Express 서버에 Socket.io를 결합하는 표준적인 방법입니다.

const express = require('express');
const http = require('http'); // Node.js 기본 http 모듈
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app); // Express를 http 서버에 입힘
const io = new Server(server); // http 서버를 socket.io 서버로 업그레이드

// 클라이언트가 접속했을 때 실행
io.on('connection', (socket) => {
    console.log('유저가 연결되었습니다: ' + socket.id);

    // 클라이언트로부터 'chat message'라는 이름의 패킷을 받았을 때
    socket.on('chat message', (msg) => {
        console.log('받은 메시지: ' + msg);
        // 모든 접속자에게 메시지를 전달 (브로드캐스팅)
        io.emit('chat message', msg);
    });

    // 연결이 끊겼을 때
    socket.on('disconnect', () => {
        console.log('유저 연결 종료');
    });
});

server.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});

③ 클라이언트 코드 작성

HTML 파일 내에서 서버의 소켓과 연결합니다.

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io(); // 서버 소켓에 연결 시도

  // 서버로 메시지 보내기
  function sendMessage() {
    socket.emit('chat message', '안녕하세요!');
  }

  // 서버에서 보낸 메시지 받기
  socket.on('chat message', (msg) => {
    console.log('서버로부터 받은 메시지:', msg);
  });
</script>

---

3. 핵심 동작 원리

1. Handshake: 클라이언트가 HTTP 요청을 보내 서버에게 "우리 소켓(WebSocket)으로 대화 방식을 바꿀까?"라고 제안합니다.
2. Upgrade: 서버가 승인하면 HTTP 연결이 WebSocket 소켓 연결로 업그레이드됩니다.
3. Event-based: 이후부터는 emit(보내기)과 on(듣기)이라는 이벤트 방식으로 데이터를 실시간으로 주고받습니다. 이때 데이터는 내부적으로 패킷 단위로 쪼개져 전송됩니다.

---

왜 Express 기본 기능만 안 쓰나요?

Express의 res.send()나 res.json()은 응답을 한 번 보내면 연결을 바로 끊어버립니다. 하지만 Socket.io를 쓰면 연결(Socket)을 계속 유지하므로, 서버가 원할 때 언제든 클라이언트에게 데이터를 먼저 밀어줄 수 있기 때문입니다.