Handle websocket disconnection on UI

This commit is contained in:
Matéo Duparc 2021-06-04 13:14:29 +02:00
parent 496c115fa9
commit 3543ef2824
Signed by: hardcoresushi
GPG Key ID: 007F84120107191E
3 changed files with 50 additions and 27 deletions

View File

@ -356,7 +356,6 @@ button:hover::after {
}
#file_transfer {
border-top: 2px solid var(--accent);
display: none;
position: relative;
}
#file_transfer.active {
@ -454,6 +453,19 @@ button:hover::after {
width: 2em;
margin-left: 15px;
}
#message_box, #chat_header, #msg_log {
#message_box, #chat_header, #msg_log, #file_transfer {
display: none;
}
#disconnected {
display: none;
height: 100%;
align-items: center;
justify-content: center;
}
#disconnected.disconnected {
display: flex;
}
#disconnected img {
width: 70px;
height: 70px;
}

View File

@ -61,6 +61,10 @@
<input type="file" id="attach_file" multiple>
</label>
</div>
<div id="disconnected">
<img src="/static/imgs/icons/warning/ff0000">
<h1>Websocket connection closed</h1>
</div>
</div>
</main>
<script>

View File

@ -1,7 +1,7 @@
"use strict";
let identityName = undefined;
let socket = null;
let socket = new WebSocket("ws://"+location.hostname+":"+websocketPort+"/ws");;
let notificationAllowed = false;
let localIps = [];
let currentSessionId = -1;
@ -14,7 +14,7 @@ let avatarTimestamps = new Map([
function onClickSession(event) {
let sessionId = event.currentTarget.getAttribute("data-sessionId");
if (sessionId != null) {
if (sessionId != null && socket.readyState === WebSocket.OPEN) {
currentSessionId = sessionId;
let session = sessionsData.get(sessionId);
if (!session.seen) {
@ -437,7 +437,6 @@ function getCookie(cname) {
return "";
}
socket = new WebSocket("ws://"+location.hostname+":"+websocketPort+"/ws");
socket.onopen = function() {
console.log("Connected");
socket.send(getCookie("aira_auth")); //authenticating websocket connection
@ -519,6 +518,12 @@ socket.onmessage = function(msg) {
};
socket.onclose = function() {
console.log("Disconnected");
currentSessionId = -1;
displayHistory();
displayHeader();
displayChatBottom();
displaySessions();
document.getElementById("disconnected").classList.add("disconnected");
};
function onNewSession(sessionId, outgoing, fingerprint, ip, name) {
@ -1128,9 +1133,12 @@ function displayChatBottom(speed = undefined) {
}
}
function displayHistory(scrollToBottom = true) {
msg_log.style.display = "block";
msg_log.innerHTML = "";
let session = sessionsData.get(currentSessionId);
if (typeof session === "undefined") {
msg_log.style.display = "none";
} else {
msg_log.style.display = "block";
let previousOutgoing = undefined;
msgHistory.get(currentSessionId).forEach(entry => {
let name = undefined;
@ -1153,7 +1161,6 @@ function displayHistory(scrollToBottom = true) {
if (scrollToBottom) {
msg_log.scrollTop = msg_log.scrollHeight;
}
if (typeof session !== "undefined") {
if (msg_log.scrollHeight <= msg_log.clientHeight && session.isContact) {
socket.send("load_msgs "+currentSessionId);
}