Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

resolves #24: notify and reconnect interrupted connections

Browse Source 
A notification is shown on the webui when the websocket
connection is lost, and periodic retry is attempted
This commit is contained in:
Oliver Giles 2017-12-23 17:15:48 +02:00
parent 9eb90de5b1
commit e1a0c7bd0b
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/resources/index.html
View File

@ -36,6 +36,14 @@
margin-bottom: 0; margin-bottom: 0;
} }
table#joblist tr:first-child td { border-top: 0; } table#joblist tr:first-child td { border-top: 0; }
#popup-connecting {
position: fixed;
background: white;
border: 1px solid #ddd;
bottom: 10px;
right: 10px;
padding: 20px;
}
</style> </style>
</head> </head>
<body> <body>
@ -218,6 +226,7 @@
</div> </div>
</nav> </nav>
<router-view></router-view> <router-view></router-view>
<div v-show="!connected" id="popup-connecting"><img src="/spin.gif">&nbsp;Connecting...</div>
</div> </div>
</body> </body>
</html> </html>

26
src/resources/js/app.js
View File

@ -24,6 +24,7 @@ const WebsocketHandler = function() {
comp.ws = this; comp.ws = this;
// Update html and nav titles // Update html and nav titles
document.title = comp.$root.title = msg.title; document.title = comp.$root.title = msg.title;
comp.$root.connected = true;
// Component-specific callback handler // Component-specific callback handler
comp[msg.type](msg.data); comp[msg.type](msg.data);
}); });
@ -35,6 +36,21 @@ const WebsocketHandler = function() {
this.comp[msg.type](msg.data); this.comp[msg.type](msg.data);
} }
}; };
ws.onclose = function(ev) {
// if this.comp isn't set, this connection has never been used
// and a re-connection isn't meaningful
if(!ev.wasClean && 'comp' in this) {
this.comp.$root.connected = false;
this.reconnectTimeout = setTimeout(()=>{
var newWs = setupWebsocket(path, (fn) => { fn(this.comp); });
// pass on the current component for the cases where the
// connection fails (onclose is called again) before the
// status message can reassign the current component
newWs.comp = this.comp;
}, 2000);
}
}
return ws;
}; };
return { return {
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
@ -42,12 +58,14 @@ const WebsocketHandler = function() {
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
this.ws.close(); this.ws.close();
clearTimeout(this.ws.reconnectTimeout);
setupWebsocket(to.path, (fn) => { fn(this); next(); }); setupWebsocket(to.path, (fn) => { fn(this); next(); });
}, },
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
this.ws.close(); this.ws.close();
clearTimeout(this.ws.reconnectTimeout);
next(); next();
}, }
}; };
}(); }();
@ -448,7 +466,6 @@ const Run = function() {
methods: { methods: {
status: function(data) { status: function(data) {
state.jobsRunning = []; state.jobsRunning = [];
state.log = '';
state.job = data; state.job = data;
state.latestNum = data.latestNum; state.latestNum = data.latestNum;
state.jobsRunning = [data]; state.jobsRunning = [data];
@ -468,6 +485,7 @@ const Run = function() {
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
state.log = '';
vm.logws = wsp(to.path + '/log'); vm.logws = wsp(to.path + '/log');
vm.logws.onmessage = function(msg) { vm.logws.onmessage = function(msg) {
logHandler(vm, msg.data); logHandler(vm, msg.data);
@ -477,6 +495,7 @@ const Run = function() {
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
var vm = this; var vm = this;
vm.logws.close(); vm.logws.close();
state.log = '';
vm.logws = wsp(to.path + '/log'); vm.logws = wsp(to.path + '/log');
vm.logws.onmessage = function(msg) { vm.logws.onmessage = function(msg) {
logHandler(vm, msg.data); logHandler(vm, msg.data);
@ -493,7 +512,8 @@ const Run = function() {
new Vue({ new Vue({
el: '#app', el: '#app',
data: { data: {
title: '' // populated by status ws message title: '', // populated by status ws message
connected: false
}, },
router: new VueRouter({ router: new VueRouter({
mode: 'history', mode: 'history',