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
72 lines
1.7 KiB
Markdown
72 lines
1.7 KiB
Markdown
# 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
|
|
|
|
1. Check both users are in same match chat
|
|
2. Check Socket.IO is connected (message input not disabled)
|
|
3. Check browser console for errors
|
|
4. Try refreshing both windows
|
|
5. See WEBRTC_TESTING_GUIDE.md for detailed troubleshooting
|
|
|
|
## Start Testing
|
|
|
|
```bash
|
|
docker compose up --build
|
|
# Then open http://localhost:8080 in two browser windows
|
|
```
|
|
|
|
🚀 **Ready to test!**
|