자바스크립트 WebSockets, 실시간 통신 구현하기

자바스크립트 WebSockets, 실시간 통신 구현하기

현대 웹 애플리케이션에서는 실시간 통신이 점점 더 중요해지고 있습니다. 채팅 애플리케이션, 실시간 알림, 주식 거래 플랫폼 등 다양한 분야에서 실시간 통신이 필요합니다. 자바스크립트의 WebSockets는 이러한 실시간 통신을 쉽게 구현할 수 있도록 도와주는 강력한 도구입니다. 이 글에서는 WebSockets의 기본 개념부터 실제 구현 방법까지 단계별로 살펴보겠습니다.

 

 

목차

1. WebSockets 소개
2. 기본 사용법
3. 서버와 클라이언트 설정
4. 실제 사용 예제
5. 오류 처리와 재연결
6. 결론

 

WebSockets 소개

WebSockets는 웹 브라우저와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. HTTP와는 달리, WebSockets는 연결을 유지하면서 데이터를 주고받을 수 있어, 실시간 애플리케이션에 적합합니다. WebSockets는 TCP 연결을 사용하여 클라이언트와 서버 간의 지속적인 연결을 유지합니다.

 

 

기본 사용법

자바스크립트에서 WebSockets를 사용하려면 WebSocket 객체를 생성합니다:

const socket = new WebSocket('ws://example.com/socket');

생성된 WebSocket 객체를 사용하여 다양한 이벤트를 처리할 수 있습니다:

• onopen: 연결이 열렸을 때 호출됩니다.
• onmessage: 메시지를 수신했을 때 호출됩니다.
• onerror: 오류가 발생했을 때 호출됩니다.
• onclose: 연결이 닫혔을 때 호출됩니다.

 

 

서버와 클라이언트 설정

WebSockets를 사용하기 위해서는 서버와 클라이언트를 설정해야 합니다. 서버는 WebSocket 서버 라이브러리를 사용하여 설정할 수 있습니다. 예를 들어, Node.js와 ws 라이브러리를 사용하여 간단한 WebSocket 서버를 설정할 수 있습니다:

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
    socket.on('message', message => {
        console.log(`Received message: ${message}`);
        socket.send('Hello, client!');
    });
});

클라이언트는 앞서 설명한 WebSocket 객체를 사용하여 서버와 통신할 수 있습니다.

 

 

 

 

실제 사용 예제

이제 간단한 채팅 애플리케이션을 만들어 보겠습니다. 서버와 클라이언트를 설정하여 메시지를 주고받는 예제입니다.

서버 코드

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
    socket.on('message', message => {
        server.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

클라이언트 코드

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

socket.onopen = () => {
    console.log('Connected to server');
    socket.send('Hello, server!');
};

socket.onmessage = event => {
    console.log(`Received message: ${event.data}`);
};

 

 

오류 처리와 재연결

실시간 애플리케이션에서는 연결이 끊어질 수 있기 때문에 오류 처리와 재연결 기능이 중요합니다. WebSocket 객체의 onerror와 onclose 이벤트를 사용하여 이를 처리할 수 있습니다.

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

socket.onerror = error => {
    console.error('WebSocket error:', error);
};

socket.onclose = () => {
    console.log('WebSocket connection closed. Reconnecting...');
    setTimeout(() => {
        // 재연결 로직
        socket = new WebSocket('ws://localhost:8080');
    }, 1000);
};

 

 

결론

이 글에서는 자바스크립트 WebSockets의 기본 개념부터 서버와 클라이언트 설정, 실제 사용 예제, 오류 처리와 재연결 방법까지 살펴보았습니다. WebSockets는 실시간 통신을 구현하는 데 매우 강력한 도구이며, 다양한 실시간 애플리케이션에 활용될 수 있습니다. 이를 통해 더 빠르고 반응성 좋은 웹 애플리케이션을 개발해 보세요.