Handle websocket disconnection on UI

src/frontend/index.css

@@ -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;
+}

src/frontend/index.html

@@ -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>

src/frontend/index.js

@@ -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);
         }