adam.goldsmith/SaltStatus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Automatically reconnect EventSource on disconnect

Browse Source
This commit is contained in:
Adam Goldsmith 2020-01-16 11:37:10 -05:00
parent 8cac0cb81d
commit 665c380e4c
1 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/App.vue
View File

@ -8,6 +8,13 @@
<code>saltutil.find_job</code> <code>saltutil.find_job</code>
jobs <input type="checkbox" v-model="hideFindJob" jobs <input type="checkbox" v-model="hideFindJob"
/></label> /></label>
{{
!evtSource || evtSource.readyState == evtSource.CLOSED
? 'Disconnected'
: evtSource.readyState == evtSource.OPEN
? 'Connected'
: 'Connecting'
}}
<Job <Job
v-for="(jobEvents, jid) in jobs" v-for="(jobEvents, jid) in jobs"
:key="jid" :key="jid"
@ -36,6 +43,7 @@ export default class App extends Vue {
jobs: { [key: string]: salt.JobEvent[] } = {}; jobs: { [key: string]: salt.JobEvent[] } = {};
showRawEvents: boolean = false; showRawEvents: boolean = false;
hideFindJob: boolean = true; hideFindJob: boolean = true;
evtSourceTimeout: number | null = null;
mounted(): void { mounted(): void {
fetch(BASE_URL + 'login', { fetch(BASE_URL + 'login', {
@ -44,21 +52,47 @@ export default class App extends Vue {
body: JSON.stringify(credentials), body: JSON.stringify(credentials),
}) })
.then(r => r.json()) .then(r => r.json())
.then(r => { .then(r => this.connectEventSource(r.return[0].token));
const token: string = r.return[0].token; }
this.evtSource = new EventSource(BASE_URL + 'events?token=' + token);
this.evtSource.onmessage = e => {
const event = JSON.parse(e.data);
event.splitTag = event.tag.split('/');
this.events.push(event);
if (this.isEventType(event, 'job')) { connectEventSource(token: string): void {
if (!(event.data.jid in this.jobs)) if (this.evtSourceTimeout) {
this.$set(this.jobs, event.data.jid, []); this.evtSourceTimeout = null;
this.jobs[event.data.jid].push(event); }
}
}; console.info('Connecting to eventSource.');
}); this.evtSource = new EventSource(BASE_URL + 'events?token=' + token);
this.evtSource.onopen = e => {
console.info('Connected to eventSource.');
this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
};
this.evtSource.onmessage = e => {
const event = JSON.parse(e.data);
event.splitTag = event.tag.split('/');
this.events.push(event);
if (this.isEventType(event, 'job')) {
if (!(event.data.jid in this.jobs))
this.$set(this.jobs, event.data.jid, []);
this.jobs[event.data.jid].push(event);
}
};
this.evtSource.onerror = e => {
if (!this.evtSourceTimeout) {
console.info('Lost eventSource, reconnecting');
console.info(e);
this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
this.evtSource.close();
this.evtSourceTimeout = window.setTimeout(
this.connectEventSource,
1000,
token
);
}
};
} }
isEventType<T extends salt.SaltEvent['splitTag'][1]>( isEventType<T extends salt.SaltEvent['splitTag'][1]>(