웹 서비스 개발 – 웹 소켓 – 2 – 클라이언트와의 통신

작성자 wooah
웹 서비스 개발 - 웹 소켓 - 2 - 클라이언트와의 통신
웹 서비스 개발 – 웹 소켓 – 2 – 클라이언트와의 통신

웹 서비스 개발 – 웹 소켓 – 웹 소켓 서버 구축

안녕하세요~ 😊
이전 글에서는 웹 소켓(WebSocket)의 개념과 동작 원리에 대해 알아봤죠!
오늘은 바로 그 웹 소켓을 실제로 어떻게 구축하고 사용할 수 있는지
즉, 웹 소켓 서버를 만드는 방법을 함께 배워보겠습니다.

“이론은 알고 있는데, 이제 뭔가 만들고 싶어요!”
그 열정을 가지고 계신 분들을 위해 준비한 실전 가이드입니다!
🍳 자, 이제 진짜 요리를 시작해볼까요?

1. 웹 소켓 서버 구축 개요

웹 소켓 서버는 클라이언트의 연결을 수락하고, 메시지를 받고, 다시 메시지를 보내는 역할을 합니다.
항상 열려 있는 커넥션을 관리하며 양방향 통신을 책임지죠!

웹 소켓 서버가 꼭 필요한 이유?

  • 클라이언트에서 웹 소켓 요청을 보내면, 이를 처리할 별도 서버가 필요해요.
  • 이 서버는 일반적인 HTTP 서버(Apache, Nginx)와는 다르게 항상 연결을 유지하며 비동기적으로 작동합니다.

2. 어떤 언어로 구축할 수 있을까?

다양한 언어로 웹 소켓 서버를 만들 수 있어요.

언어 주요 라이브러리/프레임워크
Node.js ws, socket.io
PHP Ratchet, Workerman
Python websockets, aiohttp, FastAPI
Java Spring WebSocket, Netty
Go gorilla/websocket

오늘은 많은 개발자들이 빠르게 테스트하고 응용할 수 있는 Node.js와 **PHP(Ratchet)**를 중심으로 설명드릴게요!

3. Node.js 기반 웹 소켓 서버 구축 (ws 라이브러리)

✅ 설치

npm init -y
npm install ws

✅ 서버 코드 예시 (server.js)

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 3000 });

server.on('connection', (socket) => {
  console.log('클라이언트 연결됨 ✅');

  socket.on('message', (message) => {
    console.log('수신 메시지:', message);
    socket.send(`서버 응답: ${message}`);
  });

  socket.on('close', () => {
    console.log('클라이언트 연결 종료 ❌');
  });
});

console.log('✅ 웹 소켓 서버가 3000번 포트에서 실행 중입니다!');

✅ 실행

node server.js

4. 클라이언트 예제 (HTML + JS)

<!DOCTYPE html>
<html>
<head>
  <xss-title>WebSocket 테스트</xss-title>
</head>
<body>
  <h2>웹소켓 연결 테스트</h2>
  <input id="msg" placeholder="메시지를 입력하세요">
  <button xss-onclick="sendMessage()">보내기</button>
  <div id="log"></div>

  <xss-script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      document.getElementById('log').innerHTML += '서버와 연결됨<br>';
    };

    socket.onmessage = (event) => {
      document.getElementById('log').innerHTML += '수신: ' + event.data + '<br>';
    };

    function sendMessage() {
      const msg = document.getElementById('msg').value;
      socket.send(msg);
    }
  </xss-script>
</body>
</html>

브라우저에서 HTML 파일을 열고, 메시지를 보내면 서버와 실시간으로 주고받을 수 있어요!

5. PHP에서 웹 소켓 서버 구축 (Ratchet)

✅ 설치 (Composer 필요)

composer require cboden/ratchet

✅ 서버 코드 예시 (chat-server.php)

require 'vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class ChatServer implements MessageComponentInterface {
    public function onOpen(ConnectionInterface $conn) {
        echo "연결됨: {$conn->resourceId}
";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        echo "수신: $msg
";
        $from->send("서버 응답: 잘 받았습니다! ($msg)");
    }

    public function onClose(ConnectionInterface $conn) {
        echo "종료됨: {$conn->resourceId}
";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "에러 발생: {$e->getMessage()}
";
    }
}

$server = Ratchet\App::factory('localhost', 8080);
$server->route('/chat', new ChatServer, ['*']);
$server->run();

✅ 실행

php chat-server.php

6. 방화벽, 프록시 주의사항

웹 소켓은 HTTP와는 다르게 연결이 지속적으로 유지되기 때문에 방화벽, 프록시에서 문제가 생기기 쉬워요.

  • ✅ 포트 열기: 3000, 8080 등 웹 소켓 포트를 방화벽에서 허용해 주세요.
  • ✅ Nginx 프록시 설정: 웹 소켓은 Upgrade 헤더를 통해 연결되므로, 이를 명시해줘야 합니다.
location /ws/ {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

7. 인증과 보안은 어떻게?

웹 소켓 연결 시 보안을 위해 꼭 아래를 고려하세요!

  • ✅ wss:// SSL 적용 (Let’s Encrypt 등)
  • ✅ 연결 요청 시 토큰 전달 (예: 쿼리스트링이나 헤더 활용)
  • ✅ 접속 제한: 로그인된 사용자만 허용하도록 로직 작성
const socket = new WebSocket('wss://example.com/socket?token=abcdef123456');

8. 웹 소켓 서버 구축 시 주의사항 정리 ✅

항목 주의할 점
포트 충돌 HTTP 서버와 다른 포트를 사용하세요
보안 설정 반드시 wss:// 적용
인증 처리 초기 연결 시 토큰 전달 방식 추천
서버 유지 무한 루프 작동, 백그라운드 실행 (PM2, supervisor 등 활용)
클라이언트 재접속 네트워크 오류 등 대비하여 자동 재접속 로직 구현 필요

마무리하며 😊

웹 소켓 서버 구축, 생각보다 어렵지 않죠?
기본 개념만 잡고, 한 번 직접 서버를 띄워보면 실시간 웹 서비스의 매력을 제대로 느낄 수 있어요!

이제 여러분도 실시간 채팅, 알림 시스템, IoT 데이터 수집 등 다양한 실시간 프로젝트에 도전해볼 수 있어요!

다음 시간에는 웹 소켓을 활용한 실시간 채팅 구현 실습을 함께 해볼게요!
오늘도 멋진 개발자로 한 걸음 전진! 💪🔥

감사합니다! 🙌

답글 남기기