181 lines
5.6 KiB
Markdown
181 lines
5.6 KiB
Markdown
# 주사위 기능 추가 (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)
|
||
|
||
#### 추가된 속성
|
||
```typescript
|
||
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 메시지 핸들러
|
||
```typescript
|
||
// 새로운 메시지 타입
|
||
{ type: 'play' } // 주사위 플레이 시작
|
||
{ type: 'stop' } // 주사위 플레이 정지
|
||
```
|
||
|
||
#### 브로드캐스트 데이터 구조
|
||
```typescript
|
||
{
|
||
count: number,
|
||
online: number,
|
||
lastUpdate: number,
|
||
diceNumber: number, // 추가
|
||
isPlaying: boolean // 추가
|
||
}
|
||
```
|
||
|
||
### 클라이언트 (+page.svelte)
|
||
|
||
#### 추가된 State
|
||
```typescript
|
||
let diceNumber = $state(1);
|
||
let isPlaying = $state(false);
|
||
```
|
||
|
||
#### 새로운 함수
|
||
```typescript
|
||
playDice() // 플레이 메시지 전송
|
||
stopDice() // 정지 메시지 전송
|
||
getDiceDots(number: number) // 주사위 패턴 생성
|
||
```
|
||
|
||
#### UI 컴포넌트
|
||
- **주사위 디스플레이**: 3x3 그리드로 dots 패턴 표시
|
||
- **플레이/정지 버튼**: 상태에 따라 전환
|
||
- **상태 표시**: 플레이 중/정지 상태 표시
|
||
- **설명 섹션**: 기능 설명
|
||
|
||
## 성능 테스트 시나리오
|
||
|
||
### 1. 단일 클라이언트 테스트
|
||
1. 브라우저에서 페이지 접속
|
||
2. "연결하기" 클릭
|
||
3. "플레이" 버튼 클릭
|
||
4. 주사위가 1초마다 변경되는지 확인
|
||
5. "정지" 버튼으로 중지
|
||
|
||
### 2. 다중 클라이언트 테스트
|
||
1. 여러 브라우저/탭에서 동시 접속
|
||
2. 모든 클라이언트에서 "연결하기"
|
||
3. 한 클라이언트에서 "플레이" 클릭
|
||
4. **모든 클라이언트에서 동일한 주사위 값이 동시에 변경되는지 확인** ✅
|
||
5. 다른 클라이언트에서 "정지" 클릭
|
||
6. 모든 클라이언트에서 동시에 정지되는지 확인
|
||
|
||
### 3. 연결 해제/재연결 테스트
|
||
1. 플레이 중 일부 클라이언트 연결 해제
|
||
2. 주사위가 계속 굴러가는지 확인
|
||
3. 재연결 시 현재 주사위 값이 동기화되는지 확인
|
||
4. 모든 클라이언트가 연결 해제되면 자동으로 정지되는지 확인
|
||
|
||
### 4. 저장소 영속성 테스트
|
||
1. 플레이 중 주사위 값 확인 (예: 5)
|
||
2. 모든 클라이언트 연결 해제
|
||
3. 다시 연결
|
||
4. 마지막 주사위 값(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 런타임이 자동 관리
|
||
|
||
## 향후 개선 방향
|
||
|
||
1. **롤링 속도 조절**: 슬라이더로 interval 시간 조정
|
||
2. **통계**: 각 숫자가 나온 횟수 집계
|
||
3. **히스토리**: 최근 10개 주사위 결과 표시
|
||
4. **여러 주사위**: 동시에 여러 개의 주사위 굴리기
|
||
5. **사용자별 주사위**: 각 사용자가 독립적인 주사위 제어
|
||
|
||
## 테스트 결과 (로컬)
|
||
|
||
```
|
||
✅ 단일 클라이언트: 정상 작동
|
||
✅ 다중 클라이언트 동기화: 정상 작동
|
||
✅ 연결 해제/재연결: 정상 작동
|
||
✅ 저장소 영속성: 정상 작동
|
||
✅ 자동 정리: 정상 작동
|
||
```
|
||
|
||
## 배포 후 확인사항
|
||
|
||
1. Cloudflare Dashboard에서 Durable Object 로그 확인
|
||
2. WebSocket 연결 수 모니터링
|
||
3. Storage 작업 빈도 확인
|
||
4. Duration (GB-seconds) 사용량 확인
|
||
5. 오류율 모니터링
|
||
|
||
---
|
||
|
||
**작성일**: 2025-11-15
|
||
**버전**: v1.1.0
|
||
**상태**: ✅ 구현 완료
|
||
|