ServBay로 Socket.io 프로젝트 생성 및 실행하기

Socket.io는 자바스크립트 기반의 인기 있는 라이브러리로, 실시간·양방향·이벤트 기반 웹 애플리케이션 구축을 위해 설계되었습니다. WebSocket 프로토콜을 기반으로 하며, 필요시 롱 폴링 등으로 자동 대체를 지원하여 다양한 클라이언트와 네트워크 환경에서도 안정적으로 실시간 통신이 가능합니다.

本 가이드에서는 ServBay가 제공하는 강력한 로컬 개발 환경을 활용해 Socket.io 프로젝트를 구축, 실행, 관리하는 전체 절차를 상세히 설명합니다. ServBay는 사전 설정된 Node.js 환경와 손쉬운 사이트(구: 호스트) 관리기능을 제공하여 Socket.io 개발을 한층 효율적으로 만들어줍니다.

Socket.io란 무엇인가요?

Socket.io는 실시간·양방향·이벤트 기반 통신을 구현한 라이브러리입니다. 주로 두 부분으로 구성됩니다:

Node.js 서버에서 실행되는 백엔드 라이브러리.
브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리.

Socket.io의 주요 목적은 WebSocket 기반 통신이지만, WebSocket을 지원하지 않는 구형 브라우저나 제한적인 네트워크 환경에서는 자동으로 다른 전송 방식(예: Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling 등)으로 대체하여 호환성을 높입니다.

Socket.io의 주요 특징 및 장점

실시간 통신: 서버와 클라이언트 간 실시간 데이터 교환을 지원하여 채팅, 협업 툴, 실시간 대시보드, 온라인 게임 등에 적합합니다.
다중 플랫폼 지원: 웹 브라우저, 모바일 앱, Node.js 서버 환경 등 다양한 플랫폼에서 사용 가능합니다.
자동 재연결: 네트워크 연결이 끊어져도 자동으로 다시 접속을 시도하여 애플리케이션의 안정성을 높입니다.
이벤트 기반: 이벤트 중심 프로그래밍 모델로 비동기통신 처리를 직관적으로 구성할 수 있습니다.
룸(Room) 및 네임스페이스: 클라이언트를 그룹화하여 특정 그룹에 메시지를 브로드캐스트하거나, 네임스페이스를 통해 리소스를 효율적으로 다중화할 수 있습니다.
이진 데이터 지원: 바이너리 데이터의 송수신도 쉽게 처리할 수 있습니다.
높은 호환성: 다양한 전송 방식 지원으로 폭넓은 네트워크 환경에서 신뢰성이 보장됩니다.

Socket.io를 통해, 개발자는 복잡한 실시간 통신의 내부 구현에 신경쓰지 않고도 애플리케이션 로직에 집중할 수 있습니다.

ServBay로 Socket.io 프로젝트 생성 및 실행하기

ServBay는 Node.js 개발자를 위한 즉시 사용 가능한 로컬 환경을 제공합니다. Node.js 런타임, npm 패키지 관리자 그리고 직관적인 사이트 관리 툴을 통해 Socket.io 예제 프로젝트를 쉽게 셋팅하고 실행할 수 있습니다.

사전 준비 사항

시작하기 전에 아래의 준비가 필요합니다:

ServBay 설치: ServBay 공식 웹사이트에서 최신 버전의 ServBay를 다운로드 후 설치하세요.
ServBay에서 Node.js 패키지 설치: ServBay에서 Node.js 패키지를 설치해야 합니다. ServBay 컨트롤 패널의 “패키지”(구: 서비스) 항목에서 관리할 수 있습니다. 자세한 방법은 ServBay에서 Node.js 사용하기 문서를 참고하세요.

Socket.io 예제 프로젝트 만들기

여기서는 간단한 채팅 애플리케이션 예제를 만들어보겠습니다.

프로젝트 디렉토리 초기화:
먼저, 터미널 앱을 실행하세요. ServBay는 웹사이트 프로젝트를 /Applications/ServBay/www 경로에 보관할 것을 권장합니다. 해당 디렉토리로 이동한 뒤 새 프로젝트 폴더를 생성, Node.js 프로젝트 초기화와 필수 패키지 설치를 진행하세요:
bash
```
cd /Applications/ServBay/www
mkdir servbay-socketio-chat
cd servbay-socketio-chat
npm init -y
npm install express socket.io
```
1
2
3
4
5
이 과정은 servbay-socketio-chat 폴더 내에 package.json 파일을 생성하고, express(정적 파일 제공 및 HTTP 요청 처리용)와 socket.io(서버 및 클라이언트 라이브러리)의 주요 의존성을 설치합니다.

