kegorii/dd

2025-11-16 21:38:28 +09:00

5.6 KiB

Raw Blame History

주사위 기능 추가 (Durable Object 성능 테스트)

개요

Durable Object의 성능을 확인하기 위한 실시간 주사위 롤링 기능이 추가되었습니다. "플레이" 버튼을 누르면 1초마다 자동으로 주사위(1-6)가 변경되며, 모든 값은 Durable Object Storage에 실시간으로 저장되고 모든 클라이언트에 동기화됩니다.

주요 기능

1. 자동 주사위 롤링

플레이 버튼: 1초마다 자동으로 주사위 굴리기 시작
정지 버튼: 주사위 롤링 중지
실시간 동기화: 모든 연결된 클라이언트가 동일한 주사위 값을 실시간으로 확인

2. Durable Object 업데이트

1초마다 1-6 사이의 랜덤 숫자 생성
Durable Object Storage에 자동 저장
모든 WebSocket 클라이언트에 브로드캐스트

3. 시각적 주사위 디스플레이

3x3 그리드로 실제 주사위 dots 패턴 표시
애니메이션 효과 (플레이 중 bounce)
현재 주사위 번호를 오른쪽 상단에 표시

구현 세부사항

Durable Object (counter-do.ts)

추가된 속성

private diceNumber: number;          // 현재 주사위 번호 (1-6)
private isPlaying: boolean;           // 플레이 상태
private diceInterval: ReturnType<typeof setInterval> | null;  // interval 참조

새로운 메서드

startDiceRolling()

주사위 롤링 시작
1초마다 1-6 사이 랜덤 숫자 생성
Durable Object Storage에 저장
모든 클라이언트에 브로드캐스트

stopDiceRolling()

주사위 롤링 중지
interval 정리
상태 업데이트 브로드캐스트

WebSocket 메시지 핸들러

// 새로운 메시지 타입
{ type: 'play' }   // 주사위 플레이 시작
{ type: 'stop' }   // 주사위 플레이 정지

브로드캐스트 데이터 구조

{
  count: number,
  online: number,
  lastUpdate: number,
  diceNumber: number,    // 추가
  isPlaying: boolean     // 추가
}

클라이언트 (+page.svelte)

추가된 State

let diceNumber = $state(1);
let isPlaying = $state(false);

새로운 함수

playDice()   // 플레이 메시지 전송
stopDice()   // 정지 메시지 전송
getDiceDots(number: number)  // 주사위 패턴 생성

UI 컴포넌트

주사위 디스플레이: 3x3 그리드로 dots 패턴 표시
플레이/정지 버튼: 상태에 따라 전환
상태 표시: 플레이 중/정지 상태 표시
설명 섹션: 기능 설명

성능 테스트 시나리오

1. 단일 클라이언트 테스트

브라우저에서 페이지 접속
"연결하기" 클릭
"플레이" 버튼 클릭
주사위가 1초마다 변경되는지 확인
"정지" 버튼으로 중지

2. 다중 클라이언트 테스트

여러 브라우저/탭에서 동시 접속
모든 클라이언트에서 "연결하기"
한 클라이언트에서 "플레이" 클릭
모든 클라이언트에서 동일한 주사위 값이 동시에 변경되는지 확인 ✅
다른 클라이언트에서 "정지" 클릭
모든 클라이언트에서 동시에 정지되는지 확인

3. 연결 해제/재연결 테스트

플레이 중 일부 클라이언트 연결 해제
주사위가 계속 굴러가는지 확인
재연결 시 현재 주사위 값이 동기화되는지 확인
모든 클라이언트가 연결 해제되면 자동으로 정지되는지 확인

4. 저장소 영속성 테스트

플레이 중 주사위 값 확인 (예: 5)
모든 클라이언트 연결 해제
다시 연결
마지막 주사위 값(5)이 유지되는지 확인

성능 지표

예상 부하

요청 빈도: 1초당 1회 (주사위 업데이트)
Storage 쓰기: 1초당 1회
WebSocket 메시지: 접속자 수 × 1초당 1회
예시: 10명 접속 시 → 10 메시지/초

Cloudflare 리소스 사용

Durable Object: 1개 인스턴스 (global-counter)
WebSocket 연결: 클라이언트 수만큼
Storage 작업: 1 write/초
Duration: WebSocket Hibernation으로 최소화

비용 추정 (Cloudflare Free Tier)

WebSocket 메시지: 무제한 (Hibernation API 사용)
Storage 쓰기: 1초당 1회 = 86,400회/일
Free Tier: 1,000,000회/월 → 11일 이상 무료 사용 가능

주의사항

1. Interval 정리

모든 클라이언트가 연결 해제되면 자동으로 interval 정리
메모리 누수 방지

2. 동시성 제어

이미 플레이 중인 경우 중복 시작 방지
isPlaying 플래그로 상태 관리

3. WebSocket Hibernation

Interval은 Durable Object 내에서만 실행
Hibernation 중에도 interval은 유지됨
Cloudflare Workers 런타임이 자동 관리

향후 개선 방향

롤링 속도 조절: 슬라이더로 interval 시간 조정
통계: 각 숫자가 나온 횟수 집계
히스토리: 최근 10개 주사위 결과 표시
여러 주사위: 동시에 여러 개의 주사위 굴리기
사용자별 주사위: 각 사용자가 독립적인 주사위 제어

테스트 결과 (로컬)

✅ 단일 클라이언트: 정상 작동
✅ 다중 클라이언트 동기화: 정상 작동
✅ 연결 해제/재연결: 정상 작동
✅ 저장소 영속성: 정상 작동
✅ 자동 정리: 정상 작동

배포 후 확인사항

Cloudflare Dashboard에서 Durable Object 로그 확인
WebSocket 연결 수 모니터링
Storage 작업 빈도 확인
Duration (GB-seconds) 사용량 확인
오류율 모니터링

작성일: 2025-11-15 버전: v1.1.0 상태: ✅ 구현 완료

5.6 KiB Raw Blame History Unescape Escape