웹소켓(WebSocket) 연결이 끊긴 후 자동으로 재연결하는 방법

웹소켓(WebSocket) 연결을 다시 맺으려면 소켓 객체를 새로 생성하는 것이 가장 확실한 방법입니다. 웹소켓은 원래 한 번 열리면 지속적으로 유지되도록 설계되어 있기 때문에, 연결이 끊겼을 때는 기존 객체를 재사용하기보다 새로 만들어야 합니다.

서버 측에서 연결을 종료하는 방식 활용하기

또 다른 방법은 서버가 먼저 연결을 닫도록 처리하는 것입니다. 이렇게 하면 클라이언트의 웹소켓에서 onclose 이벤트가 발생하고, 해당 이벤트 핸들러 안에서 계속해서 재연결을 시도하도록 구현할 수 있습니다.

이 방식의 장점은 서버가 다시 정상적으로 리슨(listen) 상태가 되는 순간 연결이 자동으로 복원된다는 점입니다. 사용자가 페이지를 새로고침하지 않아도 통신이 매끄럽게 이어지므로 실시간 서비스에서 특히 유용합니다.

재연결 예제 코드

아래 코드는 연결이 끊길 때마다 자동으로 웹소켓에 다시 접속하는 기본적인 패턴입니다. 직접 실행해 보면서 동작을 확인해 보세요.

// 소켓 변수 선언
var mySocket;

// 메시지 수신 시 호출되는 리스너
const socketMessageListener = (event) => {
    console.log(event.data);
};

// 연결 성공 시 호출되는 리스너
const socketOpenListener = (event) => {
    console.log('Connected');
    mySocket.send('hello');
};

// 연결 종료 시 호출되는 리스너 — 여기서 재연결을 시도합니다
const socketCloseListener = (event) => {
    if (mySocket) {
        console.error('Disconnected.');
    }
    mySocket = new WebSocket('ws://localhost:8080');
    mySocket.addEventListener('open', socketOpenListener);
    mySocket.addEventListener('message', socketMessageListener);
    mySocket.addEventListener('close', socketCloseListener);
};
socketCloseListener();

코드 동작 방식 살펴보기

핵심은 socketCloseListener 함수입니다. 연결이 닫히면 이 함수가 호출되고, 함수 내부에서 new WebSocket()으로 소켓을 새로 생성한 뒤 각종 이벤트 리스너를 다시 등록합니다. 특히 close 이벤트에 자기 자신을 다시 바인딩하기 때문에, 연결이 반복적으로 끊겨도 무한히 재연결을 시도할 수 있습니다.

실제 운영 환경에서는 재연결 시도 사이에 지연 시간(exponential backoff)을 두거나 최대 재시도 횟수를 제한하는 로직을 추가하면 더욱 안정적인 통신을 구현할 수 있습니다.