From fa208858d9eda8d63c25be7e517f919bf4116ddb Mon Sep 17 00:00:00 2001 From: Fabian Schlenz Date: Wed, 4 Dec 2019 05:59:52 +0100 Subject: [PATCH] Webinterface: Added an overlay to display when the websocket isn't connected. --- src/index.html | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 5240c4c..e9048f8 100644 --- a/src/index.html +++ b/src/index.html @@ -9,9 +9,24 @@ + +
Not connected...
@@ -104,7 +119,7 @@
- +
@@ -273,10 +288,30 @@ process_ws_message = function(event) { } var play_on_click = true; +interval = null; +ws = null; + +var start_reconnect_timer = function() { + console.log("start_reconnect_timer() running..."); + $('#overlay').show(); + interval = setInterval(connect_to_ws, 2500); +} + +var connect_to_ws = function() { + if (!ws || ws.readyState >= ws.CLOSING) { + ws = new WebSocket("ws://" + location.host + "/ws"); + ws.onopen = function() { + console.log("on_open() running..."); + clearInterval(interval); + $('#overlay').hide(); + }; + ws.onmessage = process_ws_message; + ws.onclose = start_reconnect_timer; + } +} $(function() { - ws = new WebSocket("ws://" + location.host + "/ws"); - ws.onmessage = process_ws_message; + start_reconnect_timer(); $('#volume_slider').change(function(e) { ws.send("volume=" + e.target.value); }); $('#button_play').click(function(e) { ws.send("play"); });