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:
2025-11-16 18:01:20 +01:00
parent 70fd6bd16a
commit 7d19557966

145
README.md
View File

@@ -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