재연결 전략
연결이 끊긴 후 안정적으로 다시 연결합니다.
재연결 전략은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
왜 다시 연결해야 하나요
네트워크는 신뢰할 수 없습니다. Wi-Fi가 끊기고, 노트북이 절전 모드에 들어가며, 서버가 재시작될 수 있습니다. 견고한 WebSocket 클라이언트는 종료를 감지하고 자동으로 연결을 다시 설정해 사용자 경험을 원활하게 유지합니다.
단순한 재연결
가장 간단한 방법은 종료 즉시 다시 여는 것입니다. 하지만 서버가 중단된 상태라면 짧은 루프에서 서버를 계속 두드리게 되는 위험이 있습니다.
function connect() {
const socket = new WebSocket(url);
socket.onclose = () => connect(); // too aggressive!
}고정 지연
일정한 delay를 추가하면 부담은 줄지만 계속 일정한 간격으로 attempt를 보내며, 여러 클라이언트가 동시에 재연결을 시도하게 만들 수 있습니다(썬더링 허드).
socket.onclose = () => {
setTimeout(connect, 3000);
};지수 백오프
실패한 attempt마다 대기 시간을 두 배로 늘립니다(1초, 2초, 4초, 8초…). 최대값에서 cap합니다. 이렇게 하면 재시도가 분산되어 장애를 겪는 서버의 부담이 줄어듭니다.
let attempt = 0;
function reconnect() {
const delay = Math.min(1000 * 2 ** attempt, 30000);
attempt++;
setTimeout(connect, delay);
}지터 추가
수천 개의 클라이언트가 정확히 같은 순간에 재연결하지 않도록 delay를 약간 무작위화합니다. 전체 지터는 계산된 cap과 0 사이에서 random 값을 선택합니다.
function backoffWithJitter(attempt) {
const cap = Math.min(1000 * 2 ** attempt, 30000);
return Math.random() * cap;
}성공 시 초기화
onopen이 실행되면 attempt 카운터를 초기화하여 다음 연결 해제 시 백오프를 새로 시작합니다.
socket.onopen = () => {
attempt = 0;
console.log("reconnected");
};완전한 재연결 클라이언트
각 부분을 결합합니다. 연결하고, 열리면 초기화하고, 닫히면 백오프를 적용합니다.
let attempt = 0, socket;
function connect() {
socket = new WebSocket(url);
socket.onopen = () => { attempt = 0; };
socket.onclose = () => {
const delay = Math.min(1000 * 2 ** attempt++, 30000);
setTimeout(connect, delay + Math.random() * 1000);
};
}
connect();온라인 및 오프라인 상태에 맞추기
브라우저의 온라인/오프라인 이벤트를 수신합니다. 오프라인일 때는 재연결을 일시 중지하고 연결이 복구되면 즉시 attempt를 시작합니다.
window.addEventListener("online", () => {
attempt = 0;
connect();
});
window.addEventListener("offline", () => {
if (socket) socket.close();
});시도 횟수 제한
retry 횟수에 cap을 설정하고, 영원히 재시도하는 대신 사용자에게 영구적인 실패를 알릴 수 있습니다.
const MAX = 10;
socket.onclose = () => {
if (attempt >= MAX) { showOfflineBanner(); return; }
setTimeout(connect, backoffWithJitter(attempt++));
};재연결 후 상태 재동기화
새 연결에는 서버 측 컨텍스트가 없습니다. 다시 열리면 채널을 다시 구독하고 연결이 끊긴 동안 놓친 메시지를 요청합니다.
socket.onopen = () => {
attempt = 0;
socket.send(JSON.stringify({ type: "resubscribe", channels }));
socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};중복 socket 방지
재연결 로직이 두 번 실행되더라도 여러 socket이 열리지 않도록 방지합니다. 현재 socket을 추적하고 오래된 핸들러는 무시합니다.
function connect() {
if (socket && socket.readyState <= WebSocket.OPEN) return;
socket = new WebSocket(url);
}빠른 확인
재연결 설계를 테스트해 보세요.
복습: 재연결
단순한 재연결에서 지터를 적용한 지수 백오프까지 발전했고, 성공 시 attempt를 초기화했으며, 온라인/오프라인 이벤트를 따르고, 재시도 횟수에 cap을 설정했습니다. 또한 재연결 후 상태를 재동기화하고 중복 socket을 방지했습니다. 이제 클라이언트가 장애에 잘 대응할 수 있습니다.
자주 묻는 질문
“재연결 전략” 강의는 무료인가요?
네 — “재연결 전략” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“재연결 전략”에서 뭘 배우나요?
연결이 끊긴 후 안정적으로 다시 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“재연결 전략” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.