Spaces:

triflix
/

peertopeer

Paused

App Files Files Community

triflix commited on Sep 19, 2025

Commit

0a02960

verified ·

1 Parent(s): f0a8a5e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +72 -88

templates/index.html CHANGED Viewed

@@ -1,113 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<title>P2P File Share</title>
-<style>
-body { font-family: Arial; margin: 50px; }
-#fileInput { display: none; }
-button { padding: 10px 20px; margin: 10px; }
-</style>
 </head>
 <body>
-<h2>P2P File Share (One-to-One)</h2>
-<input type="text" id="roomInput" placeholder="Enter Room ID"/>
-<button id="joinBtn">Join Room</button>
-<button id="sendBtn" disabled>Send File</button>
-<input type="file" id="fileInput"/>
-<hr>
-<pre id="log"></pre>
-<script>
-let localConnection;
-let dataChannel;
-let ws;
-let logEl = document.getElementById("log");
-function log(msg){ logEl.textContent += msg + "\n"; }
-document.getElementById("joinBtn").onclick = async () => {
-    const roomId = document.getElementById("roomInput").value.trim();
-    if(!roomId){ alert("Enter room ID"); return; }
-    ws = new WebSocket(`ws://${location.host}/ws/${roomId}`);
-    ws.onmessage = async (event) => {
         const msg = JSON.parse(event.data);
-        if(msg.type === "offer"){
-            localConnection = new RTCPeerConnection();
-            setupDataChannel();
-            await localConnection.setRemoteDescription(new RTCSessionDescription(msg));
             const answer = await localConnection.createAnswer();
             await localConnection.setLocalDescription(answer);
-            ws.send(JSON.stringify(localConnection.localDescription));
-        } else if(msg.type === "answer"){
-            await localConnection.setRemoteDescription(new RTCSessionDescription(msg));
-        } else if(msg.type === "candidate"){
-            try { await localConnection.addIceCandidate(msg.candidate); } catch(e){}
         }
-    };
-    localConnection = new RTCPeerConnection();
-    setupDataChannel();
-    localConnection.onicecandidate = event => {
-        if(event.candidate){
-            ws.send(JSON.stringify({type:"candidate", candidate: event.candidate}));
-        }
-    };
-    // Create offer if first peer
-    localConnection.createOffer().then(offer => {
-        localConnection.setLocalDescription(offer);
-        ws.onopen = () => ws.send(JSON.stringify(offer));
-    });
-};
-function setupDataChannel(){
-    dataChannel = localConnection.createDataChannel("fileChannel");
-    dataChannel.onopen = () => {
-        log("Data channel open. You can send files!");
-        document.getElementById("sendBtn").disabled = false;
-    };
-    dataChannel.onmessage = event => {
-        const received = event.data;
-        if(received instanceof Blob || typeof received === "string"){
-            const blob = received instanceof Blob ? received : new Blob([received]);
             const a = document.createElement("a");
-            a.href = URL.createObjectURL(blob);
             a.download = "received_file";
             a.click();
-            log("File received!");
-        }
-    };
-}
-document.getElementById("sendBtn").onclick = () => {
-    document.getElementById("fileInput").click();
-};
-document.getElementById("fileInput").onchange = () => {
-    const file = document.getElementById("fileInput").files[0];
-    const chunkSize = 16*1024;
-    const reader = new FileReader();
-    let offset = 0;
-    reader.onload = e => {
-        dataChannel.send(e.target.result);
-        offset += e.target.result.byteLength;
-        if(offset < file.size){
-            readSlice(offset);
-        } else{
-            log("File sent!");
         }
-    };
-    function readSlice(o){
-        const slice = file.slice(o, o+chunkSize);
-        reader.readAsArrayBuffer(slice);
     }
-    readSlice(0);
-};
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <title>P2P File Transfer</title>
 </head>
 <body>
+  <h2>Peer-to-Peer File Transfer</h2>
+  <button id="createBtn">Create Room</button>
+  <input type="text" id="roomInput" placeholder="Enter Room ID">
+  <button id="joinBtn">Join Room</button>
+  <br><br>
+  <input type="file" id="fileInput">
+  <script>
+    let localConnection;
+    let dataChannel;
+    let ws;
+    function randomRoomId() {
+      return Math.random().toString(36).substring(2, 8);
+    }
+    document.getElementById("createBtn").onclick = () => {
+      const roomId = randomRoomId();
+      document.getElementById("roomInput").value = roomId;
+      joinRoom(roomId, true);
+      alert("Room created: " + roomId);
+    };
+    document.getElementById("joinBtn").onclick = () => {
+      const roomId = document.getElementById("roomInput").value.trim();
+      if (roomId) joinRoom(roomId, false);
+      else alert("Enter Room ID");
+    };
+    function joinRoom(roomId, isOfferer) {
+      ws = new WebSocket(`wss://${window.location.host}/ws/${roomId}`);
+      ws.onmessage = async (event) => {
         const msg = JSON.parse(event.data);
+        if (msg.sdp) {
+          await localConnection.setRemoteDescription(msg.sdp);
+          if (msg.sdp.type === "offer") {
             const answer = await localConnection.createAnswer();
             await localConnection.setLocalDescription(answer);
+            ws.send(JSON.stringify({ sdp: localConnection.localDescription }));
+          }
+        } else if (msg.candidate) {
+          await localConnection.addIceCandidate(msg.candidate);
         }
+      };
+      localConnection = new RTCPeerConnection();
+      dataChannel = isOfferer
+        ? localConnection.createDataChannel("fileChannel")
+        : null;
+      if (!isOfferer) {
+        localConnection.ondatachannel = (event) => {
+          dataChannel = event.channel;
+          dataChannel.onmessage = (e) => {
+            const blob = new Blob([e.data]);
+            const url = URL.createObjectURL(blob);
             const a = document.createElement("a");
+            a.href = url;
             a.download = "received_file";
             a.click();
+          };
+        };
+      } else {
+        dataChannel.onmessage = (e) => console.log("Received:", e.data);
+      }
+      localConnection.onicecandidate = (event) => {
+        if (event.candidate) {
+          ws.send(JSON.stringify({ candidate: event.candidate }));
         }
+      };
+      if (isOfferer) {
+        localConnection.createOffer().then(async (offer) => {
+          await localConnection.setLocalDescription(offer);
+          ws.onopen = () => ws.send(JSON.stringify({ sdp: localConnection.localDescription }));
+        });
+      }
     }
+    document.getElementById("fileInput").onchange = (event) => {
+      const file = event.target.files[0];
+      if (file && dataChannel) {
+        file.arrayBuffer().then((buffer) => dataChannel.send(buffer));
+      }
+    };
+  </script>
 </body>
 </html>