Add a little barbershop pole to indicate whether or not the websocket is active

This commit is contained in:
R. Tyler Croy 2014-11-23 22:06:19 -08:00
parent 67af6f81ff
commit dfba5ad54f
2 changed files with 7 additions and 0 deletions

View File

@ -1,6 +1,11 @@
{{> header}}
<div class="container">
<div class="progress" style="width: 100px;">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">Loading..</span>
</div>
</div>
<div id="messages">
</div>

View File

@ -8,6 +8,7 @@ function watchTopic(name) {
window.ws.onopen = function(event) {
console.log("WebSocket opened!");
$('.progress-bar').addClass('active');
};
window.ws.onmessage = function(event) {
console.log(event);
@ -20,6 +21,7 @@ function watchTopic(name) {
}
};
window.ws.onclose = function(event) {
$('.progress-bar').removeClass('active');
var timer = setTimeout(function() {
console.log("Retrying connection...");
watchTopic(name);