added sender and receiver

copev313 · copev313 · commit 812b900e326b · 2020-09-26T13:36:24.000-04:00
diff --git a/receiver.html b/receiver.html
@@ -0,0 +1,7 @@
+<html>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
+    <script src="receiver.js"></script>
+    
+<div></div>
+
+</html>
diff --git a/receiver.js b/receiver.js
@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", (event) => {
+    
+    const peer = new Peer("receiver", {
+        host: "localhost",
+        port: 9000,
+        path: "/",
+    });
+
+    peer.on('connection', conn => {
+        conn.on('data', data => {
+            if (data.filetype.includes('image')) {
+
+                const bytes = new Uint8Array(data.file);
+                const img = document.createElement('img');
+                img.src = 'data:image/png;base64,' + encode(bytes);
+                document.querySelector('div').prepend(img);
+            }
+        });
+    });
+});
+
+const encode = input => {
+    
+    const keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+    let output = '';
+    let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+    let i = 0;
+
+    while (i < input.length) {
+        chr1 = input[i++]
+        chr2 = i < input.length ? input[i++] : Number.NaN // Not sure if the index
+        chr3 = i < input.length ? input[i++] : Number.NaN // checks are needed here
+
+        enc1 = chr1 >> 2;
+        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+        enc4 = chr3 & 63;
+
+        if (isNaN(chr2)) {
+            enc3 = enc4 = 64;
+        } else if (isNaN(chr3)) {
+            enc4 = 64;
+        }
+
+        output +=
+            keyStr.charAt(enc1) +
+            keyStr.charAt(enc2) +
+            keyStr.charAt(enc3) +
+            keyStr.charAt(enc4);
+
+    }
+
+    return output;
+}
+
diff --git a/sender.html b/sender.html
@@ -0,0 +1,14 @@
+<html>
+
+    <head>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
+        <script src="sender.js"></script>
+    </head>
+    
+    <body>
+        <form>
+            <input type="file" />
+        </form>
+    </body>
+    
+</html>
diff --git a/sender.js b/sender.js
@@ -0,0 +1,26 @@
+const { PeerServer } = require("peer");
+
+document.addEventListener('DOMContentLoaded', (event) => {
+
+    const peer = new Peer("sender", 
+                    {
+                        host: 'localhost',
+                        port: 9000,
+                        path: '/'
+                    });
+
+    const conn = peer.connect('receiver');
+
+    document.querySelector('input').onchange = function(event) {
+        const file = event.target.files[0];
+        const blob = new Blob(event.target.files, { type: file.type });
+    
+
+        conn.send({
+            file: blob,
+            filename: file.name,
+            filetype: file.type
+        });
+        
+    }
+});
