jrd/floorbell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reconnect on error. Show connection status. Use JQuery.

Browse Source
This commit is contained in:
Jared Burce
2020-10-22 12:45:23 -07:00
parent 2050daae13
commit 13f1203a65
1 changed files with 73 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
static/main.html
View File

@@ -3,28 +3,90 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fáfnir Doorbell</title> <title>Fáfnir Doorbell</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<section id="status">
Status:
<span id="status_line"></span>
</section>
<section id="log"> <section id="log">
<h1>Incoming Events</h1> <h1>Incoming Events</h1>
</section> </section>
<template id="logline"> <template id="connected">
<p>Ping <span class="connected">Connected</span>
</template>
<template id="disconnected">
<span class="disconnected">Disconnected</span>
</template> </template>
<template id="ring"> <template id="ring">
<p>Ring! <p>Ring!
</template> </template>
<script> <script>
"use strict"; "use strict";
let sse = new EventSource('events');
const CONNECT_TIMEOUT = 1_000;
const KEEPALIVE_TIMEOUT = 10_000;
let sse;
let reconnect;
let ping;
connect();
function connect() {
console.log('connecting');
set_status('disconnected');
if (sse) {
sse.onopen = undefined;
sse.close();
}
if (ping) { clearTimeout(ping); }
sse = new EventSource('events');
sse.onopen = () => {
console.log('connected');
set_status('connected');
clearTimeout(reconnect);
keepalive();
sse.onerror = () => {
console.log('sse error');
connect();
};
sse.addEventListener('ping', msg => { sse.addEventListener('ping', msg => {
const template = document.querySelector('#logline').content.cloneNode(true); clearTimeout(ping);
document.querySelector('#log').appendChild(template); keepalive();
}); });
sse.addEventListener('ring', msg => { sse.addEventListener('ring', msg => {
const template = document.querySelector('#ring').content.cloneNode(true); const template = get_template('ring');
document.querySelector('#log').appendChild(template); $('#log').append(template);
}); });
};
reconnect = setTimeout(connect, CONNECT_TIMEOUT);
}
function get_template(name) {
return $('#' + name).map((_, n) => n.content).clone();
}
function keepalive() {
ping = setTimeout(() => {
console.warn('keepalive ping timed out');
connect();
}, KEEPALIVE_TIMEOUT);
}
function set_status(status_template) {
const template = get_template(status_template);
const status_line = $('#status_line');
status_line.empty();
status_line.append(template);
}
</script> </script>
</body> </body>
</html> </html>