incremental progress

modified:   app.py
	modified:   templates/chat.html

app.py

@@ -479,6 +479,11 @@ def on_join(data):
         {"id": None, "content": f"{data['username']} has joined the room."},
         room=room.name,
     )
+    emit(
+        "user_joined",
+        {"username": data["username"]},
+        room=room.name,
+    )
     emit(
         "chat_message",
         {

templates/chat.html

@@ -111,6 +111,43 @@ function updateQueryString() {
     window.history.replaceState({}, '', newUrl);
 }
 
+// Object to keep track of active users
+let activeUsers = {};
+
+// Function to update the active user list in the DOM
+function updateActiveUserList() {
+    const userListElement = document.getElementById("active-users");
+    userListElement.innerHTML = ''; // Clear the current list
+
+    // Populate the list with active users
+    for (const username in activeUsers) {
+        const userItem = document.createElement("li");
+        userItem.textContent = username;
+        userListElement.appendChild(userItem);
+    }
+}
+
+// Socket event when a user joins
+socket.on("user_joined", (data) => {
+    activeUsers[data.username] = true; // Add user to the active list
+    updateActiveUserList(); // Update the DOM
+});
+
+// Socket event when a user leaves
+socket.on("user_left", (data) => {
+    delete activeUsers[data.username]; // Remove user from the active list
+    updateActiveUserList(); // Update the DOM
+});
+
+// Handle socket disconnection to update the user list
+socket.on("disconnect", () => {
+    // Optionally, clear the active users list or handle specific user disconnection
+    // For example, you might want to remove the current user from the list
+    delete activeUsers[username]; // Remove the current user
+    updateActiveUserList(); // Update the DOM
+});
+
+
 // Function to handle sending the message
 function sendMessage() {
     const message = document.getElementById("message").value;