added connection status variable

author: theia 2023-02-03 12:38:31 -0500
committer: theia 2023-02-03 12:38:31 -0500
commit: fc0bafa80509f86af669e98a38cb9da0f97e58eb (patch)
tree: babd8c6718ec25a928884d841e89c9b11a4ab3ee
parent: 450cae1e20735ab3a2779d1b29da25e33993c457 (diff)
4 files changed, 51 insertions, 52 deletions
diff --git a/graffiti.js b/graffiti.js
index 9c5b188..3cdc7fc 100644
--- a/graffiti.js
+++ b/graffiti.js
@@ -36,11 +36,14 @@ export default class {
     // Commence connection
     this.#connect()
   }
-
-  async opened() {
-    if (!this.open) {
+  
+  // Wait for the connection to be
+  // open (state=true) or closed (state=false)
+  async connectionState(state) {
+    if (this.open != state) {
       await new Promise(resolve => {
-        this.eventTarget.addEventListener("graffitiOpen", () => resolve() )
+        this.eventTarget.addEventListener(
+          state? "open": "closed", ()=> resolve())
       })
     }
   }
@@ -59,15 +62,16 @@ export default class {
   }
 
   async #onClose() {
-    this.open = false
     console.error("lost connection to graffiti server, attemping reconnect soon...")
+    this.open = false
+    this.eventTarget.dispatchEvent(new Event("closed"))
     await new Promise(resolve => setTimeout(resolve, 2000))
     this.#connect()
   }
 
   async #request(msg) {
     if (!this.open) {
-      throw { 'error': 'Not connected!' }
+      throw "Can't make request! Not connected to graffiti server"
     }
 
     // Create a random message ID
@@ -75,7 +79,7 @@ export default class {
 
     // Create a listener for the reply
     const dataPromise = new Promise(resolve => {
-      this.eventTarget.addEventListener(messageID, (e) => {
+      this.eventTarget.addEventListener('$'+messageID, (e) => {
         resolve(e.data)
       })
     })
@@ -101,7 +105,7 @@ export default class {
     if ('messageID' in data) {
       // It's a reply
       // Forward it back to the sender
-      const messageEvent = new Event(data.messageID)
+      const messageEvent = new Event('$'+data.messageID)
       messageEvent.data = data
       this.eventTarget.dispatchEvent(messageEvent)
 
@@ -263,9 +267,13 @@ export default class {
       }
     }
 
-    // Begin subscribing in the background
+    // Try subscribing in the background
+    // but don't raise an error since
+    // the subscriptions will happen once connected
     if (subscribingTags.length)
-      await this.#request({ subscribe: subscribingTags })
+      try {
+        await this.#request({ subscribe: subscribingTags })
+      } catch {}
   }
 
   async unsubscribe(...tags) {
@@ -284,13 +292,15 @@ export default class {
 
     // Unsubscribe from all remaining tags
     if (unsubscribingTags.length)
-      await this.#request({ unsubscribe: unsubscribingTags })
+      try {
+        await this.#request({ unsubscribe: unsubscribingTags })
+      } catch {}
   }
 
   async #onOpen() {
     console.log("connected to the graffiti socket")
     this.open = true
-    this.eventTarget.dispatchEvent(new Event("graffitiOpen"))
+    this.eventTarget.dispatchEvent(new Event("open"))
 
     // Clear data
     for (let tag in this.tagMap) {
diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html
index e0c841f..7a142c1 100644
--- a/plugins/vue/demo/index.html
+++ b/plugins/vue/demo/index.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
   <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
   <script type="importmap">{ "imports": {
-    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js",
+    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.prod.min.js",
     "graffiti-vue": "../plugin.js"
   }}</script>
   <script type="module">
@@ -27,6 +27,13 @@
 <body id="app">
 <!-------------------------------------------------------------->
 
+  <h1>
+    Connection Status
+  </h1>
+
+  <p>
+    Connected to the Graffiti server? {{ $graffitiConnected }}
+  </p>
 
   <h1>
     Logging In
@@ -38,6 +45,10 @@
     </button>
   </p>
 
+  <p>
+    My Graffiti ID is "{{ $graffitiMyID }}"
+  </p>
+
   <br>
 
   <h1>
diff --git a/plugins/vue/index.html b/plugins/vue/index.html
deleted file mode 100644
index ceea8c7..0000000
--- a/plugins/vue/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
-  <script type="importmap">{ "imports": {
-    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js"
-  }}</script>
-  <script type="module">
-    import { createApp } from 'vue'
-    import GraffitiVue from './plugin.js'
-
-    createApp()
-    .use(GraffitiVue, {url: "http://localhost:5001"})
-    .mount('#app')
-  </script>
-</head>
-<body id="app">
-  {{ $graffitiID }}
-
-  <button @click="$graffitiToggleLogIn">
-    Log In
-  </button>
-
-  <graffiti-objects :tags="['asdf']" v-slot="{objects}">
-    <li v-for="object in objects">
-      {{object._tags}}
-      <button @click="object._remove()">
-        ❌
-      </button>
-    </li>
-  </graffiti-objects>
-
-</body>
-</html>
diff --git a/plugins/vue/plugin.js b/plugins/vue/plugin.js
index bfca17c..76fb0de 100644
--- a/plugins/vue/plugin.js
+++ b/plugins/vue/plugin.js
@@ -10,13 +10,25 @@ export default {
     // Initialize graffiti with reactive entries
     const graffiti = new Graffiti(graffitiURL, ()=>reactive({}))
 
-    // These ID need to change after opening
-    const myID = ref(null)
-    graffiti.opened().then(()=> {
-      myID.value = graffiti.myID
+    // Create a reactive variable that tracks
+    // connection changes
+    const connectionState = ref(false)
+    ;(function waitForState(state) {
+      graffiti.connectionState(state).then(()=> {
+        connectionState.value = state
+        waitForState(!state)
+    })})(true)
+    Object.defineProperty(app.config.globalProperties, "$graffitiConnected", {
+      get: ()=> connectionState.value
     })
+
+    // the connection state becomes true
+    let myID = null
     Object.defineProperty(app.config.globalProperties, "$graffitiMyID", {
-      get: ()=> myID.value
+      get: ()=> {
+        if (connectionState.value) myID = graffiti.myID
+        return myID
+      }
     })
 
     // Add static functions
author	theia	2023-02-03 12:38:31 -0500
committer	theia	2023-02-03 12:38:31 -0500
commit	fc0bafa80509f86af669e98a38cb9da0f97e58eb (patch)
tree	babd8c6718ec25a928884d841e89c9b11a4ab3ee
parent	450cae1e20735ab3a2779d1b29da25e33993c457 (diff)