93 lines
2.3 KiB
HTML
93 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<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>
|
|
<body>
|
|
<section id="status">
|
|
Status:
|
|
<span id="status_line"></span>
|
|
</section>
|
|
<section id="log">
|
|
<h1>Incoming Events</h1>
|
|
</section>
|
|
<template id="connected">
|
|
<span class="connected">Connected</span>
|
|
</template>
|
|
<template id="disconnected">
|
|
<span class="disconnected">Disconnected</span>
|
|
</template>
|
|
<template id="ring">
|
|
<p>Ring!
|
|
</template>
|
|
<script>
|
|
"use strict";
|
|
|
|
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 => {
|
|
clearTimeout(ping);
|
|
keepalive();
|
|
});
|
|
|
|
sse.addEventListener('ring', msg => {
|
|
const template = get_template('ring');
|
|
$('#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>
|
|
</body>
|
|
</html>
|