Add new features to the webclient, and allow for message history to be displayed in the webclient.

chatserver/templates/index.html

@@ -159,6 +159,25 @@
         console.log('Joining chat room:', { username: username, chat_room: chatRoom });
         socket.emit('join', { username: username, chat_room: chatRoom });
 
+        // Fetch message history for the initial chat room
+        fetch(`/get_history?chat_room=${chatRoom}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.messages) {
+                    data.messages.forEach(message => {
+                        const messageElement = document.createElement('div');
+                        messageElement.textContent = message;
+                        chatDiv.appendChild(messageElement);
+                    });
+                    chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
+                } else {
+                    console.log("No message history found for this chat room.");
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching message history:", error);
+            });
+
         // Log connection status
         socket.on('connect', () => {
             console.log('Connected to WebSocket server');
@@ -214,6 +233,25 @@
                 console.log(`Switched to chat room: ${chatRoom}`);
                 socket.emit('join', { username: username, chat_room: chatRoom });
                 chatDiv.innerHTML = ""; // Clear the chat history
+
+                // Fetch message history for the new chat room
+                fetch(`/get_history?chat_room=${chatRoom}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.messages) {
+                            data.messages.forEach(message => {
+                                const messageElement = document.createElement('div');
+                                messageElement.textContent = message;
+                                chatDiv.appendChild(messageElement);
+                            });
+                            chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
+                        } else {
+                            console.log("No message history found for this chat room.");
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Error fetching message history:", error);
+                    });
             }
         }
 
@@ -249,6 +287,17 @@
             }
         }
 
+        // Reconnect to the server
+        function reconnectServer() {
+            if (!socket.connected) {
+                console.log("Reconnecting to the server...");
+                socket.connect();
+                alert("Reconnected to the server.");
+            } else {
+                alert("You are already connected to the server.");
+            }
+        }
+
         // Toggle between light mode and dark mode
         function toggleTheme() {
             const body = document.body;