JavaScript 고급 네트워크

JavaScript 웹 소켓 프로그래밍

JavaScript 웹 소켓 프로그래밍 — 고급

웹 소켓 프로그래밍

1. 도입 (왜 배워야 하는가)

웹 소켓 프로그래밍은 실시간 데이터 전송을 가능하게 해주는 기술로, 현대 웹 애플리케이션에서는 필수적인 요소로 자리 잡고 있습니다. 예를 들어, 채팅 애플리케이션, 온라인 게임, 실시간 알림 시스템 등에서 웹 소켓을 사용하여 사용자 간의 즉각적인 상호작용을 구현할 수 있습니다.

만약 웹 소켓을 모른다면, 사용자는 페이지를 새로 고침하거나, 서버에 주기적으로 요청을 보내야 데이터를 받아올 수 있어 사용 경험이 떨어지고 서버에 불필요한 부하를 줄 수 있습니다. 이는 결국 사용자 이탈로 이어질 수 있습니다.

2. 핵심 개념 설명

웹 소켓

정의: 웹 소켓은 클라이언트와 서버 간의 양방향 통신을 위한 프로토콜로, HTTP를 통해 연결을 초기화한 후 지속적으로 연결을 유지합니다.
비유: 일반적인 HTTP 요청/응답은 일회성 통화와 같고, 웹 소켓은 전화 통화처럼 지속적인 대화를 가능하게 합니다.

용어	설명
클라이언트	웹 소켓 서버에 연결하는 사용자 측 애플리케이션
서버	클라이언트의 요청을 처리하고 응답하는 측
핸드쉐이크	클라이언트와 서버가 연결을 설정하기 위한 초기 과정
메시지	클라이언트와 서버 간에 주고받는 데이터 단위

3. 기본 코드 예제

다음은 웹 소켓을 사용하여 서버와 연결하고 메시지를 주고받는 가장 기본적인 예제입니다.

// 웹 소켓 서버에 연결
const socket = new WebSocket('ws://localhost:8080');

// 연결이 열렸을 때 실행되는 이벤트
socket.addEventListener('open', function (event) {
    console.log('서버와 연결되었습니다.');
    // 서버에 메시지 보내기
    socket.send('안녕하세요, 서버!');
});

// 서버로부터 메시지를 받았을 때 실행되는 이벤트
socket.addEventListener('message', function (event) {
    console.log('서버로부터 받은 메시지: ' + event.data);
});

실행 결과:

서버와 연결되었습니다.
서버로부터 받은 메시지: 안녕하세요, 클라이언트!

코드 한 줄씩 동작 설명:

- new WebSocket('ws://localhost:8080'): 로컬 서버에 웹 소켓 연결을 생성합니다. - socket.addEventListener('open', ...): 연결이 성공적으로 열렸을 때 실행할 이벤트 핸들러를 추가합니다. - socket.send('안녕하세요, 서버!'): 서버에 메시지를 전송합니다. - socket.addEventListener('message', ...): 서버로부터 메시지를 받았을 때 실행할 이벤트 핸들러를 추가합니다. - console.log(...): 받은 메시지를 콘솔에 출력합니다.

4. 실전 활용 예제

예제 1: 채팅 애플리케이션

쇼핑몰에서 고객 간의 실시간 채팅 기능을 구현할 때 웹 소켓을 사용하여 메시지를 즉시 전달합니다. 고객이 메시지를 전송하면 서버가 이를 모든 클라이언트에 즉시 브로드캐스트할 수 있습니다.

예제 2: 실시간 알림 시스템

뉴스 웹사이트에서 새로운 기사가 올라오면 사용자에게 실시간으로 알림을 보내는 시스템을 구축할 수 있습니다. 웹 소켓을 통해 서버에서 새로운 소식이 있을 때마다 클라이언트로 푸시 알림을 보낼 수 있습니다.

5. 흔한 실수와 주의사항

실수 1: 서버 주소 잘못 설정하기

잘못된 코드:

const socket = new WebSocket('ws://wrongaddress:8080');

올바른 코드:

const socket = new WebSocket('ws://localhost:8080');

잘못된 주소로 연결할 경우 연결 오류가 발생합니다.

실수 2: 이벤트 핸들러 등록 누락