hardcoresushi/AIRA
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Handle websocket disconnection on UI

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/frontend/index.css
View File

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

4
src/frontend/index.html
View File

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

17
src/frontend/index.js
View File

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