Goroutine Fan-out과 SSE를 통한 6ms 오버헤드의 gRPC 실시간 모니터링 구현

Building Loom (Part 3): Real-Time Browser UI with SSE, Goroutines, and Channels

Joshua Varghese2026년 6월 15일4분intermediate

AI 요약

Context

gRPC의 Binary 데이터 특성으로 인한 트래픽 분석의 어려움과 기존 CLI 도구의 단발성 호출 한계 발생. 실시간 flow 파악을 위해 별도의 .proto 파일 없이 서버 리플렉션을 통해 트래픽을 디코딩하고 브라우저에 즉시 시각화하는 투명 프록시 구조 필요.

Server Reflection을 활용한 gRPC 프레임 실시간 디코딩 및 JSON 변환 구조 설계
WebSocket 대비 프로토콜이 단순하고 자동 재연결을 지원하는 SSE(Server-Sent Events)를 통한 단방향 데이터 스트리밍 채택
Hub 패턴을 적용하여 Connection 관리 전용 Goroutine이 클라이언트 채널 맵을 소유하고 메시지를 Broadcast 하는 중앙 집중형 구조 구현
Fan-out 패턴을 통해 단일 gRPC 요청을 SSE Hub, Logger, Recorder 세 곳의 Sink로 병렬 전송하여 처리 독립성 확보
각 Sink를 개별 Goroutine으로 실행하여 특정 처리 지점의 Blocking이 전체 파이프라인에 영향을 주지 않는 비동기 구조 설계
40KB 규모의 Vanilla JS 기반 단일 파일 UI를 통해 빌드 단계 없는 경량 EventSource 연결 구현

실천 포인트

1. 서버-클라이언트 단방향 스트리밍 필요 시 SSE 도입 검토

2. 다수의 데이터 Sink 처리 시 개별 Goroutine을 통한 Fan-out 구조 적용

3. 연결 상태 관리를 위해 Channel 기반의 Hub 패턴 설계 적용

4. 내부 도구 개발 시 프레임워크 최소화 및 단일 파일 UI를 통한 배포 복잡도 제거

태그