create cloud share

components/Cloud.vue

@@ -23,14 +23,39 @@
             <div class="overflow-hidden">
                 <br />
                 <UButtonGroup size="md" orientation="horizontal" class="w-full">
-                    <UInput type="file" class="w-full" />
-                    <UButton icon="i-solar-upload-bold" color="white" variant="solid" />
+                    <UInput type="file" class="w-full" @change="handleFileChange" />
+                    <UButton icon="i-solar-upload-bold" color="white" variant="solid" @click="uploadFile" />
                 </UButtonGroup>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
+const file = ref(null);
 const accordionOpen = ref(false);
+const handleFileChange = (event) => {
+    file.value = event.target.files[0];
+};
+
+const uploadFile = async () => {
+    try {
+        const binName = "MagicDropCloud_data";
+        const fileName = "index.html";
+        const formData = new FormData(file.value);
+        formData.append(fileName, file);
+        const response = await axios.post(
+            `https://filebin.net/${binName}/${fileName}`,
+            formData,
+            {
+                headers: {
+                    "Content-Type": "application/octet-stream",
+                },
+            }
+        );
+        console.log("File uploaded:", response.data.url);
+    } catch (error) {
+        console.error("Error uploading file:", error.message);
+    }
+};
 </script>

components/PeerChat.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <h1>Peer Chat</h1>
+        <button @click="initPeer">Start Chat</button>
+        <div v-if="peerId">Your Peer ID: {{ peerId }}</div>
+        <div v-if="message">Received Message: {{ message }}</div>
+    </div>
+</template>
+
+<script>
+import SimplePeer from "simple-peer";
+
+export default {
+    data () {
+        return {
+            peerId: null,
+            message: null,
+            peer: null,
+        };
+    },
+    methods: {
+        initPeer () {
+            this.peer = new SimplePeer({ initiator: location.hash === "#init" });
+
+            this.peer.on("signal", (data) => {
+                console.log("My signal:", data);
+                // Share this signal with the other peer using your signaling mechanism
+                // (e.g., local storage, database)
+            });
+
+            this.peer.on("data", (data) => {
+                this.message = data.toString();
+            });
+
+            // Listen for incoming signals from the other peer
+            // (This would typically happen in another component/page)
+            window.addEventListener("peerSignal", (event) => {
+                this.peer.signal(event.detail);
+            });
+
+            this.peerId = this.peer.id;
+        },
+    },
+};
+</script>

nuxt.config.ts

@@ -1,10 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: {
-    enabled: true,
-    timeline: {
-      enabled: true,
-    },
+    enabled: false,
   },
   ui: {
     icons: ["solar"],

package.json

@@ -21,6 +21,8 @@
     "peer": "^1.0.2",
     "peerjs": "^1.5.2",
     "peerjs-server": "^0.2.9",
-    "unique-names-generator": "^4.7.1"
+    "simple-peer": "^9.11.1",
+    "unique-names-generator": "^4.7.1",
+    "vue-webrtc": "^3.0.1"
   }
 }

pages/index.vue

@@ -37,11 +37,15 @@ import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generat
 const characterName = uniqueNamesGenerator({
   dictionaries: [adjectives, starWars],
 }).replace(/\s/g, "");
-const { data, pending, refresh } = await useFetch("http://localhost:9000/peerjs/peers", {
-  transform (data) {
-    return data.filter((el) => el !== characterName);
-  },
-});
+
+const { data, pending, refresh } = await useFetch(
+  "http://192.168.137.1:9000/peerjs/peers",
+  {
+    transform (data) {
+      return data.filter((el) => el !== characterName);
+    },
+  }
+);
 useIntervalFn(() => {
   console.log("Refreshing...");
   refresh();
@@ -50,11 +54,12 @@ useIntervalFn(() => {
 let myPeer = null;
 
 // Connect to the PeerJS Server using the configured URL
-const serverUrl = process.env.PEERJS_SERVER_URL || "localhost:9000";
+const serverUrl = process.env.PEERJS_SERVER_URL || "192.168.137.1:9000";
 const options = {
   host: serverUrl.split(":")[0],
   port: serverUrl.split(":")[1],
   path: "/",
+  debug: 3,
 };
 myPeer = new Peer(characterName, options); // Connect to server
 const colorMode = useColorMode();