664a2865b9
Add complete WebRTC peer-to-peer file transfer functionality: Backend changes: - Add WebRTC signaling events to Socket.IO (offer, answer, ICE candidates) - Implement authorization checks for match participants - Add signaling relay between matched users Frontend changes: - Create useWebRTC hook for RTCPeerConnection management - Implement RTCDataChannel with 16KB chunking for large files - Add real-time progress monitoring for sender and receiver - Implement automatic file download on receiver side - Add connection state tracking and error handling - Integrate WebRTC with MatchChatPage (replace mockup) Configuration: - Add Vite allowed hosts configuration via VITE_ALLOWED_HOSTS env var - Support comma-separated host list or 'all' for development - Add .env.example with configuration examples - Update docker-compose.yml with default allowed hosts Documentation: - Add comprehensive WebRTC testing guide with troubleshooting - Add quick test checklist for manual testing - Document WebRTC flow, requirements, and success criteria Features: - End-to-end encrypted P2P transfer (DTLS) - 16KB chunk size optimized for DataChannel - Buffer management to prevent overflow - Automatic connection establishment with 30s timeout - Support for files of any size - Real-time progress tracking - Clean connection lifecycle management
1.7 KiB
1.7 KiB
Quick WebRTC Test Checklist
Setup (2 browser windows)
Window 1: Login as john@example.com / Dance123!
Window 2: Login as sarah@example.com / Swing456!
Test Steps
1. Create Match
- User A: Go to event → Request match with User B
- User B: Accept match
- Both: Navigate to match chat
2. Establish WebRTC Connection
- User A: Click "Send video (WebRTC)"
- User A: Select a small video file (~5-10MB)
- User A: Click "Send video (P2P)"
- Both: Status shows "Connecting..." → "Connected (P2P)" ✅
3. File Transfer
- User A: See progress bar 0% → 100%
- User B: See "📥 Receiving: [filename]"
- User B: File downloads automatically when complete
- Both: Chat message appears: "📹 Video sent: [filename]"
Console Logs to Check (F12)
User A:
📤 Sent WebRTC offer
📤 Sent ICE candidate
✅ DataChannel opened
📤 Sent file metadata
📤 Sent chunk 1/X
✅ File transfer complete
User B:
📥 Received WebRTC offer
✅ DataChannel received
📥 Receiving file
📥 Received chunk 1/X
✅ File received and downloaded
Success Criteria
✅ Connection state: "Connected (P2P)" with green dot
✅ Transfer completes: 100% on both sides
✅ File downloads on receiver side
✅ File size matches original
✅ No errors in console
If Something Fails
- Check both users are in same match chat
- Check Socket.IO is connected (message input not disabled)
- Check browser console for errors
- Try refreshing both windows
- See WEBRTC_TESTING_GUIDE.md for detailed troubleshooting
Start Testing
docker compose up --build
# Then open http://localhost:8080 in two browser windows
🚀 Ready to test!