Rondevu Demo

🎯 Interactive WebRTC peer discovery and connection demo

Experience topic-based peer discovery and WebRTC connections using the Rondevu signaling platform.

Related repositories:

• rondevu-server - HTTP signaling server
• rondevu-client - TypeScript client library

---

Overview

This demo showcases the complete Rondevu workflow:

1. Register - Get peer credentials (automatically saved)
2. Create Offers - Advertise your WebRTC connection on topics
3. Discover Peers - Find other peers by topic
4. Connect - Establish direct P2P WebRTC connections
5. Chat - Send messages over WebRTC data channels

Key Features

• Topic-Based Discovery - Find peers by shared topics (like torrent infohashes)
• Real P2P Connections - Actual WebRTC data channels (not simulated)
• Connection Manager - Uses high-level RondevuConnection API (no manual WebRTC plumbing)
• Persistent Credentials - Saves authentication to localStorage
• Topics Browser - Browse all active topics and peer counts
• Multiple Connections - Support multiple simultaneous peer connections
• Real-time Chat - Direct peer-to-peer messaging

Quick Start

Installation

npm install

Development

npm run dev

This starts the Vite dev server at http://localhost:5173

Build for Production

npm run build

The built files will be in the dist/ directory.

Preview Production Build

npm run preview

How to Use

Step 1: Register (One-time)

The demo automatically registers you when you first visit. Your credentials are saved in localStorage for future visits.

Step 2: Create an Offer

1. Go to the "Create Offer" tab
2. Enter one or more topics (comma-separated), e.g., demo-room, testing
3. Click "Create Offer"
4. Your offer is now advertised on those topics

Share the topic name with peers you want to connect with!

Step 3: Discover and Connect (Other Peer)

1. Go to the "Discover Offers" tab
2. Enter the same topic (e.g., demo-room)
3. Click "Discover Offers"
4. See available peers and their offers
5. Click "Answer Offer" to connect

Step 4: Chat

1. Once connected, go to the "Chat" tab
2. Select a connection from the dropdown
3. Type messages and hit Enter or click Send
4. Messages are sent directly peer-to-peer via WebRTC

Browse Topics

Click the "Topics" tab to:

• See all active topics
• View peer counts for each topic
• Quick-discover by clicking a topic

Testing Locally

The easiest way to test:

1. Open the demo in two browser windows (or tabs)
2. Window 1: Create an offer with topic test-room
3. Window 2: Discover offers in test-room and answer
4. Switch to Chat tab in both windows
5. Start chatting peer-to-peer!

Technical Implementation

Connection Manager

This demo uses the high-level RondevuConnection class which abstracts all WebRTC complexity:

// Create connection
const conn = client.createConnection();

// Set up event listeners
conn.on('connected', () => {
  console.log('P2P connection established!');
});

conn.on('datachannel', (channel) => {
  channel.onmessage = (event) => {
    console.log('Message:', event.data);
  };
});

// Create offer
await conn.createOffer({
  topics: ['demo-room'],
  ttl: 300000
});

// Or answer an offer
await conn.answer(offerId, offerSdp);

The connection manager handles:

• Offer/answer SDP generation
• ICE candidate gathering and exchange
• Automatic polling for answers and candidates
• Data channel lifecycle
• Connection state management
• Event-driven API

What Happens Under the Hood

1. Offerer calls conn.createOffer():

   • Creates RTCPeerConnection
   • Generates SDP offer
   • Creates data channel
   • Posts offer to Rondevu server
   • Polls for answers every 2 seconds

2. Answerer calls conn.answer():

   • Creates RTCPeerConnection
   • Sets remote description (offer SDP)
   • Generates SDP answer
   • Posts answer to server
   • Polls for ICE candidates every 1 second

3. ICE Exchange:

   • Both peers generate ICE candidates
   • Candidates are automatically sent to server
   • Peers poll and receive remote candidates
   • ICE establishes the direct P2P path

4. Connection Established:

   • Data channel opens
   • Chat messages flow directly between peers
   • No server relay (true P2P!)

Architecture

• Frontend: React + Vite
• Signaling: Rondevu server (Cloudflare Workers + D1)
• Client: @xtr-dev/rondevu-client (TypeScript library)
• WebRTC: RTCPeerConnection with Google STUN servers

Server Configuration

This demo connects to: https://api.ronde.vu

To use a different server, modify API_URL in src/App.jsx:

const API_URL = 'https://your-server.com';

Deployment

Deploy to Cloudflare Pages

Quick Deploy via Wrangler:

npm run build
npx wrangler pages deploy dist --project-name=rondevu-demo

Or via Git Integration:

1. Push to GitHub/GitLab
2. Connect to Cloudflare Pages
3. Set build command: npm run build
4. Set output directory: dist
5. Deploy automatically on every push!

Development Notes

• Credentials are stored in localStorage and persist across sessions
• Offers expire after 5 minutes by default
• The connection manager polls automatically (no manual polling needed)
• Multiple simultaneous connections are supported
• WebRTC uses Google's public STUN servers for NAT traversal
• Data channel messages are unreliable but fast (perfect for chat)

Technologies

• React - UI framework
• Vite - Build tool and dev server
• @xtr-dev/rondevu-client - Rondevu client library
• RTCPeerConnection - WebRTC connections
• RTCDataChannel - P2P messaging

License

MIT