mirror of
https://github.com/xtr-dev/rondevu-demo.git
synced 2025-12-10 02:43:23 +00:00
Update README to reflect current RondevuPeer API
- Replaced all references to removed RondevuConnection class - Updated to use RondevuPeer with state machine lifecycle - Documented offerer and answerer state flows - Added detailed "What Happens Under the Hood" section - Updated all code examples to use addEventListener - Added trickle ICE implementation details - Documented timeout configurations - Updated technical implementation section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
145
README.md
145
README.md
@@ -5,7 +5,7 @@
|
|||||||
Experience topic-based peer discovery and WebRTC connections using the Rondevu signaling platform.
|
Experience topic-based peer discovery and WebRTC connections using the Rondevu signaling platform.
|
||||||
|
|
||||||
**Related repositories:**
|
**Related repositories:**
|
||||||
- [rondevu-server](https://github.com/xtr-dev/rondevu) - HTTP signaling server
|
- [rondevu-server](https://github.com/xtr-dev/rondevu-server) - HTTP signaling server
|
||||||
- [rondevu-client](https://github.com/xtr-dev/rondevu-client) - TypeScript client library
|
- [rondevu-client](https://github.com/xtr-dev/rondevu-client) - TypeScript client library
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -17,14 +17,15 @@ This demo showcases the complete Rondevu workflow:
|
|||||||
1. **Register** - Get peer credentials (automatically saved)
|
1. **Register** - Get peer credentials (automatically saved)
|
||||||
2. **Create Offers** - Advertise your WebRTC connection on topics
|
2. **Create Offers** - Advertise your WebRTC connection on topics
|
||||||
3. **Discover Peers** - Find other peers by topic
|
3. **Discover Peers** - Find other peers by topic
|
||||||
4. **Connect** - Establish direct P2P WebRTC connections
|
4. **Connect** - Establish direct P2P WebRTC connections via `RondevuPeer`
|
||||||
5. **Chat** - Send messages over WebRTC data channels
|
5. **Chat** - Send messages over WebRTC data channels
|
||||||
|
|
||||||
### Key Features
|
### Key Features
|
||||||
|
|
||||||
- **Topic-Based Discovery** - Find peers by shared topics (like torrent infohashes)
|
- **Topic-Based Discovery** - Find peers by shared topics (like torrent infohashes)
|
||||||
- **Real P2P Connections** - Actual WebRTC data channels (not simulated)
|
- **Real P2P Connections** - Actual WebRTC data channels (not simulated)
|
||||||
- **Connection Manager** - Uses high-level `RondevuConnection` API (no manual WebRTC plumbing)
|
- **State-Based Peer Management** - Uses `RondevuPeer` with clean state machine (idle → creating-offer → waiting-for-answer → exchanging-ice → connected)
|
||||||
|
- **Trickle ICE** - Fast connection establishment by sending ICE candidates as they're discovered
|
||||||
- **Persistent Credentials** - Saves authentication to localStorage
|
- **Persistent Credentials** - Saves authentication to localStorage
|
||||||
- **Topics Browser** - Browse all active topics and peer counts
|
- **Topics Browser** - Browse all active topics and peer counts
|
||||||
- **Multiple Connections** - Support multiple simultaneous peer connections
|
- **Multiple Connections** - Support multiple simultaneous peer connections
|
||||||
@@ -109,76 +110,121 @@ The easiest way to test:
|
|||||||
|
|
||||||
## Technical Implementation
|
## Technical Implementation
|
||||||
|
|
||||||
### Connection Manager
|
### RondevuPeer State Machine
|
||||||
|
|
||||||
This demo uses the high-level `RondevuConnection` class which abstracts all WebRTC complexity:
|
This demo uses the `RondevuPeer` class which implements a clean state-based connection lifecycle:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// Create connection
|
import { RondevuPeer } from '@xtr-dev/rondevu-client';
|
||||||
const conn = client.createConnection();
|
|
||||||
|
// Create peer
|
||||||
|
const peer = new RondevuPeer(client.offers);
|
||||||
|
|
||||||
// Set up event listeners
|
// Set up event listeners
|
||||||
conn.on('connected', () => {
|
peer.on('state', (state) => {
|
||||||
console.log('P2P connection established!');
|
console.log('Peer state:', state);
|
||||||
|
// Offerer: idle → creating-offer → waiting-for-answer → exchanging-ice → connected
|
||||||
|
// Answerer: idle → answering → exchanging-ice → connected
|
||||||
});
|
});
|
||||||
|
|
||||||
conn.on('datachannel', (channel) => {
|
peer.on('connected', () => {
|
||||||
channel.onmessage = (event) => {
|
console.log('✅ P2P connection established!');
|
||||||
console.log('Message:', event.data);
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Create offer
|
peer.on('datachannel', (channel) => {
|
||||||
await conn.createOffer({
|
channel.addEventListener('message', (event) => {
|
||||||
|
console.log('📥 Message:', event.data);
|
||||||
|
});
|
||||||
|
|
||||||
|
channel.addEventListener('open', () => {
|
||||||
|
// Channel is ready, can send messages
|
||||||
|
channel.send('Hello!');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('failed', (error) => {
|
||||||
|
console.error('❌ Connection failed:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create offer (offerer)
|
||||||
|
await peer.createOffer({
|
||||||
topics: ['demo-room'],
|
topics: ['demo-room'],
|
||||||
ttl: 300000
|
ttl: 300000
|
||||||
});
|
});
|
||||||
|
|
||||||
// Or answer an offer
|
// Or answer an offer (answerer)
|
||||||
await conn.answer(offerId, offerSdp);
|
await peer.answer(offerId, offerSdp, {
|
||||||
|
topics: ['demo-room']
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
The connection manager handles:
|
### Connection States
|
||||||
- Offer/answer SDP generation
|
|
||||||
- ICE candidate gathering and exchange
|
**Offerer Flow:**
|
||||||
- Automatic polling for answers and candidates
|
1. **idle** - Initial state
|
||||||
- Data channel lifecycle
|
2. **creating-offer** - Creating WebRTC offer and sending to server
|
||||||
- Connection state management
|
3. **waiting-for-answer** - Polling for answer from peer (every 2 seconds)
|
||||||
- Event-driven API
|
4. **exchanging-ice** - Exchanging ICE candidates (polling every 1 second)
|
||||||
|
5. **connected** - Successfully connected!
|
||||||
|
6. **failed/closed** - Connection failed or was closed
|
||||||
|
|
||||||
|
**Answerer Flow:**
|
||||||
|
1. **idle** - Initial state
|
||||||
|
2. **answering** - Creating WebRTC answer and sending to server
|
||||||
|
3. **exchanging-ice** - Exchanging ICE candidates (polling every 1 second)
|
||||||
|
4. **connected** - Successfully connected!
|
||||||
|
5. **failed/closed** - Connection failed or was closed
|
||||||
|
|
||||||
### What Happens Under the Hood
|
### What Happens Under the Hood
|
||||||
|
|
||||||
1. **Offerer** calls `conn.createOffer()`:
|
1. **Offerer** calls `peer.createOffer()`:
|
||||||
- Creates RTCPeerConnection
|
- State → `creating-offer`
|
||||||
|
- Creates RTCPeerConnection and data channel
|
||||||
- Generates SDP offer
|
- Generates SDP offer
|
||||||
- Creates data channel
|
- Sets up ICE candidate handler (before gathering starts)
|
||||||
|
- Sets local description → ICE gathering begins
|
||||||
- Posts offer to Rondevu server
|
- Posts offer to Rondevu server
|
||||||
|
- State → `waiting-for-answer`
|
||||||
- Polls for answers every 2 seconds
|
- Polls for answers every 2 seconds
|
||||||
|
- When answer received → State → `exchanging-ice`
|
||||||
|
|
||||||
2. **Answerer** calls `conn.answer()`:
|
2. **Answerer** calls `peer.answer()`:
|
||||||
|
- State → `answering`
|
||||||
- Creates RTCPeerConnection
|
- Creates RTCPeerConnection
|
||||||
- Sets remote description (offer SDP)
|
- Sets remote description (offer SDP)
|
||||||
- Generates SDP answer
|
- Generates SDP answer
|
||||||
- Posts answer to server
|
- Sends answer to server (registers as answerer)
|
||||||
- Polls for ICE candidates every 1 second
|
- Sets up ICE candidate handler (before gathering starts)
|
||||||
|
- Sets local description → ICE gathering begins
|
||||||
|
- State → `exchanging-ice`
|
||||||
|
|
||||||
3. **ICE Exchange**:
|
3. **ICE Exchange** (Trickle ICE):
|
||||||
- Both peers generate ICE candidates
|
- Both peers generate ICE candidates as they're discovered
|
||||||
- Candidates are automatically sent to server
|
- Candidates are automatically sent to server immediately
|
||||||
- Peers poll and receive remote candidates
|
- Peers poll and receive remote candidates (every 1 second)
|
||||||
- ICE establishes the direct P2P path
|
- ICE establishes the direct P2P path
|
||||||
|
- State → `connected`
|
||||||
|
|
||||||
4. **Connection Established**:
|
4. **Connection Established**:
|
||||||
- Data channel opens
|
- Data channel opens
|
||||||
- Chat messages flow directly between peers
|
- Chat messages flow directly between peers
|
||||||
- No server relay (true P2P!)
|
- No server relay (true P2P!)
|
||||||
|
|
||||||
|
### Key Features of Implementation
|
||||||
|
|
||||||
|
- **Trickle ICE**: Candidates sent immediately as discovered (no waiting)
|
||||||
|
- **Proper Authorization**: Answer sent to server before ICE gathering to authorize candidate posting
|
||||||
|
- **Event Cleanup**: All event listeners properly removed with `removeEventListener`
|
||||||
|
- **State Management**: Clean state machine with well-defined transitions
|
||||||
|
- **Error Handling**: Graceful failure states with error events
|
||||||
|
|
||||||
### Architecture
|
### Architecture
|
||||||
|
|
||||||
- **Frontend**: React + Vite
|
- **Frontend**: React + Vite
|
||||||
- **Signaling**: Rondevu server (Cloudflare Workers + D1)
|
- **Signaling**: Rondevu server (Cloudflare Workers + D1)
|
||||||
- **Client**: @xtr-dev/rondevu-client (TypeScript library)
|
- **Client**: @xtr-dev/rondevu-client (TypeScript library)
|
||||||
- **WebRTC**: RTCPeerConnection with Google STUN servers
|
- **WebRTC**: RTCPeerConnection with STUN/TURN servers
|
||||||
|
- **Connection Management**: RondevuPeer class with state machine
|
||||||
|
|
||||||
## Server Configuration
|
## Server Configuration
|
||||||
|
|
||||||
@@ -213,18 +259,41 @@ npx wrangler pages deploy dist --project-name=rondevu-demo
|
|||||||
|
|
||||||
- Credentials are stored in localStorage and persist across sessions
|
- Credentials are stored in localStorage and persist across sessions
|
||||||
- Offers expire after 5 minutes by default
|
- Offers expire after 5 minutes by default
|
||||||
- The connection manager polls automatically (no manual polling needed)
|
- The peer automatically polls for answers and ICE candidates
|
||||||
- Multiple simultaneous connections are supported
|
- Multiple simultaneous connections are supported
|
||||||
- WebRTC uses Google's public STUN servers for NAT traversal
|
- WebRTC uses Google's public STUN servers + custom TURN server for NAT traversal
|
||||||
- Data channel messages are unreliable but fast (perfect for chat)
|
- Data channel messages are unreliable but fast (perfect for chat)
|
||||||
|
- Connection cleanup is automatic when peers disconnect
|
||||||
|
|
||||||
|
## Connection Timeouts
|
||||||
|
|
||||||
|
The demo uses these default timeouts:
|
||||||
|
|
||||||
|
- **ICE Gathering**: 10 seconds (not used with trickle ICE)
|
||||||
|
- **Waiting for Answer**: 30 seconds
|
||||||
|
- **Creating Answer**: 10 seconds
|
||||||
|
- **ICE Connection**: 30 seconds
|
||||||
|
|
||||||
|
These can be customized in the `PeerOptions`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
await peer.createOffer({
|
||||||
|
topics: ['my-topic'],
|
||||||
|
timeouts: {
|
||||||
|
waitingForAnswer: 60000, // 1 minute
|
||||||
|
iceConnection: 45000 // 45 seconds
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## Technologies
|
## Technologies
|
||||||
|
|
||||||
- **React** - UI framework
|
- **React** - UI framework
|
||||||
- **Vite** - Build tool and dev server
|
- **Vite** - Build tool and dev server
|
||||||
- **@xtr-dev/rondevu-client** - Rondevu client library
|
- **@xtr-dev/rondevu-client** - Rondevu client library with `RondevuPeer`
|
||||||
- **RTCPeerConnection** - WebRTC connections
|
- **RTCPeerConnection** - WebRTC connections
|
||||||
- **RTCDataChannel** - P2P messaging
|
- **RTCDataChannel** - P2P messaging
|
||||||
|
- **QRCode** - QR code generation for easy topic sharing
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user