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,174 @@
|
||||
---
|
||||
id: wiki-2026-0508-websockets-and-realtime
|
||||
title: WebSockets and Realtime
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [WebSockets, Realtime Communication, WS]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [websockets, realtime, low-latency, pubsub, full-duplex]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: TypeScript / Go
|
||||
framework: Bun / uWebSockets.js / Centrifugo
|
||||
---
|
||||
|
||||
# WebSockets and Realtime
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 single TCP connection over HTTP upgrade — 매 full-duplex, low-overhead binary/text framing 의 realtime 표준"**. 2011 RFC 6455, 2026 WebTransport (HTTP/3) 가 등장했지만 WS 는 여전히 ubiquitous. 매 chat, collaborative editing, live dashboards, gaming 의 backbone.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 Lifecycle
|
||||
1. HTTP `GET` + `Upgrade: websocket` + `Sec-WebSocket-Key`.
|
||||
2. Server 의 `101 Switching Protocols` + `Sec-WebSocket-Accept`.
|
||||
3. Frame-based (text=0x1, binary=0x2, ping=0x9, pong=0xA, close=0x8).
|
||||
4. Full-duplex 까지 매 connection 의 close.
|
||||
|
||||
### 매 Scaling challenges
|
||||
- **Sticky session 또는 pub/sub fanout**: 매 connection 의 single node binding.
|
||||
- **Backpressure**: slow client → memory bloat. `bufferedAmount` watch.
|
||||
- **Reconnect + resume**: client state 의 server-side snapshot.
|
||||
- **Auth**: query token (logged in proxies) vs. first-message handshake (recommended).
|
||||
|
||||
### 매 대안 매트릭스
|
||||
- **SSE**: server → client only, simpler, HTTP/2 multiplexed.
|
||||
- **WebTransport**: HTTP/3, datagrams + streams, 매 future.
|
||||
- **Long polling**: legacy fallback.
|
||||
|
||||
### 매 응용
|
||||
1. Chat / collaborative docs (Yjs, Liveblocks).
|
||||
2. Trading / live odds / dashboards.
|
||||
3. Multiplayer game (low-tick) — 매 보통 UDP/WebTransport 가 더 좋음.
|
||||
4. AI streaming (token-by-token, 매 SSE 가 더 흔함).
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Bun WebSocket server (high perf)
|
||||
```typescript
|
||||
Bun.serve<{ userId: string }>({
|
||||
port: 3000,
|
||||
fetch(req, server) {
|
||||
const userId = verifyJWT(new URL(req.url).searchParams.get('token'));
|
||||
if (!userId) return new Response('unauth', { status: 401 });
|
||||
if (server.upgrade(req, { data: { userId } })) return;
|
||||
return new Response('expected ws', { status: 400 });
|
||||
},
|
||||
websocket: {
|
||||
open(ws) { ws.subscribe(`user:${ws.data.userId}`); },
|
||||
message(ws, msg) {
|
||||
const { room, body } = JSON.parse(msg as string);
|
||||
ws.publish(`room:${room}`, JSON.stringify({ from: ws.data.userId, body }));
|
||||
},
|
||||
close(ws) { /* cleanup */ },
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Client with auto-reconnect
|
||||
```typescript
|
||||
class RealtimeClient {
|
||||
private ws?: WebSocket;
|
||||
private retry = 0;
|
||||
|
||||
connect() {
|
||||
this.ws = new WebSocket(`wss://api/rt?token=${this.token}`);
|
||||
this.ws.onopen = () => { this.retry = 0; this.flush(); };
|
||||
this.ws.onmessage = (e) => this.dispatch(JSON.parse(e.data));
|
||||
this.ws.onclose = () => {
|
||||
const delay = Math.min(30_000, 2 ** this.retry++ * 1000) + Math.random() * 500;
|
||||
setTimeout(() => this.connect(), delay);
|
||||
};
|
||||
}
|
||||
send(obj: unknown) {
|
||||
if (this.ws?.readyState === 1) this.ws.send(JSON.stringify(obj));
|
||||
else this.queue.push(obj);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Redis pub/sub fanout (multi-node)
|
||||
```typescript
|
||||
const sub = redis.duplicate();
|
||||
await sub.subscribe('room:*', (msg, channel) => {
|
||||
const room = channel.split(':')[1];
|
||||
server.publish(`room:${room}`, msg); // 매 local connections 만
|
||||
});
|
||||
|
||||
// publisher (any node)
|
||||
await redis.publish(`room:${room}`, JSON.stringify(payload));
|
||||
```
|
||||
|
||||
### Heartbeat + dead connection detection
|
||||
```typescript
|
||||
setInterval(() => {
|
||||
for (const ws of server.publishToSubscribers) {
|
||||
if (Date.now() - ws.data.lastPong > 60_000) ws.close(1011, 'stale');
|
||||
else ws.ping();
|
||||
}
|
||||
}, 30_000);
|
||||
```
|
||||
|
||||
### Yjs collaborative doc
|
||||
```typescript
|
||||
import * as Y from 'yjs';
|
||||
import { WebsocketProvider } from 'y-websocket';
|
||||
|
||||
const doc = new Y.Doc();
|
||||
const provider = new WebsocketProvider('wss://yjs.example/sync', `doc:${docId}`, doc);
|
||||
const text = doc.getText('content');
|
||||
text.observe(e => render(text.toString()));
|
||||
text.insert(0, 'Hello'); // 매 CRDT-merged 매 모든 client
|
||||
```
|
||||
|
||||
### Backpressure
|
||||
```typescript
|
||||
ws.send(payload);
|
||||
if (ws.bufferedAmount > 1_000_000) {
|
||||
ws.close(1013, 'backpressure'); // drop slow client
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Server → client only stream | SSE (simpler, HTTP/2) |
|
||||
| Bidirectional, < 10k conn / node | WebSocket on Bun/Node |
|
||||
| 100k+ conn / node | uWebSockets.js, Go (gobwas/ws), Rust |
|
||||
| Managed pub/sub | Centrifugo, Ably, Pusher |
|
||||
| Collab editing | Yjs / Automerge over WS |
|
||||
| Low-latency game | WebTransport (HTTP/3) |
|
||||
|
||||
**기본값**: WSS + JWT in first message + Redis pub/sub fanout + 30s heartbeat + exponential reconnect.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Realtime-Communication]] · [[HTTP]]
|
||||
- 변형: [[Server-Sent-Events]] · [[WebTransport]]
|
||||
- Adjacent: [[Redis-PubSub]] · [[CRDT]] · [[WebHooks_and_Notifications]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: server scaffolding, reconnect logic, fanout pattern.
|
||||
**언제 X**: 매 production-scale tuning (kernel, ulimit, TLS termination) — empirical.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **No heartbeat**: 매 NAT/proxy 의 silent close → zombie connections.
|
||||
- **Token in URL query**: 매 server log 의 leak. Use first-message handshake.
|
||||
- **Synchronous DB call in onmessage**: blocks event loop.
|
||||
- **Per-connection in-memory state w/o backup**: 매 node restart → data loss.
|
||||
- **No backpressure check**: slow client OOMs server.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (RFC 6455, Bun/uWS docs, Yjs/Centrifugo prod patterns).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — Bun WS + reconnect + Redis fanout 패턴 |
|
||||
Reference in New Issue
Block a user