mirror of
https://github.com/Luzifer/twitch-bot.git
synced 2024-11-08 08:10:08 +00:00
Add bot connection indicator
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
63e8589a15
commit
cc596b6367
3 changed files with 32 additions and 3 deletions
|
@ -24,6 +24,14 @@
|
|||
>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0" />
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
<li
|
||||
v-if="!socketConnected"
|
||||
class="nav-item d-flex align-content-center"
|
||||
>
|
||||
<span class="navbar-text me-2">
|
||||
<i class="fas fa-cloud fa-fw text-warning" />
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="isLoggedIn"
|
||||
class="nav-item dropdown"
|
||||
|
@ -58,6 +66,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import BusEventTypes from '../helpers/busevents'
|
||||
import { defineComponent } from 'vue'
|
||||
import { Dropdown } from 'bootstrap'
|
||||
|
||||
|
@ -68,6 +77,12 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
socketConnected: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout() {
|
||||
this.bus.emit('logout')
|
||||
|
@ -75,6 +90,14 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.bus.on(BusEventTypes.NotifySocketConnected, () => {
|
||||
this.socketConnected = true
|
||||
})
|
||||
|
||||
this.bus.on(BusEventTypes.NotifySocketDisconnected, () => {
|
||||
this.socketConnected = false
|
||||
})
|
||||
|
||||
if (this.isLoggedIn) {
|
||||
new Dropdown(this.$refs.userMenuToggle as Element)
|
||||
}
|
||||
|
|
|
@ -7,6 +7,8 @@ enum BusEventTypes {
|
|||
FetchError = 'fetchError',
|
||||
LoadingData = 'loadingData',
|
||||
LoginProcessing = 'loginProcessing',
|
||||
NotifySocketConnected = 'notifySocketConnected',
|
||||
NotifySocketDisconnected = 'notifySocketDisconnected',
|
||||
RaffleChanged = 'raffleChanged',
|
||||
RaffleEntryChanged = 'raffleEntryChanged',
|
||||
Toast = 'toast',
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
import BusEventTypes from './busevents'
|
||||
|
||||
class ConfigNotifyListener {
|
||||
private backoff: number = 100
|
||||
|
||||
private listener: Function
|
||||
private eventListener: Function
|
||||
|
||||
private socket: WebSocket | null = null
|
||||
|
||||
constructor(listener: Function) {
|
||||
this.listener = listener
|
||||
this.eventListener = listener
|
||||
this.connect()
|
||||
}
|
||||
|
||||
|
@ -21,6 +23,7 @@ class ConfigNotifyListener {
|
|||
|
||||
this.socket.onopen = () => {
|
||||
console.debug('[notify] Socket connected')
|
||||
this.eventListener(BusEventTypes.NotifySocketConnected)
|
||||
}
|
||||
|
||||
this.socket.onmessage = evt => {
|
||||
|
@ -30,12 +33,13 @@ class ConfigNotifyListener {
|
|||
this.backoff = 100 // We've received a message, reset backoff
|
||||
|
||||
if (msg.msg_type !== 'ping') {
|
||||
this.listener(msg.msg_type)
|
||||
this.eventListener(msg.msg_type)
|
||||
}
|
||||
}
|
||||
|
||||
this.socket.onclose = evt => {
|
||||
console.debug(`[notify] Socket was closed wasClean=${evt.wasClean}`)
|
||||
this.eventListener(BusEventTypes.NotifySocketDisconnected)
|
||||
this.updateBackoffAndReconnect()
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue