Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the WebSocket automatically reconnect.

Browse Source 
The WebSocket reconnects 5 seconds after the connection's closure.
If the connection reconnection fails it will try to reconnect after
another 5 seconds.
This commit is contained in:
luukas 2022-06-16 00:10:48 +03:00
parent 8611c7e5e4
commit cd8ebfdcbe
No known key found for this signature in database
GPG Key ID: CC4915E8D71FC044
1 changed files with 78 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
app/frontend/templates/base.html
View File

@ -164,7 +164,7 @@
<script>
$.extend($.fn.dataTable.defaults, {
language: {% raw translate('datatables', 'i18n', data['lang']) %}
// {{ '\nlanguage:' }} {% raw translate('datatables', 'i18n', data['lang']) %}
})
//used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
@ -192,60 +192,90 @@
});
});
let usingWebSockets = false;
let webSocket = null;
// {% if request.protocol == 'https' %}
let usingWebSockets = true;
usingWebSockets = true;
let listenEvents = [];
let wsOpen = false;
/**
* @type {number | null} reconnectorId An interval ID for the reconnector.
*/
let reconnectorId = null;
try {
pageQueryParams = 'page_query_params=' + encodeURIComponent(location.search)
page = 'page=' + encodeURIComponent(location.pathname)
var wsInternal = new WebSocket('wss://' + location.host + '/ws?' + page + '&' + pageQueryParams);
wsInternal.onopen = function () {
console.log('opened WebSocket connection:', wsInternal)
};
wsInternal.onmessage = function (rawMessage) {
var message = JSON.parse(rawMessage.data);
const wsPageQueryParams = 'page_query_params=' + encodeURIComponent(location.search)
const wsPage = 'page=' + encodeURIComponent(location.pathname)
console.log('got message: ', message)
const sendWssError = () => wsOpen || warn(
'WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?',
'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples',
'wssError'
)
listenEvents
.filter(listenedEvent => listenedEvent.event == message.event)
.forEach(listenedEvent => listenedEvent.callback(message.data))
};
wsInternal.onerror = function (errorEvent) {
console.error('WebSocket Error', errorEvent);
warn('WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?', 'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples')
};
wsInternal.onclose = function (closeEvent) {
console.log('Closed WebSocket', closeEvent);
setTimeout(sendWssError, 7000);
};
webSocket = {
on: function (event, callback) {
console.log('registered ' + event + ' event');
listenEvents.push({ event: event, callback: callback })
},
emit: function (event, data) {
var message = {
event: event,
data: data
function startWebSocket() {
console.log('%c[Crafty Controller] %cConnecting the WebSocket', 'font-weight: 900; color: #800080;', 'font-weight: 900; color: #eee;');
try {
var wsInternal = new WebSocket('wss://' + location.host + '/ws?' + wsPage + '&' + wsPageQueryParams);
wsInternal.onopen = function () {
console.log('opened WebSocket connection:', wsInternal)
wsOpen = true;
if (typeof reconnectorId === 'number') {
document.querySelectorAll('.wssError').forEach(el => el.remove())
clearInterval(reconnectorId);
reconnectorId = null;
}
};
wsInternal.onmessage = function (rawMessage) {
var message = JSON.parse(rawMessage.data);
wsInternal.send(JSON.stringify(message));
console.log('got message: ', message)
listenEvents
.filter(listenedEvent => listenedEvent.event == message.event)
.forEach(listenedEvent => listenedEvent.callback(message.data))
};
wsInternal.onerror = function (errorEvent) {
console.error('WebSocket Error', errorEvent);
};
wsInternal.onclose = function (closeEvent) {
wsOpen = false;
console.log('Closed WebSocket', closeEvent);
if (typeof reconnectorId !== 'number') {
// Discard old websocket and create a new one in 5 seconds
wsInternal = null
reconnectorId = setInterval(startWebSocket, 5000)
setTimeout(sendWssError, 7000);
} else {
wsInternal.close();
}
};
webSocket = {
on: function (event, callback) {
console.log('registered ' + event + ' event');
listenEvents.push({ event: event, callback: callback })
},
emit: function (event, data) {
var message = {
event: event,
data: data
}
wsInternal.send(JSON.stringify(message));
}
}
} catch (error) {
console.error('Error while making websocket helpers', error);
usingWebSockets = false;
}
} catch (error) {
console.error('Error while making websocket helpers', error);
usingWebSockets = false;
}
startWebSocket();
// {% else %}
let usingWebSockets = false;
warn('WebSockets are not supported in Crafty if not using the https protocol')
var webSocket;
// {% end%}
if (webSocket) {
@ -265,8 +295,6 @@
}
})
});
}
if (webSocket) {
webSocket.on('support_status_update', function (logs) {
if (logs.percent >= 100) {
document.getElementById('logs_progress_bar').innerHTML = '100%';
@ -276,8 +304,6 @@
document.getElementById('logs_progress_bar').style.width = logs.percent + '%';
}
});
}
if (webSocket) {
webSocket.on('send_logs_bootbox', function (server_id) {
var x = document.querySelector('.bootbox');
if (x) {
@ -302,9 +328,6 @@
}
});
});
}
if (webSocket) {
webSocket.on('send_eula_bootbox', function (server_id) {
var x = document.querySelector('.bootbox');
if (x) {
@ -339,10 +362,6 @@
});
}
function sendWssError(){
warn('WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?', 'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples')
}
function eulaAgree(server_id, command) {
//< !--this getCookie function is in base.html-- >
var token = getCookie("_xsrf");
@ -360,7 +379,7 @@
}
function warn(message, link = null) {
function warn(message, link = null, className = null) {
var closeEl = document.createElement('span');
var strongEL = document.createElement('strong');
var msgEl = document.createElement('div');
@ -397,6 +416,10 @@
parentEl.appendChild(linkEl);
}
if (className) {
parentEl.classList.add(className);
}
document.querySelector('.warnings').appendChild(parentEl);
}
@ -473,4 +496,4 @@
</body>
</html>
</html>