From fc0bafa80509f86af669e98a38cb9da0f97e58eb Mon Sep 17 00:00:00 2001 From: theia Date: Fri, 3 Feb 2023 12:38:31 -0500 Subject: added connection status variable --- graffiti.js | 34 ++++++++++++++++++++++------------ plugins/vue/demo/index.html | 13 ++++++++++++- plugins/vue/index.html | 34 ---------------------------------- plugins/vue/plugin.js | 22 +++++++++++++++++----- 4 files changed, 51 insertions(+), 52 deletions(-) delete mode 100644 plugins/vue/index.html 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 @@ - - - - - {{ $graffitiID }} - - - - -
  • - {{object._tags}} - -
    • -     - - - 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 -- cgit v1.2.3-70-g09d2