mirror of
https://github.com/xtr-dev/rondevu-client.git
synced 2025-12-10 10:53:24 +00:00
Add ServiceHost, ServiceClient, and RondevuService for high-level service management
- Add RondevuService: High-level API for username claiming and service publishing with Ed25519 signatures - Add ServiceHost: Manages offer pool for hosting services with auto-replacement - Add ServiceClient: Connects to hosted services with automatic reconnection - Add NoOpSignaler: Placeholder signaler for connection setup - Integrate Ed25519 signature functionality from @noble/ed25519 - Add ESLint and Prettier configuration with 4-space indentation - Add demo with local signaling test - Version bump to 0.10.0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
141
demo/README.md
Normal file
141
demo/README.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# Rondevu WebRTC Local Test
|
||||
|
||||
Simple side-by-side demo for testing `WebRTCRondevuConnection` with **local signaling** (no server required).
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Opens browser at `http://localhost:3000`
|
||||
|
||||
## How It Works
|
||||
|
||||
This demo uses **local in-memory signaling** to test WebRTC connections between two peers on the same page. The `LocalSignaler` class simulates a signaling server by directly exchanging ICE candidates and SDP between peers.
|
||||
|
||||
### Architecture
|
||||
|
||||
- **LocalSignaler**: Implements the `Signaler` interface with local peer-to-peer communication
|
||||
- **Host (Peer A)**: Creates the offer (offerer role)
|
||||
- **Client (Peer B)**: Receives the offer and creates answer (answerer role)
|
||||
- **ICE Exchange**: Candidates are automatically exchanged between peers through the linked signalers
|
||||
|
||||
## Usage Steps
|
||||
|
||||
1. **Create Host** (Peer A)
|
||||
- Click "1️⃣ Create Host Connection" on the left side
|
||||
- The host will create an offer and display it
|
||||
- Status changes to "Connecting"
|
||||
|
||||
2. **Create Client** (Peer B)
|
||||
- Click "2️⃣ Create Client Connection" on the right side
|
||||
- The client receives the host's offer automatically
|
||||
- Creates an answer and sends it back to the host
|
||||
- Both peers exchange ICE candidates
|
||||
|
||||
3. **Connection Established**
|
||||
- Watch the status indicators turn green ("Connected")
|
||||
- Activity logs show the connection progress
|
||||
|
||||
4. **Send Messages**
|
||||
- Type a message in either peer's input field
|
||||
- Click "📤 Send" or press Enter
|
||||
- Messages appear in the other peer's activity log
|
||||
|
||||
## Features
|
||||
|
||||
- ✅ **No signaling server required** - Everything runs locally
|
||||
- ✅ **Automatic ICE candidate exchange** - Signalers handle candidate exchange
|
||||
- ✅ **Real-time activity logs** - See exactly what's happening
|
||||
- ✅ **Connection state indicators** - Visual feedback for connection status
|
||||
- ✅ **Bidirectional messaging** - Send messages in both directions
|
||||
|
||||
## Code Structure
|
||||
|
||||
### demo.js
|
||||
|
||||
```javascript
|
||||
// LocalSignaler - Implements local signaling
|
||||
class LocalSignaler {
|
||||
addIceCandidate(candidate) // Called when local peer has a candidate
|
||||
addListener(callback) // Listen for remote candidates
|
||||
linkTo(remoteSignaler) // Connect two signalers together
|
||||
}
|
||||
|
||||
// Create and link signalers
|
||||
const hostSignaler = new LocalSignaler('HOST', 'CLIENT')
|
||||
const clientSignaler = new LocalSignaler('CLIENT', 'HOST')
|
||||
hostSignaler.linkTo(clientSignaler)
|
||||
clientSignaler.linkTo(hostSignaler)
|
||||
|
||||
// Create connections
|
||||
const hostConnection = new WebRTCRondevuConnection({
|
||||
id: 'test-connection',
|
||||
host: 'client-peer',
|
||||
service: 'test.demo@1.0.0',
|
||||
offer: null, // No offer = offerer role
|
||||
context: new WebRTCContext(hostSignaler)
|
||||
})
|
||||
|
||||
const clientConnection = new WebRTCRondevuConnection({
|
||||
id: 'test-connection',
|
||||
host: 'host-peer',
|
||||
service: 'test.demo@1.0.0',
|
||||
offer: hostConnection.connection.localDescription, // With offer = answerer role
|
||||
context: new WebRTCContext(clientSignaler)
|
||||
})
|
||||
```
|
||||
|
||||
### index.html
|
||||
|
||||
- Side-by-side layout for Host and Client
|
||||
- Status indicators (disconnected/connecting/connected)
|
||||
- SDP display areas (offer/answer)
|
||||
- Message input and send buttons
|
||||
- Activity logs for each peer
|
||||
|
||||
## Debugging
|
||||
|
||||
Open the browser console to see detailed logs:
|
||||
|
||||
- `[HOST]` - Logs from the host connection
|
||||
- `[CLIENT]` - Logs from the client connection
|
||||
- ICE candidate exchange
|
||||
- Connection state changes
|
||||
- Message send/receive events
|
||||
|
||||
## Comparison: Local vs Remote Signaling
|
||||
|
||||
### Local Signaling (This Demo)
|
||||
```javascript
|
||||
const signaler = new LocalSignaler('HOST', 'CLIENT')
|
||||
signaler.linkTo(remoteSignaler) // Direct link
|
||||
```
|
||||
|
||||
**Pros**: No server, instant testing, no network latency
|
||||
**Cons**: Only works for same-page testing
|
||||
|
||||
### Remote Signaling (Production)
|
||||
```javascript
|
||||
const api = new RondevuAPI('https://api.ronde.vu', credentials)
|
||||
const signaler = new RondevuSignaler(api, offerId)
|
||||
```
|
||||
|
||||
**Pros**: Real peer discovery, works across networks
|
||||
**Cons**: Requires signaling server, network latency
|
||||
|
||||
## Next Steps
|
||||
|
||||
After testing locally, you can:
|
||||
|
||||
1. Switch to `RondevuSignaler` for real signaling server testing
|
||||
2. Test across different browsers/devices
|
||||
3. Test with STUN/TURN servers for NAT traversal
|
||||
4. Implement production signaling with Rondevu API
|
||||
|
||||
## Files
|
||||
|
||||
- `index.html` - UI layout and styling
|
||||
- `demo.js` - Local signaling implementation and WebRTC logic
|
||||
- `README.md` - This file
|
||||
Reference in New Issue
Block a user