docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: web-websocket-reconnect
|
||||
title: WebSocket 재연결 패턴
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [web, websocket, networking, resilience, vibe-coding]
|
||||
tech_stack: { language: "TypeScript / browser", applicable_to: ["Web", "Mobile"] }
|
||||
applied_in: []
|
||||
aliases: [reconnect, exponential backoff, ping/pong, heartbeat]
|
||||
---
|
||||
|
||||
# WebSocket 재연결 패턴
|
||||
|
||||
> 모바일 / 약한 네트워크에서 WebSocket 은 끊긴다. **재연결 + 지수 백오프 + heartbeat + resume offset** 4가지를 안 하면 사용자 경험 박살.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- 끊김 감지: `onclose`, `onerror`, ping timeout
|
||||
- 재연결: 즉시 X. 지수 백오프 + jitter (1s, 2s, 4s, 8s, max 30s).
|
||||
- Heartbeat: 30~60초마다 ping. 응답 없으면 재연결.
|
||||
- Resume: 마지막 받은 메시지 id 보내고 그 이후만 받기.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
```ts
|
||||
class ReliableSocket {
|
||||
private ws: WebSocket | null = null;
|
||||
private retries = 0;
|
||||
private heartbeatTimer: any = null;
|
||||
private lastSeq = 0;
|
||||
private closed = false;
|
||||
|
||||
constructor(private readonly url: () => string, private readonly onMessage: (data: any) => void) {
|
||||
this.connect();
|
||||
}
|
||||
|
||||
private connect() {
|
||||
if (this.closed) return;
|
||||
const url = new URL(this.url());
|
||||
url.searchParams.set('lastSeq', String(this.lastSeq)); // resume
|
||||
this.ws = new WebSocket(url.toString());
|
||||
|
||||
this.ws.onopen = () => { this.retries = 0; this.startHeartbeat(); };
|
||||
this.ws.onmessage = (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.type === 'pong') return;
|
||||
if (typeof msg.seq === 'number') this.lastSeq = msg.seq;
|
||||
this.onMessage(msg);
|
||||
};
|
||||
this.ws.onerror = () => this.ws?.close();
|
||||
this.ws.onclose = () => this.scheduleReconnect();
|
||||
}
|
||||
|
||||
private startHeartbeat() {
|
||||
this.stopHeartbeat();
|
||||
this.heartbeatTimer = setInterval(() => {
|
||||
if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify({ type: 'ping' }));
|
||||
}, 30_000);
|
||||
}
|
||||
private stopHeartbeat() { if (this.heartbeatTimer) clearInterval(this.heartbeatTimer); }
|
||||
|
||||
private scheduleReconnect() {
|
||||
this.stopHeartbeat();
|
||||
if (this.closed) return;
|
||||
const base = Math.min(30_000, 1000 * Math.pow(2, this.retries++));
|
||||
const jitter = Math.random() * base * 0.3;
|
||||
setTimeout(() => this.connect(), base + jitter);
|
||||
}
|
||||
|
||||
send(data: any) {
|
||||
if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(data));
|
||||
// else: 큐잉 정책 결정 필요 (drop / queue / reject)
|
||||
}
|
||||
close() { this.closed = true; this.stopHeartbeat(); this.ws?.close(); }
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 메시지 종류 | 끊김 동안 정책 |
|
||||
|---|---|
|
||||
| 실시간 채팅 메시지 | 재연결 후 resume offset 으로 누락 fetch |
|
||||
| 라이브 시세 / 메트릭 | drop. 최신만 중요 |
|
||||
| 사용자 액션 (버튼 클릭) | 큐 + 재연결 후 send (idempotency key 필수) |
|
||||
| 동시 sub 다수 | 한 socket 으로 multiplex (channel id) |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **즉시 재연결 루프**: 서버 부하 + 네트워크 폭주. 백오프 필수.
|
||||
- **jitter 없음**: 모든 클라이언트가 같은 시간에 동시 재연결 — thundering herd.
|
||||
- **heartbeat 없음**: NAT/proxy 가 idle 끊음 (보통 60초). 끊긴지 모름.
|
||||
- **resume 없음**: 끊긴 동안 메시지 손실. lastSeq 추적.
|
||||
- **큐 무한 누적**: 끊김 길면 OOM. bounded queue + drop 정책.
|
||||
- **인증 토큰 만료된 채 재연결**: 401 무한 재시도. 만료면 토큰 갱신 후 재연결.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- "지수 백오프 + jitter + heartbeat + resume + bounded queue" 5종 세트 명시.
|
||||
- 라이브러리 권장: `partysocket`, `socket.io-client`, `reconnecting-websocket`.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[Backpressure_Patterns]]
|
||||
- [[Idempotent_Operations]]
|
||||
Reference in New Issue
Block a user