1월 22일 -WebSocket vs Polling

Yullgiii·2024년 1월 22일

개발자로의 취업을 준비하며 TIL

목록 보기

121/320

WebSocket vs Polling

WebSocket이란?

WebSocket은 웹에서 실시간, 양방향, 지속적인 통신을 가능하게 하는 고급 기술입니다. 일반적인 HTTP 요청과는 달리, WebSocket 연결이 한 번 수립되면 서버와 클라이언트 간에 지속적인 데이터 교환을 할 수 있으며, 연결이 종료될 때까지 유지됩니다. 이는 실시간 애플리케이션 개발에 매우 중요한 역할을 합니다.

WebSocket 작동 방식

연결 수립:클라이언트에서 서버로 HTTP 요청을 보내며, 이 요청은 특별한 'Upgrade' 헤더를 포함하여 WebSocket 프로토콜로의 전환을 요청합니다.
서버가 이 요청을 수락하면 HTTP 연결은 WebSocket 연결로 업그레이드됩니다.
데이터 교환:연결이 성립되면 클라이언트와 서버 간에 실시간으로 데이터를 교환할 수 있습니다. 이 데이터는 프레임 단위로 전송됩니다.
클라이언트나 서버 측에서 언제든지 데이터를 보낼 수 있으며, 이는 양방향 통신을 가능하게 합니다.
연결 유지: 한 번 연결이 성립되면, 연결은 명시적으로 닫힐 때까지 지속됩니다. 이는 효율적인 실시간 통신을 가능하게 합니다.

Polling이란?

Polling은 클라이언트가 정해진 주기마다 서버에 HTTP 요청을 보내어 최신 정보를 요청하는 기술입니다. 이 방법은 실시간 통신에 비해 구현이 간단하고 넓은 호환성을 가지지만, 지속적인 요청으로 인해 네트워크 부하가 커지고 실시간 통신에 비해 지연 시간이 길다는 단점이 있습니다.

Polling 작동 방식

주기적 요청: 클라이언트는 정해진 시간 간격(예: 몇 초마다)으로 서버에 HTTP 요청을 보냅니다. 이 요청은 서버에 최신 정보를 요청하는 것입니다.
서버 응답:서버는 클라이언트의 요청에 대해 응답을 보내고, 클라이언트는 이 응답을 받아 새로운 데이터를 얻습니다.
연속적인 요청 반복:클라이언트는 지속적으로 일정 간격으로 서버에 요청을 보냅니다. 서버는 각 요청에 대해 응답을 보내 최신 정보를 제공합니다.

WebSocket 장단점

장점

양방향 통신: 서버와 클라이언트 간 양방향 통신을 지원, 실시간 데이터 처리가 가능합니다. 이는 채팅과 같은 실시간 애플리케이션에 매우 중요합니다.
오버헤드 감소: 초기 핸드셰이크 이후 지속적인 연결을 유지하므로, 반복적인 HTTP 요청과 응답이 필요 없습니다. 이는 네트워크 부하를 줄이고 성능을 향상시킵니다.
고성능: 실시간 피드백과 빠른 데이터 교환은 동적인 사용자 인터페이스와 높은 사용자 경험을 제공합니다.

단점

서버 부하 관리: 동시에 많은 연결이 유지될 때 서버에 높은 부하가 발생할 수 있습니다. 이는 서버 리소스 관리에 대한 신중한 계획을 필요로 합니다.
구현 복잡성: HTTP 기반의 통신보다 구현과 관리가 복잡할 수 있으며, 이는 특히 대규모 시스템에서 고려해야 할 중요한 요소입니다.

import { useEffect, useState } from 'react';
import { w3cwebsocket as W3CWebSocket } from 'websocket';

function ChatComponent() {
    const [client, setClient] = useState(null);
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        // WebSocket 클라이언트 초기화
        const client = new W3CWebSocket('ws://localhost:8000/chat');
        
        client.onopen = () => {
            console.log('WebSocket Client Connected');
        };

        client.onmessage = (message) => {
            setMessages(messages => [...messages, message.data]);
        };

        setClient(client);

        return () => {
            client.close();
        };
    }, []);

    const sendMessage = (message) => {
        if (client) {
            client.send(message);
        }
    };

    return (
        <div>
            <ul>
                {messages.map((message, index) => (
                    <li key={index}>{message}</li>
                ))}
            </ul>
            <button onClick={() => sendMessage('Hello!')}>Send Message</button>
        </div>
    );
}

Polling의 장단점

장점

구현의 단순성: 서버에 주기적인 HTTP 요청을 보내는 방식은 구현이 단순하고, 기존의 웹 인프라와 호환성이 높습니다.
광범위한 호환성: 거의 모든 웹 환경에서 지원되며, 복잡한 설정이나 추가적인 프로토콜이 필요 없습니다.

단점

높은 네트워크 부하: 주기적인 요청으로 인해 불필요한 네트워크 트래픽이 많이 발생합니다.
응답 지연: 실시간 통신에 비해 응답이 지연될 수 있으며, 이는 특히 채팅과 같은 실시간 애플리케이션에서 사용자 경험을 저하시킬 수 있습니다.

WebSocket 선택

실시간 통신의 필요성: 채팅 기능과 같이 빠른 상호작용을 필요로 하는 서비스에서 WebSocket의 실시간 통신 능력은 필수적입니다.
효율적인 데이터 교환: WebSocket은 Polling에 비해 데이터 교환 효율성이 높으며, 이는 서버 리소스 사용을 최적화하고 사용자 경험을 향상시킵니다.
프로젝트 요구사항과의 일치: 실시간 상호작용과 높은 사용자 경험을 중시하는 프로젝트 요구사항에 WebSocket이 더 적합합니다.