Use a $watch-based system to register subscribe handlers when the events component is not yet ready instead of relying on setTimeout hacks

This commit is contained in:
Fabio Manganiello 2020-11-28 00:29:22 +01:00
parent 8f477fa335
commit 1036358b28
3 changed files with 27 additions and 4 deletions

View file

@ -17,6 +17,7 @@ export default {
data() {
return {
ws: null,
initialized: false,
pending: false,
opened: false,
timeout: null,
@ -125,6 +126,7 @@ export default {
this.ws.onopen = this.onOpen
this.ws.onerror = this.onError
this.ws.onclose = this.onClose
this.initialized = true
},
subscribe(msg) {

View file

@ -118,7 +118,7 @@ export default {
},
mounted() {
setTimeout(this.registerHandlers, 10000)
this.registerHandlers()
},
}
</script>

View file

@ -3,12 +3,33 @@ import { bus } from "@/bus";
export default {
name: "Events",
computed: {
_eventsReady() {
return this.$root.$refs.events?.initialized
},
},
methods: {
subscribe(handler, ...events) {
const subFunc = () => {
bus.emit('subscribe', {
events: events,
handler: handler,
})
}
if (this._eventsReady) {
subFunc()
return
}
const self = this
const unwatch = this.$watch( () => self._eventsReady, (newVal) => {
if (newVal) {
subFunc()
unwatch()
}
})
},
}
}