Very hacky checker for websockets

lnbits/extensions/copilot/templates/copilot/compose.html

@@ -1,18 +1,18 @@
-{% extends "public.html" %} {% block page %}<q-page
+{% extends "public.html" %} {% block page %}<q-page>
-  >fdgasdf
+  <iframe
-
+    width="100%"
+    height="100%"
+    src="https://www.w3schools.com"
+    title="W3Schools Free Online Web Tutorials"
+  >
+  </iframe>
   <video
     autoplay="true"
     id="videoElement"
     style="width: 100%"
-    class="fixed-top-left"
+    class="fixed-bottom-right"
   ></video>
-  <img src="" />
+  <img src="" style="width: 100%" id="animations" class="fixed-bottom-left" />
-  <img
-    src="/copilot/static/confetti.gif"
-    style="width: 100%"
-    class="fixed-top-left"
-  />
 </q-page>
 {% endblock %} {% block scripts %}
 <script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
@@ -39,6 +39,10 @@
       return {}
     },
     methods: {
+      openURL: function (url) {
+        console.log(url)
+        return Quasar.utils.openURL(url)
+      },
       initCamera() {
         var video = document.querySelector('#videoElement')
 
@@ -52,6 +56,14 @@
               console.log('Something went wrong!')
             })
         }
+      },
+      animation1: function () {
+        self = this
+        setTimeout(function () {
+          setInterval(function () {
+            self.connection.send('')
+          }, 1000)
+        }, 2000)
       }
     },
     mounted() {
@@ -60,19 +72,60 @@
     created: function () {
       console.log('{{ copilot.id }}')
 
-      console.log('Starting connection to WebSocket Server')
       this.connection = new WebSocket(
-        'wss://' + document.domain + ':' + location.port + '/ws'
+        'ws://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/copilot/ws/compose/{{ copilot.id }}'
       )
+      this.connection.addEventListener('open', function (event) {
+        this.connection.send('')
+      })
 
-      this.connection.onmessage = function (event) {
+      this.connection.addEventListener('message', function (event) {
-        console.log(event)
+        res = event.data.split('-')
-      }
 
-      this.connection.onopen = function (event) {
+        if (res[0] != this.oldRes) {
-        console.log(event)
+          this.oldRes = res[0]
-        console.log('Successfully connected to the echo websocket server...')
+          if (res[1] == 'animation1') {
+            document.getElementById('animations').style.width = '100%'
+            document.getElementById('animations').src =
+              '/copilot/static/confetti.gif'
+            setTimeout(function () {
+              document.getElementById('animations').src = ''
+            }, 5000)
           }
+          if (res[1] == 'animation2') {
+            document.getElementById('animations').style.width = '50%'
+            document.getElementById('animations').src =
+              '/copilot/static/face.gif'
+            setTimeout(function () {
+              document.getElementById('animations').src = ''
+            }, 5000)
+          }
+          if (res[1] == 'animation3') {
+            document.getElementById('animations').style.width = '50%'
+            document.getElementById('animations').src =
+              '/copilot/static/rocket.gif'
+            setTimeout(function () {
+              document.getElementById('animations').src = ''
+            }, 5000)
+          }
+          if (res[1] == 'true') {
+            document.getElementById('videoElement').style.width = '10%'
+          }
+          if (res[1] == 'false') {
+            document.getElementById('videoElement').style.width = '100%'
+          }
+        }
+      })
+
+      this.connection.addEventListener('close', function (event) {
+        console.log('The connection has been closed')
+      })
+      var animation1 = this.animation1
+      animation1()
     }
   })
 </script>

lnbits/extensions/copilot/templates/copilot/panel.html

@@ -24,7 +24,8 @@
         <div class="row">
           <div class="col">
             <q-toggle
-              v-model="formDialogCopilot.fullscreen_cam"
+              v-model="fullscreen_cam"
+              @click="fullscreenToggle"
               size="xl"
               icon="face"
               label="Fullscreen"
@@ -36,24 +37,36 @@
               dense
               outlined
               bottom-slots
-              v-model="text"
+              v-model="iframe"
               label="iframe url"
             >
               <template v-slot:after>
-                <q-btn round dense flat icon="send" />
+                <q-btn round dense flat @click="" icon="send" />
               </template>
             </q-input>
           </div>
         </div>
         <div class="row q-pa-sm">
           <div class="col">
-            <q-btn color="primary" label="Animation 1" />
+            <q-btn
+              color="primary"
+              @click="animationBTN('animation1')"
+              label="Confetti"
+            />
           </div>
           <div class="col">
-            <q-btn color="primary" label="Animation 2" />
+            <q-btn
+              color="primary"
+              @click="animationBTN('animation2')"
+              label="Smiley"
+            />
           </div>
           <div class="col">
-            <q-btn color="primary" label="Animation 3" />
+            <q-btn
+              color="primary"
+              @click="animationBTN('animation3')"
+              label="Rocket"
+            />
           </div>
         </div>
         <div class="column">
@@ -65,9 +78,6 @@
               clearable
               type="textarea"
               label="Notes"
-              :shadow-text="textareaShadowText"
-              @keydown="processTextareaFill"
-              @focus="processTextareaFill"
             ></q-input>
           </div>
           <div class="col">
@@ -93,24 +103,47 @@
     mixins: [windowMixin],
     data() {
       return {
-        newProgress: 0.4,
+        fullscreen_cam: true,
-        counter: 1,
+        textareaModel: '',
-        newTimeLeft: '',
+        iframe: ''
-        lnbtc: true,
-        onbtc: false,
-        formDialogCopilot: {
-          fullscreen_cam: true
-        }
       }
     },
     methods: {
+      fullscreenToggle: function () {
+        this.connection.send(String(fullscreen_cam))
+      },
       openCompose: function () {
         let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=500,left=200,top=200`
 
         open('../copilot/cp/{{ copilot.id }}', 'test', params)
+      },
+      animationBTN: function (name) {
+        this.connection.send(name)
+      },
+      stfu: function (name) {
+        this.connection.send('')
       }
     },
-    created: function () {}
+    created: function () {
+      console.log('{{ copilot.id }}')
+
+      this.connection = new WebSocket(
+        'ws://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/copilot/ws/panel/{{ copilot.id }}'
+      )
+      this.connection.addEventListener('open', function (event) {})
+
+      this.connection.addEventListener('message', function (event) {
+        console.log('Message from server ', event.data)
+      })
+
+      this.connection.addEventListener('close', function (event) {
+        console.log('The connection has been closed')
+      })
+    }
   })
 </script>
 {% endblock %}

lnbits/extensions/copilot/views.py

@@ -6,11 +6,25 @@ from lnbits.decorators import check_user_exists, validate_uuids
 from . import copilot_ext
 from .crud import get_copilot
 
-@copilot_ext.websocket('/ws')
+from quart import g, abort, render_template, jsonify, websocket
-async def ws():
+from functools import wraps
+import trio 
+import shortuuid
+connected_websockets = {}
+
+@copilot_ext.websocket('/ws/panel/<copilot_id>')
+async def ws_panel(copilot_id):
+    global connected_websockets
     while True:
         data = await websocket.receive()
-        await websocket.send(f"echo {data}")
+        connected_websockets[copilot_id] = shortuuid.uuid() + '-' + data
+
+@copilot_ext.websocket('/ws/compose/<copilot_id>')
+async def ws_compose(copilot_id):
+    global connected_websockets
+    while True:
+        data = await websocket.receive()
+        await websocket.send(connected_websockets[copilot_id])
         
 @copilot_ext.route("/")
 @validate_uuids(["usr"], required=True)