서버 파일 생성(server.js):

servbay-socketio-chat 프로젝트 루트에 server.js 파일을 만들고 아래의 코드를 붙여넣으세요. 이 파일은 HTTP 서버를 띄우고, Socket.io 모듈과 통합하여 클라이언트 연결 및 메시지 브로드캐스트를 담당합니다.

javascript

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const path = require('path'); // path 모듈 불러오기

const app = express();
// express 앱을 기반으로 HTTP 서버 생성
const server = http.createServer(app);
// Socket.io를 HTTP 서버에 부착
const io = socketIo(server);

// 정적 파일 디렉토리 지정, 현재 폴더로 설정
app.use(express.static(__dirname));

// 루트 경로에 대한 GET 요청을 처리, index.html 파일 전송
app.get('/', (req, res) => {
  // path.join을 사용하여 OS 상관없이 정상 경로 생성
  res.sendFile(path.join(__dirname, 'index.html'));
});

// Socket.io 연결 이벤트 감지
io.on('connection', (socket) => {
  console.log('a user connected'); // 새 사용자가 연결될 때 로그 출력

  // 연결 해제 이벤트 감지
  socket.on('disconnect', () => {
    console.log('user disconnected'); // 사용자가 연결 해제 시 로그 출력
  });

  // 'chat message' 이벤트 감지
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg); // 수신된 메시지 로그 출력
    // 받은 메시지를 모든 연결된 클라이언트에 브로드캐스트
    io.emit('chat message', msg);
  });
});

// 환경변수 혹은 기본값을 사용하여 포트 가져오기
const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
  console.log(`Access it via http://localhost:${port} (direct) or via ServBay reverse proxy`);
});

코드 설명:

express로 간단한 웹 서버를 만들어 index.html 파일을 제공합니다.
http.createServer(app)로 표준 HTTP 서버를 생성하고, 이는 Socket.io가 부착되는 기반이 됩니다.
socketIo(server)로 Socket.io를 초기화하고 HTTP 서버에 연결합니다.
io.on('connection', ...)로 새로운 클라이언트 접속을 감지합니다.
socket.on('disconnect', ...)로 클라이언트 연결 해제를 감지합니다.
socket.on('chat message', ...)로 클라이언트가 보낸 'chat message' 이벤트와 메시지 데이터를 수신합니다.
io.emit('chat message', msg)로 받은 메시지를 모든 연결된 클라이언트로 브로드캐스트합니다.

클라이언트 파일 생성(index.html):

servbay-socketio-chat 프로젝트 루트에 index.html 파일을 만들고 아래의 코드를 붙여넣으세요. 이 파일은 클라이언트 측 HTML 구조, 스타일, 그리고 Socket.io 클라이언트 JS 코드를 포함합니다—서버에 연결, 메시지 송신, 수신된 메시지 표시 기능이 구현되어 있습니다.

html

