mirror of
https://github.com/xtr-dev/rondevu-client.git
synced 2025-12-10 02:43:25 +00:00
Bas van den Aakster
54355323d9
- 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>
142 lines
4.3 KiB
Markdown
142 lines
4.3 KiB
Markdown
# 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
|