실시간 웹 애플리케이션의 핵심, 웹소켓 (WebSocket) 이해하기

웹 개발을 하면 실시간으로 데이터를 주고받아야 하는 상황을 자주 마주하게 될 것이다. 예를 들어, 채팅 애플리케이션, 실시간 주식 시세, 온라인 게임 등이 그렇다. 이러한 애플리케이션들은 서버와 클라이언트 간의 지속적인 통신이 필수적이다. 기존의 HTTP 방식은 클라이언트가 요청을 보낼 때만 서버가 응답하는 단방향 통신이어서 실시간성 구현에 한계가 있다. 이러한 문제점을 해결하기 위해 등장한 것이 바로 웹소켓(WebSocket)이다. 웹소켓은 웹 브라우저와 웹 서버 간에 전이중 통신 채널을 제공하는 기술이다. 한 번 연결이 되면 클라이언트와 서버가 자유롭게 데이터를 주고받을 수 있어 실시간 웹 애플리케이션 개발에 최적화되어 있다.

웹소켓 사용 방법과 예시

웹소켓을 사용하는 방법은 클라이언트와 서버 각각에서 구현해야 한다.

클라이언트 측 (JavaScript)

클라이언트에서는 WebSocket 객체를 사용하여 서버에 연결하고 메시지를 주고받는다.

 

// WebSocket 객체 생성 및 서버 연결
const socket = new WebSocket('ws://localhost:8080'); // ws:// 또는 wss:// 프로토콜 사용

// 연결 성공 시
socket.onopen = (event) => {
    console.log('웹소켓 연결 성공!');
    socket.send('클라이언트에서 서버로 메시지를 보냅니다.');
};

// 서버로부터 메시지 수신 시
socket.onmessage = (event) => {
    console.log('서버로부터 메시지 수신:', event.data);
};

// 에러 발생 시
socket.onerror = (event) => {
    console.error('웹소켓 에러 발생:', event);
};

// 연결 종료 시
socket.onclose = (event) => {
    console.log('웹소켓 연결 종료!');
};

// 메시지 보내기 함수 (예시)
function sendMessageToServer(message) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
    } else {
        console.warn('웹소켓 연결이 아직 준비되지 않았습니다.');
    }
}

 

서버 측 (Node.js + ws 라이브러리 예시)

서버에서는 웹소켓 연결을 설정하고 클라이언트로부터 메시지를 수신하며, 클라이언트로 메시지를 보낸다. Node.js 환경에서는 ws와 같은 라이브러리를 주로 사용한다.

 

// npm install ws
const WebSocket = require('ws');

// 웹소켓 서버 생성
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('클라이언트가 연결되었습니다.');

    // 클라이언트로부터 메시지 수신 시
    ws.on('message', (message) => {
        console.log(`클라이언트로부터 수신: ${message}`);

        // 모든 연결된 클라이언트에게 메시지 브로드캐스트
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(`서버에서 받은 메시지: ${message}`);
            }
        });
    });

    // 연결 종료 시
    ws.on('close', () => {
        console.log('클라이언트 연결이 종료되었습니다.');
    });

    // 에러 발생 시
    ws.on('error', (error) => {
        console.error('웹소켓 에러 발생:', error);
    });

    ws.send('서버에서 클라이언트로 연결 환영 메시지를 보냅니다.');
});

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

 

위 예시에서 볼 수 있듯이, 클라이언트와 서버는 서로 이벤트 기반으로 통신한다. 클라이언트가 연결되면 onopen 이벤트가 발생하고, 메시지를 보내거나 받으면 onmessage 이벤트가 발생한다. 서버도 마찬가지로 connection, message 등의 이벤트를 통해 클라이언트와 상호작용한다.