<!DOCTYPE html>
<html>
<head>
  <title>ServBay Socket.io Chat</title>
  <style>
    body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
    #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
    #input:focus { outline: none; }
    #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages > li { padding: 0.5rem 1rem; }
    #messages > li:nth-child(odd) { background: #efefef; }
    .servbay-banner {
      background-color: #007bff; /* ServBay 파란색 */
      color: white;
      text-align: center;
      padding: 15px 0;
      font-size: 22px;
      margin-bottom: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="servbay-banner">ServBay Socket.io 채팅 데모에 오신 걸 환영합니다!</div>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button type="submit">보내기</button>
  </form>

  <!-- Socket.io 클라이언트 라이브러리 불러오기 -->
  <!-- 이 파일은 Socket.io 서버가 동적으로 생성, 제공함 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // Socket.io 서버에 연결
    // 클라이언트와 서버가 동일한 도메인 및 포트에서 동작할 경우 io()는 자동 연결함
    var socket = io();

    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var messages = document.getElementById('messages'); // messages 엘리먼트 가져오기

    form.addEventListener('submit', function(e) {
      e.preventDefault(); // 폼의 기본 전송 동작 막기
      if (input.value) {
        // 'chat message' 이벤트와 메시지 내용을 서버로 전송
        socket.emit('chat message', input.value);
        input.value = ''; // 입력창 비우기
      }
    });

    // 서버에서 보내는 'chat message' 이벤트 수신
    socket.on('chat message', function(msg) {
      // 새로운 리스트 항목 생성해 메시지 출력
      var item = document.createElement('li');
      item.textContent = msg; // textContent 사용으로 XSS 공격 방지
      messages.appendChild(item); // 메시지를 리스트에 추가
      // 최신 메시지로 스크롤 이동
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

코드 설명:

HTML 구조, CSS(ServBay 테마 배너 포함), 메시지 리스트(ul#messages), 메시지 입력 및 전송 폼(form#form)이 포함되어 있습니다.
<script src="/socket.io/socket.io.js"></script>로 Socket.io 클라이언트 라이브러리를 불러옵니다. 이 파일은 서버가 /socket.io/socket.io.js 경로에서 자동 서비스합니다.
io()로 Socket.io 서버와 연결을 초기화합니다.
폼 전송 이벤트를 감지하여 기본 동작을 막고, socket.emit('chat message', input.value)로 메시지를 서버로 전송합니다.
서버로부터 온 'chat message' 이벤트를 감지해 메시지를 목록에 출력합니다.

여기까지가 Socket.io 예제 프로젝트의 주요 코드 작성을 완료한 상태입니다. 이제 ServBay를 이용해 실행과 접근을 해보겠습니다.

ServBay를 통한 프로젝트 실행 (개발 모드)

개발 단계에서는 Node.js 서버를 직접 실행하고, ServBay의 리버스 프록시 기능을 사용해 로컬 도메인에 매핑합니다.

Node.js 개발 서버 실행:
터미널에서 프로젝트 경로 /Applications/ServBay/www/servbay-socketio-chat로 이동 후 아래 명령어를 실행하세요. 여기서는 포트를 8585로 지정하지만 필요에 따라 변경 가능합니다.
bash
```
cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8585 node server.js
```
1
2
서버가 시작되면 터미널에 Server running on port 8585와 비슷한 메시지가 출력되어 현재 로컬 8585번 포트를 듣고 있다는 것을 알게 됩니다.
ServBay에서 사이트(리버스 프록시) 설정:
보다 편리하게 로컬 도메인으로 접근하고 ServBay의 HTTPS/SSL도 활용하려면, ServBay에 리버스 프록시 사이트를 생성해야 합니다.
- ServBay 컨트롤 패널을 엽니다.
- "사이트"(구: 호스트) 탭으로 이동합니다.
- 새 사이트 추가 버튼을 클릭합니다.
- 설정 예시:
  - 이름(Name): ServBay Socket.io Dev (또는 구분하기 쉬운 임의의 이름)
  - 도메인(Domains): servbay-socketio-dev.servbay.demo (혹은 본인이 원하는 .servbay.demo 도메인)
  - 사이트 유형(Type): 리버스 프록시(Reverse Proxy) 선택
  - 프록시 대상(Proxy Destination): http://127.0.0.1:8585 입력 (방금 실행한 Node.js 서버 주소 및 포트)
- 저장 후, ServBay가 자동으로 설정을 적용하고 필요 시 웹서버(Caddy 또는 Nginx 등)를 재시작할 수 있습니다.
참고: 리버스 프록시는 Socket.io에 필수입니다. 표준 HTTP 요청은 물론 WebSocket 프로토콜 업그레이드도 함께 처리하기 때문입니다. ServBay 내장 Caddy/Nginx의 설정은 이미 WebSocket 프록시 지원을 포함하고 있습니다.
ServBay에서 사이트 추가의 상세 과정은 Node.js 개발 사이트 추가하기 문서를 참고하세요. SSL 설정은 SSL/TLS로 사이트 보호하기를 참고하세요. ServBay User CA 또는 ServBay Public CA를 사용해 로컬 SSL 인증서를 생성·신뢰할 수 있습니다.
개발 사이트 접속하기:
브라우저에서 https://servbay-socketio-dev.servbay.demo 로컬 도메인에 접속하세요. 채팅 UI가 나타나고, 여러 탭이나 기기에서 해당 주소를 열어 실시간 채팅도 시험해볼 수 있습니다.

ServBay로 프로젝트 배포하기 (운영 모드)

서비스 환경에서는 Node.js 앱을 PM2, forever 등 프로세스 매니저로 안정적으로 운영하며 ServBay와 연동할 수 있습니다. 여기서는 ServBay 리버스 프록시의 세팅만 안내하며, Node.js 앱이 백그라운드에서 원하는 포트로 정상적으로 동작하고 있다고 가정합니다.

Node.js 운영 서버 실행:
프로덕션 환경에서는 PM2 같은 프로세스 관리자를 사용해 앱이 자동 재시작/백그라운드에서 구동되도록 운영합니다. 예시:
bash
```
# PM2가 설치되지 않았다면
# npm install pm2 -g

cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod
```
1
2
3
4
5
위 명령은 PM2로 server.js를 8586번 포트, NODE_ENV를 production으로 실행합니다. 프로세스 매니저가 앱을 백그라운드에 띄워주고 장애 발생 시 자동으로 복구합니다.
ServBay에서 운영용 리버스 프록시 사이트 추가:
개발 모드와 마찬가지로, ServBay에서 새로운 리버스 프록시 사이트를 추가해 운영 환경의 Node.js 포트에 연결합니다.
- ServBay 컨트롤 패널을 엽니다.
- “사이트” 탭으로 이동합니다.
- 새 사이트 추가 버튼 클릭.
- 설정 예시:
  - 이름(Name): ServBay Socket.io Prod (또는 다른 구분명)
  - 도메인(Domains): servbay-socketio-prod.servbay.demo (또는 원하는 .servbay.demo 도메인)
  - 사이트 유형(Type): 리버스 프록시(Reverse Proxy) 선택
  - 프록시 대상(Proxy Destination): http://127.0.0.1:8586 (운영 서버의 포트)
- 저장하여 설정을 적용합니다.
운영 사이트 접속하기:
브라우저에서 https://servbay-socketio-prod.servbay.demo로 운영 환경 사이트에 접속해봅니다.

ServBay의 리버스 프록시 기능을 이용하면 여러 Node.js 앱(개발·운영 모두)을 로컬 도메인 및 SSL 인증서에 손쉽게 연결하여 시스템 hosts 파일 수정, 복잡한 웹서버 설정 없이도 쉽게 통합 관리할 수 있습니다.

ServBay에서 제공하는 데이터베이스 연결하기

ServBay는 MySQL, MariaDB, PostgreSQL, MongoDB, Redis 등 다양한 데이터베이스 패키지를 지원합니다. Socket.io 앱에서 사용자 정보, 메시지 내역 등의 저장이 필요하다면, 아래 예시 코드를 참고하여 데이터베이스와 연동할 수 있습니다.

중요: 데이터베이스를 사용하기 전, ServBay 컨트롤 패널에서 해당 DB 패키지를 설치 및 실행했는지 확인하세요. 기본 DB 접속 정보(포트, 아이디, 비밀번호 등)는 ServBay DB 관리 화면이나 해당 문서에서 확인할 수 있습니다. 예를 들어 MySQL/MariaDB의 root 비밀번호는 ServBay 설치 시 지정되며, ServBay의 비밀번호 재설정 기능으로 관리할 수 있습니다.

MongoDB 연결:

Mongoose ODM (혹은 공식 mongodb 드라이버 설치)

bash

npm install mongoose

Node.js 코드(server.js 등)에 연결 로직 추가:

javascript

const mongoose = require('mongoose');

// 로컬에서 실행 중인 MongoDB 인스턴스(기본 포트: 27017)에 연결
// 예시 DB이름: servbay_socketio_app
mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  // 인증이 필요하다면 user, pass 옵션 추가
  // user: 'your_mongo_user',
  // pass: 'your_mongo_password'
})
.then(() => console.log('MongoDB에 Mongoose로 성공적으로 연결됨'))
.catch(err => console.error('MongoDB 연결 오류:', err));

// 이후 mongoose.model()로 스키마 및 모델 정의 가능
// ...

Redis 연결:

redis 클라이언트 설치:

bash

npm install redis

Node.js 코드에 연결 로직 추가:

javascript

const redis = require('redis');

// Redis 클라이언트 인스턴스 생성, 기본 포트는 6379
const client = redis.createClient({
  // Redis 인증 필요시
  // password: 'your_redis_password',
  // url: 'redis://localhost:6379' // URL 형식도 사용 가능
});

client.on('error', (err) => {
  console.error('Redis 연결 오류:', err);
});

client.on('connect', () => {
  console.log('Redis 클라이언트가 성공적으로 연결됨');
});

// Redis 서버에 연결(v4+는 connect() 필요)
client.connect();

// client 객체로 Redis 명령어 실행 가능
// 예: await client.set('mykey', 'myvalue');
// ...

MariaDB / MySQL 연결:

ServBay는 MariaDB, MySQL 모두 지원하며 연결 방법은 동일합니다. 여기서는 mariadb 라이브러리 사용(양쪽 모두 호환).

mariadb 클라이언트 설치:

bash

npm install mariadb

Node.js 코드에 연결 로직 추가:

javascript

const mariadb = require('mariadb');

// 커넥션 풀 생성
const pool = mariadb.createPool({
  host: 'localhost',
  port: 3306, // MariaDB/MySQL 기본 포트
  user: 'root', // ServBay 기본 계정은 root
  password: 'password', // ServBay에서 지정한 root 비밀번호 사용
  database: 'servbay_socketio_app', // 예시 DB명
  connectionLimit: 5 // 풀 크기
});

// 연결 받아와서 테스트
pool.getConnection()
  .then(conn => {
    console.log("MariaDB/MySQL에 성공적으로 연결됨");
    conn.release(); // 커넥션 풀에 반환
    // pool 객체로 쿼리 실행 가능
    // 예: await pool.query("SELECT 1");
    // ...
  })
  .catch(err => {
    console.error("MariaDB/MySQL 연결 오류:", err);
  });

참고: password 항목에는 ServBay에서 해당 DB의 root 비밀번호를 반드시 실제 값으로 대체하세요. 권장 안전을 위해 root 대신 앱 전용 별도 DB계정을 만들어 쓰는 것이 좋습니다.

PostgreSQL 연결:

pg 클라이언트 설치:

bash

npm install pg

Node.js 코드에 연결 로직 추가:

javascript

const { Pool } = require('pg');

// 커넥션 풀 생성
const pool = new Pool({
  user: 'user', // PostgreSQL 기본 유저명
  host: 'localhost',
  database: 'servbay_socketio_app', // 예시 DB명
  password: 'password', // ServBay에서 지정한 PostgreSQL 비밀번호
  port: 5432, // 기본 포트
});

// 연결 받아와서 테스트
pool.connect((err, client, done) => {
  if (err) {
    console.error('PostgreSQL 연결 오류:', err);
    return;
  }
  console.log('PostgreSQL에 성공적으로 연결됨');
  client.release(); // 풀에 반환
  // pool 객체로 쿼리 실행 가능
  // 예: pool.query('SELECT NOW()', (err, res) => { ... });
  // ...
});

참고: user, password는 ServBay에서 해당 DB용으로 설정한 실제 값을 입력해야 합니다.

이처럼 다양한 데이터베이스와 연동하면 Socket.io 앱에서 데이터 영속화를 구현해 더 풍부한 서비스를 개발할 수 있습니다. ServBay를 이용하면 Node.js 및 각종 DB의 로컬 개발 환경을 손쉽게 구축할 수 있습니다.

유의사항

포트 충돌: Node.js 앱이 청취하는 포트(예시: 8585, 8586)가 다른 앱과 중복되지 않는지 확인하세요. 충돌 시 PORT 환경변수 값을 바꾸면 됩니다.
ServBay 사이트 설정: 리버스 프록시 사이트를 등록한 후에는 ServBay 웹서버(Caddy/Nginx)가 재시작되고 새로운 설정이 적용됐는지 확인하세요.
WebSocket 프록시: ServBay 리버스 프록시 설정은 기본적으로 WebSocket 업그레이드를 지원합니다. WebSocket 연결 문제가 있을 경우, ServBay 웹서버 로그와 프록시 설정을 점검하세요.
방화벽: OS의 방화벽이 ServBay가 쓰는 포트(80, 443 등)나 Node.js 앱 사용 포트를 차단하지 않는지 확인하세요.

ServBay로 Socket.io 프로젝트 생성 및 실행하기 ​

Socket.io란 무엇인가요? ​

Socket.io의 주요 특징 및 장점 ​

ServBay로 Socket.io 프로젝트 생성 및 실행하기 ​

사전 준비 사항 ​

Socket.io 예제 프로젝트 만들기 ​

ServBay를 통한 프로젝트 실행 (개발 모드) ​

ServBay로 프로젝트 배포하기 (운영 모드) ​

ServBay에서 제공하는 데이터베이스 연결하기 ​

유의사항 ​

자주 묻는 질문(FAQ) ​

ServBay로 Socket.io 프로젝트 생성 및 실행하기

Socket.io란 무엇인가요?

Socket.io의 주요 특징 및 장점

ServBay로 Socket.io 프로젝트 생성 및 실행하기

사전 준비 사항

Socket.io 예제 프로젝트 만들기

ServBay를 통한 프로젝트 실행 (개발 모드)

ServBay로 프로젝트 배포하기 (운영 모드)

ServBay에서 제공하는 데이터베이스 연결하기

유의사항

자주 묻는 질문(FAQ)