wirecore / public / test-p2p.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wirecore P2P Test</title>
  <style>
    body {
      font-family: monospace;
      padding: 20px;
      background: #1a1a1a;
      color: #00ff00;
    }
    h1 { color: #00ff00; }
    .status {
      padding: 20px;
      margin: 10px 0;
      border: 2px solid #00ff00;
      border-radius: 5px;
    }
    .success { border-color: #00ff00; color: #00ff00; }
    .error { border-color: #ff0000; color: #ff0000; }
    .waiting { border-color: #ffff00; color: #ffff00; }
    #log {
      background: #000;
      padding: 10px;
      min-height: 300px;
      max-height: 500px;
      overflow-y: auto;
      border: 1px solid #333;
      margin-top: 20px;
    }
    .log-entry {
      margin: 5px 0;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>🧪 Wirecore P2P Connection Test</h1>

  <div class="status waiting" id="status">
    <h2>Status: Initializing...</h2>
    <p id="peer-count">Peers: 0</p>
    <p id="test-result">Waiting for connection...</p>
  </div>

  <div id="log"></div>

  <script type="module">
    import { joinRoom } from './trystero-torrent.min.js'

    const log = document.getElementById('log')
    const status = document.getElementById('status')
    const peerCount = document.getElementById('peer-count')
    const testResult = document.getElementById('test-result')

    function addLog(message, type = 'info') {
      const entry = document.createElement('div')
      entry.className = 'log-entry'
      const timestamp = new Date().toLocaleTimeString()
      entry.textContent = `[${timestamp}] ${message}`
      if (type === 'success') entry.style.color = '#00ff00'
      if (type === 'error') entry.style.color = '#ff0000'
      if (type === 'warn') entry.style.color = '#ffff00'
      log.appendChild(entry)
      log.scrollTop = log.scrollHeight
    }

    addLog('🚀 Starting P2P test...', 'info')

    const room = joinRoom(
      {
        appId: 'wirecore-v1',
        password: 'wirecore-p2p-2026',
        relayUrls: [
          'ws://localhost:8000',
          'wss://tracker.openwebtorrent.com',
          'wss://tracker.files.fm:7073/announce'
        ],
        rtcConfig: {
          iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            { urls: 'stun:stun.cloudflare.com:3478' },
            {
              urls: 'turn:142.93.23.112:3478',
              username: 'wirecore',
              credential: 'wirecore8261a6a559ce533c'
            },
            {
              urls: 'turn:142.93.23.112:5349',
              username: 'wirecore',
              credential: 'wirecore8261a6a559ce533c'
            }
          ]
        }
      },
      'wirecorev1-test'
    )

    addLog('✅ Joined room: wirecorev1-test', 'success')
    addLog('⏳ Waiting for peers...', 'warn')

    let connectedPeers = new Set()

    room.onPeerJoin(peerId => {
      connectedPeers.add(peerId)
      const peerShort = peerId.substring(0, 12) + '...'
      addLog(`✅ Peer connected: ${peerShort}`, 'success')

      peerCount.textContent = `Peers: ${connectedPeers.size}`

      if (connectedPeers.size > 0) {
        status.className = 'status success'
        testResult.textContent = '✅ SUCCESS! P2P connection established!'
        document.querySelector('h2').textContent = 'Status: CONNECTED ✅'
      }
    })

    room.onPeerLeave(peerId => {
      connectedPeers.delete(peerId)
      const peerShort = peerId.substring(0, 12) + '...'
      addLog(`❌ Peer disconnected: ${peerShort}`, 'error')

      peerCount.textContent = `Peers: ${connectedPeers.size}`

      if (connectedPeers.size === 0) {
        status.className = 'status waiting'
        testResult.textContent = 'Waiting for connection...'
        document.querySelector('h2').textContent = 'Status: Waiting for peers...'
      }
    })

    // Timeout check
    setTimeout(() => {
      if (connectedPeers.size === 0) {
        status.className = 'status error'
        testResult.textContent = '❌ TIMEOUT: No peers connected after 60 seconds'
        document.querySelector('h2').textContent = 'Status: FAILED'
        addLog('❌ Test failed: No peers connected', 'error')
        addLog('Check TURN server configuration and firewall', 'error')
      }
    }, 60000)

    addLog('💡 Open this page in another browser window to test P2P!', 'warn')
  </script>
</body>
</html>